Dropped srcset candidate "<URL>" for all images

Viewed 1845

I use the Divi theme on my Wordpress site and I am using their theme builder to design all of my category pages. I found this template which I like the look of - https://divisoup.com/css-grid-blog-layout/

This includes adding the below JavaScript code to do some of the design as well as the following CSS too.

<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;
}

This is the page in question - https://travellingpair.co.uk/destinations/europe/

I'm unsure as to what is causing the errors or what they mean, but it is stopping other things from loading on the page, such as the background image behind the page header, but the actual blog design is as expected.

The errors are:

enter image description here

UPDATE: Figured out that the issue was being caused by this piece of code:

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

It was removing the commas from within the srcset attribute as well and therefore making it invalid. It should have only been removing the commas and replacing the | with / in the post meta, but looks like it was doing it with the images as well. If anyone has any ideas on that bit it would be appreciated.

1 Answers

Okay so I did some digging and this was being caused by the following piece of code in the JS code:

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

This was meant to replace all pipes with slashes as well as removing the commas from the post-meta, but looks like the person who created the layout and code had set this to apply within the ".et_pb_post" class rather than ".post-meta" to just have it remove from the meta. Instead it was doing this in the whole post and that included taking the commas out of the "srcset" attribute meaning it was invalid.

Related