Проблема с получением эскиза постов блоггера в шаблоне Soho - PullRequest
0 голосов
/ 05 февраля 2020

У меня проблема с получением эскиза постов блоггера в шаблоне Soho. Код работал в другом шаблоне, но когда я изменил на Soho, картинки уменьшенного изображения не соответствуют ожидаемому размеру, они возвращают очень маленькое изображение.

enter image description here

Размер должен быть таким: enter image description here

Это не относится к конфигурации css ...

Код blogger страница, на которую я звоню:

          <div class='post'>
            <b:class cond='data:view.isMultipleItems and data:post.featuredImage' name='has-featured-image'/>
            <b:class cond='data:view.isMultipleItems and not data:post.featuredImage' name='no-featured-image'/>
            <b:include data='post' name='postMeta'/>
            <b:if cond='data:view.isSingleItem'>
              <b:include name='headerByline'/>
              <b:include data='post' name='postTitle'/>
              <div class='post-body-container'>
                <b:include data='post' name='postBody'/>
              </div>
            <b:else/>
              <b:if cond='data:post.featuredImage'>
                <div class='snippet-thumbnail'>
                  <a expr:href='data:post.url'>
                    <b:comment>Max width is 576, so max size @ 2x is 1152.</b:comment>
                    <b:include data='{                                        image: data:post.featuredImage,                                        imageSizes: [320,490,576,1152],                                        sourceSizes: &quot;(max-width: 576px) 100vw, (max-width: 1024px) 576px, 490px&quot;                                      }' name='responsiveImage'/>
                  </a>
                  <b:include name='headerByline'/>
                </div>
              <b:else/>
                <b:include name='headerByline'/>
              </b:if>
              <b:include data='post' name='postTitle'/>
            </b:if>
            <b:include data='post' name='postFooter'/>
          </div>
        </b:includable>
        <b:includable id='feedLinks'>

И я называю эту конфигурацию сообщений в следующем блоге:

<div id="demo"></div>
<script>
function getPosts(json){
    var list = [];
    var data = json.feed.entry;
    list.push("<section class='colorlib-blog' data-section='blog'>");
    list.push("<div class='colorlib-narrow-content'>");
    list.push("<div class='row'>");
    list.push("<div class='col-md-6 col-md-offset-3 col-md-pull-3 animate-box' data-animate-effect='fadeInLeft'>");
    list.push("<span class='heading-meta'></span>");
    list.push("<h2 class='colorlib-heading'>Recent Blog</h2>");
    list.push("</div>");
    list.push("</div>");

    for (var i = 0; i < data.length; i++) {
        var title = "<h3>" + data[i].title.$t + "</h3>";
        var link = data[i].link.pop().href;
        var summary = "<p>" + data[i].content.$t.replace(/<\/?[^>]+(>|$)/g, "").substr(0, 120) + "</p>";

        var dateT = data[i].published.$t.substr(0, 10);

        if (data[i].media$thumbnail) {
            var img = "<img src='" + data[i].media$thumbnail.url + "' class='img-responsive' alt='HTML5 Bootstrap Template by colorlib.com'>";
        } else {
            var doc = new DOMParser().parseFromString(data[i].content.$t, "text/html");
            var imgtag = doc.querySelector('img');
            if (imgtag) {
                var img = "<img src='" + imgtag.src + "' class='img-responsive' alt='HTML5 Bootstrap Template by colorlib.com'>";
            } else {
                var img = "";
            }

        }
    list.push("<div class='row'>");
    list.push("<div class='col-md-4 col-sm-6 animate-box' data-animate-effect='fadeInLeft'>");
    list.push("<div class='blog-entry'>");
    list.push("<div class='feed-post'>");
    list.push("<a href='"+link+"' class='blog-img'>"+img+"</a>");
    list.push("<div class='desc'>");
    list.push("<span><small>"+dateT+"</small> | <small> Angélica Ribeiro </small> | <small> <i class='icon-bubble3'></i> 4</small></span>");
    list.push("<h3><a href='"+link+"'>"+title+"</a></h3>");
    list.push(summary);
    list.push("</div>");
    list.push("</div>");
    list.push("</div>");
    list.push("</div>");
}
    list.push("</div>");
    list.push("<div class='row'>");
    list.push("<div class='col-md-12 animate-box'>");
    list.push("<p><a href='https://angelribeirocomp.blogspot.com/' class='btn btn-primary btn-lg btn-load-more'>Load more <i class='icon-reload'></i></a></p>");
    list.push("</div>");
    list.push("</div>");
    list.push("</div>");
    list.push("</section>");
    document.getElementById('demo').innerHTML = list.join('');

}



</script>




<script src="https://www.blogger.com/feeds/614640065733671379/posts/default?alt=json&max-results=3&callback=getPosts"></script>     

Спасибо большое

...