javascript - Wordpress,Divi 主题:博客模块未呈现文章图像
问题描述
我在我的客户 wordpress 网站上使用 divi 主题。在每个帖子页面的底部,我都有一个“相关文章”部分,显示与当前文章类别匹配的其他博客文章。我还添加了额外的 CSS 来均衡在页面加载时工作的列高度,但是当我单击“旧条目”时,它无法正确呈现图像。我试过寻找类似的问题,但没有运气。
这是一个示例帖子页面:https ://mywingwoman.com.au/30-fun-date-ideas-for-summer
这是用于均衡列的附加 CSS:
/** 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;
}```
解决方案
该问题与 JetPack 和延迟加载功能有关。
尝试检查图像并删除与延迟加载相关的所有属性。
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"
删除那些东西 ^ 并出现图像。所以一个快速的解决方法是禁用延迟加载。
推荐阅读
- swift - 删除一个 PFUser 作为另一个管理员 PFUser
- python - Python - 打印时如何缩短浮点数?
- azureportal - 在 Azure Blue Prints 中将输出从一个工件传递到另一个工件
- google-sheets - 谷歌表格 - 将数据从行复制到列值条件的列
- c++ - Rapidxml next_sibling 不返回下一个兄弟
- python - 对一堆方程使用 sympy
- r - 使用 ggplot2 将文本标签放入相应的饼图切片中
- omnet++ - Artery : 车行人交互场景
- vue.js - VueJS 3 提取/获取反应()数据
- ios - UIStackViews 在另一个 UIStackView 和 TableView 内部崩溃