Replacing wordpress blog post images markup with custom div

  css, html, php, wordpress

The images that are posted on a wordpress blog gets marked up as,

<figure class="wp-block-image size-large">
 <img src="http://localhost/ela/wp-content/uploads/2020/07/MG_5512_23.jpg" alt="" class="wp-image-541" srcset="http://localhost/ela/wp-content/uploads/2020/07/MG_5512_23.jpg 683w, http://localhost/ela/wp-content/uploads/2020/07/MG_5512_23-200x300.jpg 200w" sizes="(max-width: 683px) 100vw, 683px">
</figure>

I’d like to have the images encased in the following structure;

<div class="img-box">
 <div class="item loaded">
   <img src="http://localhost/ela/wp-content/uploads/2020/07/07_40.jpg" data-src="http://localhost/ela/wp-content/uploads/2020/07/07_40.jpg" alt="title">
 </div>
</div>

I did find some posts on SO but I wasn’t able to achieve this particular functionality.

Source: Ask PHP

LEAVE A COMMENT