- This topic has 14 replies, 3 voices, and was last updated 11 months, 4 weeks ago by
Tom.
-
AuthorPosts
-
April 11, 2020 at 5:13 pm #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.April 12, 2020 at 9:28 am #1236365David
StaffCustomer SupportHi 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/April 13, 2020 at 4:34 am #1237098Jakub
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_eoH1ciMApril 13, 2020 at 5:43 am #1237191David
StaffCustomer SupportHmmm… 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/April 13, 2020 at 6:41 am #1237262Jakub
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?
April 13, 2020 at 7:58 am #1237444David
StaffCustomer SupportTry 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/April 13, 2020 at 1:46 pm #1237852Jakub
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" ...
April 13, 2020 at 6:05 pm #1238000Tom
Lead DeveloperLead DeveloperAs 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-developmentApril 13, 2020 at 7:40 pm #1238046Jakub
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?April 14, 2020 at 9:42 am #1238958Tom
Lead DeveloperLead DeveloperHmm, 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-developmentApril 15, 2020 at 8:59 am #1240353Jakub
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:April 15, 2020 at 9:01 am #1240357April 15, 2020 at 5:22 pm #1240824Tom
Lead DeveloperLead DeveloperSorry 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-developmentApril 19, 2020 at 5:00 am #1245156Jakub
It works now. Thank you, Tom!
April 19, 2020 at 9:27 am #1245573Tom
Lead DeveloperLead DeveloperNo problem! 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.