Отброшен кандидат srcset "<URL>" для всех изображений - PullRequest
Новая
       20

Отброшен кандидат srcset "<URL>" для всех изображений

0 голосов
/ 05 апреля 2020

Я использую тему Divi на своем сайте Wordpress и использую их конструктор тем для оформления всех страниц моей категории. Я нашел этот шаблон, который мне нравится - 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/

Я не уверен относительно причин ошибок или их значения , но это мешает другим вещам загружаться на страницу, например фоновое изображение за заголовком страницы, но фактический дизайн блога соответствует ожиданиям.

Ошибки:

enter image description here

ОБНОВЛЕНИЕ: выяснилось, что проблема вызвана этим фрагментом кода: 

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

Он также удалял запятые из атрибута srcset и поэтому делает его недействительным. Это должно было быть только удаление запятых и замена | с / в мета поста, но похоже, что он делал это и с изображениями. Если у кого-то есть какие-либо идеи по этому поводу, мы будем благодарны.

1 Ответ

0 голосов
/ 05 апреля 2020

Хорошо, я немного покопался, и это было вызвано следующим фрагментом кода в JS коде: 

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

Это должно было заменить все трубы косыми чертами, а также удалить запятые из post-meta, но похоже, что человек, создавший макет и код, установил это для применения внутри класса ".et_pb_post", а не ".post-meta", чтобы просто удалить его из мета. Вместо этого он делал это во всем посте и включал в себя удаление запятых из атрибута "srcset", означающего, что он недействителен.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...