简体   繁体   中英

Wordpress, Divi Theme: Blog Module not rendering article image

I am using divi themes on my clients wordpress website. At the bottom of each post page, I have a 'related article' section that displays other blog articles that match the category of the current article. I have also added extra CSS to equalize the column heights which works on page load but when I click 'older entries' it fails to render the images correctly. I've tried searching for similar issue but with no luck.

Here is an example post page: https://mywingwoman.com.au/30-fun-date-ideas-for-summer

And here is the additional CSS to equalize the columns:

/** Equalise blog article heights in related blog section **/
.bloggrid .et_pb_salvattore_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.bloggrid article {
        margin-bottom: 20px !important;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.bloggrid .post-content {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.bloggrid .column {
        margin-bottom: 20px !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
/** Remove extra white space below the image of blogs in the related articles section on each blog page **/
.bloggrid .et_pb_post .et_pb_image_container
{
margin: -20px -20px 0px;
}```

The problem has something to do with JetPack and the Lazy Load feature.

Try inspecting the image and deleting all the attributes related to lazy loading.

data-lazy-srcset="https://i1.wp.com/mywingwoman.com.au/wp/wp-content/uploads/2019/02/Romantic-Gesture-cropped.jpg?fit=1950%2C500&ssl=1 479w, https://i1.wp.com/mywingwoman.com.au/wp/wp-content/uploads/2019/02/Romantic-Gesture-cropped.jpg?resize=400%2C250&ssl=1 480w " 
data-lazy-sizes="(max-width:479px) 479w, 100vw " 
data-lazy-src="https://i1.wp.com/mywingwoman.com.au/wp/wp-content/uploads/2019/02/Romantic-Gesture-cropped.jpg?resize=400%2C250&is-pending-load=1#038;ssl=1"
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

Remove that stuff ^ and the image appears. So a quick workaround is to disable lazy loading.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM