Issue with loading logo

[Jakub]

Hi,

It’s my first day using GP. I am changing after using Avada for a long time. I am starting with setting up the header.

I am using an SVG logo and navigation as header option. I am running the SVG Support plugin with the inline SVG option enabled. I have used the following CSS to set the logo size:

.site-logo svg {
		height: 65px;
    width: auto;
		padding-top: 5px;
}

When loading the page on mobile and desktop safari the logo first appears at one size and then quickly disappears and appears again at a slightly different size.
On chrome initially the logo doesn’t load and I get a text instead (like in this image https://prnt.sc/rxkl4q) and after a brief moment the logo appears.

[David]

Hi there,

looks like the original logo image is being served from HTTP instead of HTTPS – if you can repair the URL and then let us know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jakub]

I forgot to enable SSL for my staging site. I did it now.
So this eliminated the error on chrome, however the logo is still changing size immediately after loading the site in all the browsers that I tried. Here is a video of this: https://youtu.be/fmd_eoH1ciM

[David]

Hmmm… can you disable the Inline SVG option so we can see if thats the cause of the resizing.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jakub]

Yes, disabling Inline SVG fixes this.

This option is useful, however because it allows me to style the SVG logo directly with CSS. (I want the logo to change color on hover)

Do you know how I can keep it inline without the size changes or style the SVG without the Inline option?

[David]

Try the inline version now without adding any CSS to size the logo. It should use the size that is defined within the SVG markup.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jakub]

I didn’t define the size in the SVG markup and was relying on CSS for the sizing.
When I do define it in the markup, it loads the right size straight away. It seems like the CSS is loading too late. For the logo this is not a problem because I can define style parameters in the SVG. But when I will be using inline SVG for icons, I will have to use CSS to apply different colours and sizes to one SVG file. Is there a way to fix this issue?
(If you load my site now you can see a comparison of an SVG with size and colour defined by CSS and defined in the markup)

Also how can I add a class to the logo? I would like to make it:
<img class="header-image style-svg" ...

[Tom]

As long as the CSS loads before the image HTML (it should if it’s added using one of these methods: https://docs.generatepress.com/article/adding-css/), there shouldn’t be any jumping around – the image will have the size ready to go by the time it renders.

As for adding a class, this should help:

add_filter( 'generate_logo_attributes', function( $atts ) {
    $atts['class'] = 'header-image your-class';

    return $atts;
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jakub]

Thank you, the code for adding the class worked great.

I am adding my CSS in to the Additional CSS in theme customizer and the images are still jumping around. You can see what is happening here: https://staging-nasterskaeu.kinsta.cloud/

Btw, I also installed Simple CSS plugin and I get the following message from WP debugger: Notice: Trying to access array offset on value of type bool in /www/nasterskaeu_534/public/wp-content/plugins/simple-css/simple-css.php on line 214
Do you what might be causing this?

[Tom]

Hmm, I’m not seeing anything obvious that would be causing that.

You mentioned you’re using a plugin with inline SVG support. What is that doing? Is it taking an SVG img tag and converting it to inline SVG? If so, that makes sense, as the change won’t happen until the javascript loads, which explains the jump once everything loads.

What if you ditched that plugin and added your SVG manually?:

add_filter( 'generate_logo_output', function() {
    return sprintf( // WPCS: XSS ok, sanitization ok.
        '<div class="site-logo">
            <a href="%1$s" title="%2$s" rel="home">
                YOUR INLINE SVG HTML HERE
            </a>
        </div>',
        esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jakub]

Yes, that takes the img tag and converts it to SVG.
You’re right, when I add the SVG manually there is no more jumping.
I seem to get an error when I use that code:

[Jakub]

[Tom]

Sorry about that, can you try the updated code?: https://generatepress.com/forums/topic/issue-with-loading-logo/#post-1238958

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jakub]

It works now. Thank you, Tom!

[Tom]

No problem! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts