Jak zapewnić miniaturki wszystkim popularnym postom?

Jednym z Moich ulubionych gadżetów Bloggera jest moduł "Popularnych Postów". Wyświetla on listę najczęściej wyświetlanych postów z określonego - wybranego w konfiguracji - przedziału czasowego. Od strony wizualnej może to być lista samych tytułów, może posiadać zajawki, jak też miniaturki zawartych w postach obrazków.

Jako projektant, możesz pokusić się o stworzenia pewnej kompozycji, korzystającej z wszystkich tych elementów - tym samym czyniąc Twój projekt nie tylko funkcjonalnym, ale i ciekawszym. Szczególnie obecność miniaturek postów potrafi grać tu dużą rolę, gdyż często mogą to być przecież różne zdjęcia (w zależności od tego, które posty są najpopularniejsze w danym okresie) - a więc, co za tym idzie, efekt może być dość zróżnicowany, zaskakując nierzadko przeróżnymi zestawieniami barw/obrazków.

Ideał może jednak psuć sytuacja, w której nie wszystkie posty posiadają miniaturki. Umieszczanie obrazków w postach tylko (albo przede wszystkim) po to, aby wyposażyć je w miniaturki - nie wydaje się zbyt wygodnym rozwiązaniem. Możesz jednak rozwiązać ten problem inaczej, i to na kilka różnych sposobów.

Sposób #1: CSS.

Myśląc kreatywnie, wystarczy że uczynisz inny obrazek tłem miniatur zawartych w gadżecie "Popularnych Postów". Aby to jednak uczynić, potrzebujesz:

1.Wiedzieć, jakiemu elementowi tak naprawdę trzeba nadać tło? Najwygodniej byłoby wybrać sam obrazek (img) - sęk w tym, że posty bez miniatur nie wygenerują żadnego, a więc i zabraknie pretekstu do ukazania na stronie tła. Potrzebujesz dowiedzieć się, w jakim elemencie owe obrazki miniatur są zawarte (możesz to zrobić np. korzystając z funkcji "Zbadaj element" w Chrome - wybierając to polecenie po uprzednim prawym kliku na obrazek miniaturki w Popularnych Postach).

2.Kiedy już wiesz w jakim elemencie jest zawarty obrazek miniaturki, potrzebujesz go jeszcze dokładnie "ostylować", aby nadane mu tło (którym będzie tak naprawdę zapasowy obrazek) dokładnie pokrywało się z miniaturką (tak aby nie było widoczne, gdy miniaturki istnieją - a ukazywało się tylko wtedy, gdy ich brak). Wizualnie da to więc efekt tożsamy z sytuacją, w której wszystkie posty miałyby miniaturki.

Sposób #2: jQuery.

Możesz napisać krótką instrukcję w jQuery, która wykryje posty bez miniatur (wewnątrz "Popularnych Postów") oraz doda do nich wskazany przez Ciebie obrazek. Taka instrukcja byłaby uzależniona ściśle od tego, jak skonstruowany jest sam gadżet, przykładowo w Moim przypadku kod pojedynczej pozycji Popularnych Postów wygląda tak:

<b:loop values='data:posts' var='post'>
<span>
<a expr:href='data:post.href'>
<b:if cond='data:post.thumbnail'>
<img expr:src='data:post.thumbnail' />
</b:if>
<h4><data:post.title/></h4>
<p><data:post.snippet/></p>
</a>
</span>
</b:loop>

Krótko mówiąc, mamy więc <span>, zawierający link (<a>), obejmujący obrazek (<img>), tytuł (<h4>) i akapit (<p>). Wystarczająco wiele punktów orientacyjnych dla jQuery, w którym moglibyśmy napisać instrukcję np. tak:

Jeśli <span> zawarty w "Popularnych Postach" nie zawiera obrazka (a więc miniaturki), dodaj wskazany obrazek przed tytułem <h4>.

Od strony kodu instrukcja mogłaby wyglądać następująco:

$('#PopularPosts1 span').not(":has(img)").each(function() {
$( "h4", this ).before( "<img src='http://AdresZastępczegoObrazka' />" );
});

Sposób #3: natywna składnia Bloggera.

Instrukcję w tym samym duchu możesz napisać również bezpośrednio w szablonie Bloggera, korzystając z jego natywnej składni. Wystarczy, że w podanym wcześniej kodzie "Popularnych Postów" uwzględnisz sytuację braku miniatur. Już na starcie jest to ułatwione, gdyż samo posiadanie miniatury przez post zostało ujęte jako warunek ("jeśli post posiada miniaturkę" = <b:if cond='data:post.thumbnail'>) - wystarczy że dopiszesz, co ma się stać w przeciwnym razie (za pomocą <b:else/>). Całość mogłaby wyglądać np. tak (używając wcześniejszego przykładu, nowy kod zaznaczyłem na czerwono):

<b:loop values='data:posts' var='post'>
<span>
<a expr:href='data:post.href'>
<b:if cond='data:post.thumbnail'>
<img expr:src='data:post.thumbnail' />
<b:else/>
<img src='http://AdresZastępczegoObrazka' />
</b:if>
<h4><data:post.title/></h4>
<p><data:post.snippet/></p>
</a>
</span>
</b:loop>

Różnice?

To którą metodę wybierzesz, może zależeć od kilku rzeczy. Przykładowo jeszcze jakiś czas temu edytowanie szablonu Bloggera było dla Mnie czarną magią - starałem się tego unikać za wszelką cenę. Blogger jest pod tym względem bardzo przyjazny, gdyż umożliwia wstawianie tak dodatkowego kodu jQuery, jak i CSS bez jakiejkolwiek potrzeby pracy z szablonem (kod jQuery możesz serwować, korzystając z gadżetu "HTML/JavaScript", CSS natomiast - z "Projektanta Szablonów", który uruchamiasz w dziale "Układ" w panelu administracyjnym, aby następnie przejść do zakładki "Zaawansowane" i dalej do podsekcji "Dodaj arkusz CSS", gdzie możesz wpisywać wszelkie dodatkowe css'owe instrukcje).

Jeśli więc nie czujesz się komfortowo z modyfikowaniem szablonu Bloggera, wystarczy sposób jQuery lub CSS. Z drugiej strony, kiedy oswoisz się już z bloggerowymi szablonami i nie będą Ci straszne - jak zauważyłeś w powyższym przykładzie, rozwiązanie interesującej Nas sytuacji przedstawia się dość prosto (właściwie najprościej). Bez "akrobacji" w CSS, jak i bez dodatkowego gadżetu z kodem jQuery. Warto zauważyć również. że sama ilość potrzebnego kodu jest w tym przypadku najmniejsza.