[Resolved] Issue with loading logo

Home Forums Support Issue with loading logo

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1235741
    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.

    #1236365
    David
    Staff
    Customer Support

    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.

    #1237098
    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

    #1237191
    David
    Staff
    Customer Support

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

    #1237262
    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?

    #1237444
    David
    Staff
    Customer Support

    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.

    #1237852
    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" ...

    #1238000
    Tom
    Lead Developer
    Lead Developer

    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;
    } );
    #1238046
    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?

    #1238958
    Tom
    Lead Developer
    Lead Developer

    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' ) ) )
        );
    } );
    #1240353
    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:

    PhP error

    #1240357
    Jakub

    Screenshot-2020-04-15-at-16-52-38

    #1240824
    Tom
    Lead Developer
    Lead Developer
    #1245156
    Jakub

    It works now. Thank you, Tom!

    #1245573
    Tom
    Lead Developer
    Lead Developer
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.