- This topic has 11 replies, 5 voices, and was last updated 3 years, 4 months ago by
.
-
Posts
-
Hello,
I’m using Imagify for image compression and webp images. It is currently set to use rewrite rules regarding webp, but advise using <picture> tags is preferred and works with CDN, but may break my theme. Do you have any experience to know if <picture> tags will break a GP/GB site?
“The first option adds rewrite rules to your site’s configuration file (.htaccess) and does not alter your pages code. This does not work with CDN though.
The second option replaces thetags with <picture> tags. This is the preferred solution but some themes may break, so make sure to verify that everything seems fine.”
Customer Support
Hi there,
I can’t see how it would be an issue for GP or GB.
Can you give it a shot and let us know if you run into any issues?
Thanks 🙂
Thanks. Will do. I also found an experienced GP user and he confirmed he uses <picture> on his sites with no issues.
Glad to hear 🙂
well, update. I saw no difference on first site I tried Imagify <picture> tags on, but also am not sure webp were displayed. So tried on another small site I had a clone for. All looked good, except the image in the main nav got huge. darn.
Any suggestions? or shall I just ask the dev who made the main to see if she can see anything she can change in the header?
Thanks
PamCustomer Support
Hi Pam,
If this issue only occurs with the <picture> setting, it would be best to ask Imagify or the dev for assistance.
if you would like to address this via CSS, here’s a CSS you may try adding in Appearance > Customize > Additional CSS:
.site-logo picture>img { height:60px; width:60px; } .main-nav picture>img{ height:30px; width:30px; }Hope this helps!
Hi Fernando, Thanks. tried the css. no difference. I’ve handed off to the developer who made the header to see what is ‘different’ about it. Will let you know if we learn anything that could help others
The CSS just makes the logo in the menu button smaller. Here it is how it looks like from my end with the CSS added: https://share.getcloudapp.com/4gurxRvx
Got it! Hope you find a solution!
Hi,
I’m sorry for reviving an old thread but I’m having the same issue. The Imagify picture tag method breaks the GenerateBlocks image block and, on my Cloudways server, the rewrite rules method does not serve webp for some reason (I’m looking into that separately).
But what is frustrating is that only the GenerateBlocks image block is affected.
The native image block works with the picture tag as does the Advanced Image block in Kadence Blocks. I think that’s really something you should try to fix from within GenerateBlocks as we can’t write manual CSS code to dimension all images on a site and the GB image block is by far the best..
Thanks!
Customer Support
Hi there,
it is something we are looking into, and we will address in a future update.
Awesome! Thanks David!
You’re welcome
- You must be logged in to reply to this topic.
