,javascript,wordpress,srcset"/>
时间戳

首页 > 解决方案 > 已删除 srcset 候选“" 对于所有图像

javascript - 已删除 srcset 候选“" 对于所有图像

问题描述

我在我的 Wordpress 网站上使用 Divi 主题，并且我正在使用他们的主题构建器来设计我所有的类别页面。我找到了这个模板，我喜欢它的外观 - https://divisoup.com/css-grid-blog-layout/

这包括添加下面的 JavaScript 代码来做一些设计以及下面的 CSS。

<script>
//CSS Grid Blog Layout by Divi Soup
(function ($) {
    $(document).ready(function () {
        //Wrap first grid elements in containers
        $(".ds-grid-blog-1 .et_pb_post").each(function () {
            $(this).find(".entry-featured-image-url").wrapAll('<div class="ds-grid-blog-image"></div>');
            $(this).find(".entry-title, .post-meta, .post-content").wrapAll('<div class="ds-grid-blog-content"></div>');
        });
    });
})(jQuery);
(function ($) {
    $(document).ready(function () {
        $(document).bind('ready ajaxComplete', function () {
            //Wrap second grid elements in containers
            $(".ds-grid-blog-2 .et_pb_post").each(function () {
                $(this).find(".entry-featured-image-url").wrapAll('<div class="ds-grid-blog-image"></div>');
                $(this).find(".entry-title, .post-meta, .post-content").wrapAll('<div class="ds-grid-blog-content"></div>');
            });
            //Move elements around
            $(".et_pb_post").each(function () {
                $(".post-meta", this).insertBefore($(".entry-title", this));
            });
            //Add button class to read more link
            $(".et_pb_post a.more-link").addClass("et_pb_button");
            //Replace pipes and remove commas from the meta
            $(".et_pb_post").html(function () {
                return $(this).html().replace(/\|/g, '/').replace(/,/g, '');
            });
        });
    });
})(jQuery);
//End CSS Grid Blog Layout by Divi Soup
</script>

/*-----------------------------------------------*/
/*-------CSS Grid Blog Layout by Divi Soup-------*/
/*-----------------------------------------------*/


/*Blog layout settings, adjust these values only*/

:root {
    --ds-white: #ffffff; /*The background colour for the post content and text colour for the second and third post content*/
    --ds-grid-2-item: 250px; /*Minimum column width for second grid, decrease this value for more columns*/
    --ds-grid-gap: 30px; /*The gap between posts*/
    --ds-title-background: rgba(0, 0, 0, .5); /*The background colour of the titles on the second and third posts*/
}


/******************************************************/
/*You should not need to edit anything below this line*/
/******************************************************/


/*Set posts to flex and remove post margin*/

.ds-grid-blog .et_pb_post {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 0;
}


/*Set flex direction for second grid*/

.ds-grid-blog-2 .et_pb_post {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}


/*Set post content to flex*/

.ds-grid-blog-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: var(--ds-white);
}


/*Remove image margin and resize for responsiveness*/

.ds-grid-blog .entry-featured-image-url {
    margin-bottom: 0;
    height: 100%;
    width: auto;
}

.ds-grid-blog .et_pb_post a img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}


/*Reset the read more link display*/

.ds-grid-blog a.more-link {
    display: initial;
}


/*Add margin to excerpt*/

.ds-grid-blog .post-content p {
    margin-bottom: 20px;
}


/*Pagination placement*/

.ds-grid-blog .pagination {
    grid-column: 1/-1;
}


/*Set the grid for the first 3 posts*/

.ds-grid-blog-1 .et_pb_ajax_pagination_container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--ds-grid-gap);
}


/*Set the grid for the remaining posts*/

.ds-grid-blog-2 .et_pb_ajax_pagination_container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--ds-grid-2-item), 1fr));
    grid-gap: var(--ds-grid-gap);
}


/*First grid first post placement*/

.ds-grid-blog-1 .et_pb_post:first-child {
    grid-column: 1 / -1;
}


/*First grid second post placement*/

.ds-grid-blog-1 .et_pb_post:nth-child(2) {
    grid-column: 1 / 2;
}


/*First grid third post placement*/

.ds-grid-blog-1 .et_pb_post:nth-child(3) {
    grid-column: 2 / 3;
}


/*First post content*/

.ds-grid-blog-1 .et_pb_post:first-child .ds-grid-blog-content {
    width: 60%;
    padding: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}


/*Position and colour for second & third posts*/

.ds-grid-blog-1 .et_pb_post:nth-child(n+2) .ds-grid-blog-content {
    background: var(--ds-title-background);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px;
    text-align: center;
}


/*Text colour for second & third posts*/

.ds-grid-blog-1 .et_pb_post:nth-child(n+2) .entry-title,
.ds-grid-blog-1 .et_pb_post:nth-child(n+2) .post-meta,
.ds-grid-blog-1 .et_pb_post:nth-child(n+2) .post-meta a {
    color: var(--ds-white) !important;
}


/*Font size for second & third posts*/

.ds-grid-blog-1 .et_pb_post:nth-child(n+2) .entry-title {
    font-size: 150% !important;
}


/*Hide excerpt for second & third posts and second grid posts*/

.ds-grid-blog-1 .et_pb_post:nth-child(n+2) .post-content,
.ds-grid-blog-2 .et_pb_post .post-content p {
    display: none;
}


/*Remaining posts display*/

.ds-grid-blog-2 .et_pb_post .ds-grid-blog-content {
    padding: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 100%;
}


/*Set margin for remaining posts*/

.ds-grid-blog-2 .et_pb_post .entry-title {
    margin-bottom: 30px;
}


/*Keep read more link at bottom*/

.ds-grid-blog-2 .et_pb_post .post-content {
    margin-top: auto;
}


/*Adjust for mobile*/

@media all and (max-width:980px) {
    .ds-grid-blog-1 .et_pb_post:first-child {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .ds-grid-blog-1 .et_pb_post:first-child .ds-grid-blog-content {
        width: 100%;
    }
    .ds-grid-blog-1 .et_pb_post {
        grid-column: 1 / -1 !important;
    }
}


/*-----------------------------------------------*/
/*-----End CSS Grid Blog Layout by Divi Soup-----*/
/*-----------------------------------------------*/

.more-link.et_pb_button {
    text-transform: capitalize;
    color: #3984BC;
}

这是有问题的页面 - https://travellingpair.co.uk/destinations/europe/

我不确定是什么导致了错误或它们的含义，但它阻止了页面上加载其他内容，例如页面标题后面的背景图像，但实际的博客设计符合预期。

错误是：

在此处输入图像描述

更新：发现问题是由这段代码引起的：

$(".et_pb_post").html(function () {
    return $(this).html().replace(/\|/g, '/').replace(/,/g, '');
});

它也从 srcset 属性中删除了逗号，因此使其无效。它应该只是删除逗号并替换 | 在帖子元中使用 / ，但看起来它也在使用图像进行操作。如果有人对此位有任何想法，将不胜感激。

标签： javascriptwordpresssrcset

解决方案

好的，所以我做了一些挖掘，这是由 JS 代码中的以下代码引起的：

$(".et_pb_post").html(function () {
    return $(this).html().replace(/\|/g, '/').replace(/,/g, '');
});

这意味着用斜杠替换所有管道以及从 post-meta 中删除逗号，但看起来创建布局和代码的人已将其设置为在“.et_pb_post”类中​​应用，而不是在“.post-元”只是让它从元中删除。相反，它在整篇文章中都这样做了，其中包括将逗号从“srcset”属性中取出，这意味着它是无效的。

推荐阅读