Jest to mój blog http://www.dateswithdanie.com hostowany na Blogger. Niektóre dni temu obrazy obok tytułów pocztowych na stronie głównej właśnie obrócili się rozmyte. Próbowałem go naprawić, szukali rozwiązań wszędzie. To zaskakujące, bo działało dobrze, nie manipulowałem z kodem i nagle się zmieniły. Pomóż mi z rozwiązaniem, ponieważ naprawdę jestem sfrustrowany, dziękuję.

Kod -

<b:if cond='data:blog.pageType == &quot;index&quot;'>
          <b:if cond='data:post.thumbnailUrl'>
            <div class='block-image'><div class='thumb'>
              &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(<data:post.thumbnailUrl/>) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
              </div>
             </div>
            <b:else/>
            <b:if cond='data:post.firstImageUrl'>
              <div class='block-image'><div class='thumb'>
                &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(<data:post.firstImageUrl/>) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
                </div>
              </div>
              <b:else/>
              <div class='block-image'><div class='thumb'>
                &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(http://1.bp.blogspot.com/-eAeO-DYJDws/Vkqtj4HFBFI/AAAAAAAAB0o/Q5OLsyONXM0/s1600-r/nth.png) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
                </div>
               </div>
            </b:if></b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
          <b:if cond='data:post.thumbnailUrl'>
            <div class='block-image'><div class='thumb'>
              &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(<data:post.thumbnailUrl/>) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
              </div>
             </div>
            <b:else/>
            <b:if cond='data:post.firstImageUrl'>
              <div class='block-image'><div class='thumb'>
                &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(<data:post.firstImageUrl/>) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
                </div>
             </div>
              <b:else/>
              <div class='block-image'><div class='thumb'>
                &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(http://1.bp.blogspot.com/-eAeO-DYJDws/Vkqtj4HFBFI/AAAAAAAAB0o/Q5OLsyONXM0/s1600-r/nth.png) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
                </div>
              </div>
            </b:if></b:if>
 </b:if>
0
Daniella Bature 28 czerwiec 2017, 09:50

3 odpowiedzi

Najlepsza odpowiedź

Obecnie kod motywowy używa JavaScript, aby zmienić wymiary obrazu miniatur. Ale ze względu na jakiś błąd (jak widać w konsoli przeglądarki), to już nie działa. Lepszym podejściem byłoby użycie operatora o zmianie rozmiaru obrazu blogera resizeImage, aby zmienić wymiary obrazu. Powyższy kod zmieni się w następujący sposób -

<b:if cond='data:blog.pageType == &quot;index&quot;'>
      <b:if cond='data:post.thumbnailUrl'>
        <div class='block-image'><div class='thumb'>
          &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(<b:eval expr='resizeImage(data:post.thumbnailUrl, 370)' />) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
          </div>
         </div>
        <b:else/>
        <b:if cond='data:post.firstImageUrl'>
          <div class='block-image'><div class='thumb'>
            &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(<b:eval expr='resizeImage(data:post.firstImageUrl, 370)' />) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
            </div>
          </div>
          <b:else/>
          <div class='block-image'><div class='thumb'>
            &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(http://1.bp.blogspot.com/-eAeO-DYJDws/Vkqtj4HFBFI/AAAAAAAAB0o/Q5OLsyONXM0/s1600-r/nth.png) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
            </div>
           </div>
        </b:if></b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
      <b:if cond='data:post.thumbnailUrl'>
        <div class='block-image'><div class='thumb'>
          &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(<b:eval expr='resizeImage(data:post.thumbnailUrl, 370)' />) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
          </div>
         </div>
        <b:else/>
        <b:if cond='data:post.firstImageUrl'>
          <div class='block-image'><div class='thumb'>
            &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(<b:eval expr='resizeImage(data:post.firstImageUrl, 370)' />) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
            </div>
         </div>
          <b:else/>
          <div class='block-image'><div class='thumb'>
            &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(http://1.bp.blogspot.com/-eAeO-DYJDws/Vkqtj4HFBFI/AAAAAAAAB0o/Q5OLsyONXM0/s1600-r/nth.png) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
            </div>
          </div>
        </b:if></b:if>
</b:if>
0
Prayag Verma 28 czerwiec 2017, 07:16

Tak, jego wspólne dla wszystkich użytkowników blogera "Link i inaczej.

0
Sai Charan 28 czerwiec 2017, 19:25

Zdjęcie przesłane jest zbyt małe 72x72 dla kontenera i że dzięki CSS rozmiar tła spróbuje rozciągnąć do rozmiaru kontenera. Spróbuj użyć większego obrazu zgodnie z szerokością pojemnika

background-size: cover; 
0
Anil Namde 28 czerwiec 2017, 07:04