theme development - How can I wrap all blog posts image with <picture class="c-picture">

admin管理员组

文章数量:1289383

Excellent WordPress programmers, I'd like to resolve an image issue with my WordPress theme. I tried everything I could, but I couldn't find a solution.

The issue is that my added blog posts images are not responsive. While my feature image is responsive since it has the tag <picture class="c-picture">. If I add <picture class="c-picture"> manual to the images it, fixes it.

Example:

<picture class="c-picture"><img loading="lazy" class="alignnone wp-image-160 size-full" src="/wp-content/uploads/2021/06/20210617_164346.jpg?resize=2048%2C2048&amp;ssl=1" alt="" width="2048" height="2048" srcset="/wp-content/uploads/2021/06/20210617_164346.jpg?w=2048&amp;ssl=1 2048w, /wp-content/uploads/2021/06/20210617_164346.jpg?resize=300%2C300&amp;ssl=1 300w, /wp-content/uploads/2021/06/20210617_164346.jpg?resize=1024%2C1024&amp;ssl=1 1024w, /wp-content/uploads/2021/06/20210617_164346.jpg?resize=150%2C150&amp;ssl=1 150w, /wp-content/uploads/2021/06/20210617_164346.jpg?resize=768%2C768&amp;ssl=1 768w, /wp-content/uploads/2021/06/20210617_164346.jpg?resize=1536%2C1536&amp;ssl=1 1536w, /wp-content/uploads/2021/06/20210617_164346.jpg?resize=1568%2C1568&amp;ssl=1 1568w" sizes="(max-width: 1000px) 100vw, 1000px" data-recalc-dims="1"></picture>

So my question is, can I have a function that will add <picture class="c-picture"> to all blog posts images. Thank you, guys. Post link: /

Excellent WordPress programmers, I'd like to resolve an image issue with my WordPress theme. I tried everything I could, but I couldn't find a solution.

The issue is that my added blog posts images are not responsive. While my feature image is responsive since it has the tag <picture class="c-picture">. If I add <picture class="c-picture"> manual to the images it, fixes it.

Example:

<picture class="c-picture"><img loading="lazy" class="alignnone wp-image-160 size-full" src="https://i1.wp/sololoaded/wp-content/uploads/2021/06/20210617_164346.jpg?resize=2048%2C2048&amp;ssl=1" alt="" width="2048" height="2048" srcset="https://i1.wp/sololoaded/wp-content/uploads/2021/06/20210617_164346.jpg?w=2048&amp;ssl=1 2048w, https://i1.wp/sololoaded/wp-content/uploads/2021/06/20210617_164346.jpg?resize=300%2C300&amp;ssl=1 300w, https://i1.wp/sololoaded/wp-content/uploads/2021/06/20210617_164346.jpg?resize=1024%2C1024&amp;ssl=1 1024w, https://i1.wp/sololoaded/wp-content/uploads/2021/06/20210617_164346.jpg?resize=150%2C150&amp;ssl=1 150w, https://i1.wp/sololoaded/wp-content/uploads/2021/06/20210617_164346.jpg?resize=768%2C768&amp;ssl=1 768w, https://i1.wp/sololoaded/wp-content/uploads/2021/06/20210617_164346.jpg?resize=1536%2C1536&amp;ssl=1 1536w, https://i1.wp/sololoaded/wp-content/uploads/2021/06/20210617_164346.jpg?resize=1568%2C1568&amp;ssl=1 1568w" sizes="(max-width: 1000px) 100vw, 1000px" data-recalc-dims="1"></picture>

So my question is, can I have a function that will add <picture class="c-picture"> to all blog posts images. Thank you, guys. Post link: https://sololoaded/nigerian-music-artists-who-were-born-rich/

• theme-development
• themes
• css
• javascript

Share Improve this question edited Jul 20, 2021 at 18:13 Tom J Nowell♦ 61k77 gold badges7979 silver badges148148 bronze badges asked Jul 20, 2021 at 17:34 GodwinGodwin 1333 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I think in your case you can do it using css by adding the height: auto; to image tags:

.c-entry-content img {
    max-width: 100%;
    height: auto;
}

本文标签： theme developmentHow can I wrap all blog posts image with ltpicture classquotcpicturequotgt