Responsive images with shapely-featured

Hello,

I am trying to performance optimize a website built on shapely, and I noticed that the featured image does not utilize srcset to serve smaller images to mobile devices.

Do you have any advice on how I could implement this?

Thanks,

Hi @pierrebalian,

I hope you are well today and thank you for your question.

I have tested it on my test site using latest version of Shapely theme and saw the srcset attribute is set for the featured images as displayed in the attached screenshot.

Please make sure you are using latest version of theme and WordPress.

Could you please share me your site URL where it is not displaying so that i can troubleshoot it?

Kind Regards,
Movin

Hi Movin, thanks for the response.

Here is a link to a site where I am having this issue:
www.ptnet.com

After I carefully reviewed things I did notice something else…

It is working on some pages, but not all. Its really weird. For example:

https://www.ptnet.com/data-center/data-center-assessment/ - Not Working

https://www.ptnet.com/intelligent-buildings/physical-security/ - Working

If you inspect the images you will see both images are the exact same dimensions. So it isn’t an aspect ratio or crop issue? They are also both using the same template file (page.php) and template partial (content-page.php)

In your theme for whatever reason you weren’t using featured images on pages, so I just took your thumbnail code from single or one of the partials it calls.

Any ideas?

The page https://www.ptnet.com/data-center/data-center-assessment/ you have shared above doesn’t display me any featured image but the error message “Page not found” as shown in the attached screenshot.

Please advise.

Also is this issue only occurring for you on pages or also on posts?

God darn it of course someone would go and edit the permalink after I posted.

New url:
https://www.ptnet.com/data-center/assessment/

It only seems to be happening on pages, I just checked the blog and the news section and they all seem to be fine.

https://www.ptnet.com/news/
https://www.ptnet.com/blog/

It seems this is happening on the page on your site because of the code you have copied in to the page template to display featured images so to resolve this issue please revert the changes you have made in your theme and instead use the child theme shared in the following topic that contains custom code to display featured image on page.

https://colorlibsupport.com/t/wordpress-standard-featured-images-dont-show-on-pages-with-shapely-theme/

Hello Movin,

Thank you for taking the time to get back to me, I appreciate the help you have given me in this and other matters. However in this instance I do not see anything in the child theme you have linked that is different from the code I have implemented by directly modifying shapely without a child theme. I know using child themes is preferred and has many benefits, but in this instance it was just easier for us to just use the theme for its skeleton. Removing it from future upgrades/changes is not something we are worried about.

Looking at the code you provided in the content-page.php template part…

<?php
        if( has_post_thumbnail() ){ 
                the_post_thumbnail( 'shapely-featured', array( 'class' => 'mb24'));
            }
		 the_title( '<h1 class="entry-title">', '</h1>' ); ?>

Then the code in my content-page.php template part…


<?php the_post_thumbnail( 'shapely-featured', array( 'class' => 'parallel-img')); ?>

I don’t bother with the php if statement because every page has a thumbnail, and I change the image class. I dont see how that would impact the responsive images functionality, especially considering that responsive images is working on some pages and not others(they use the same template files).

Just to be sure I dropped the code you provided in my content-page file and there was no change.

If it is working fine on some pages and not others on your site then this can be due to plugin conflict on your site so please try temporary deactivating all plugins and see whether everything works fine and then enable the plugins one by one to see which plugin is conflicting if any.