Wstawianie obrazków
Obrazek można dodać korzystając ze standardowej funkcji, przycisku “Dodaj obrazek” w panelu edycji wpisu. Możemy w takim przypadku dodać obrazek z komputera lub z biblioteki mediów tj. obrazków wcześniej wysłanych na serwer. Obrazek możemy wstawić w oryginalnym rozmiarze lub w kilku predefiniowanych rozmiarach (można je zmienić w Ustawienia/Media). Nową funkcją WP 2.9 jest możliwość edycji obrazków np. kadrowania czy skalowania. Obrazek możemy też wstawić jako miniaturkę (rozmiar definiowany w Ustawienia/Media), która linkuje do oryginalnego rozmiaru.
[gallery] pozwala na wyświetlenie miniaturek obrazków które zostały wysłane na serwer podczas edytowania wpisu.
- Podczas edycji wpisu wysyłamy obrazki z komputera przy użyciu przycisku “Dodaj obrazek”
- Zapisujemy ale nie wstawiamy ich do wpisu lub na stronę
- Robimy tak z kolejnymi obrazkami
- W treści wpisu dodajemy znacznik [
gallery] w miejscu gdzie ma pojawić się galeria
Znacznik ma kilka opcji np:
[gallery columns="4"] – w ilu kolumnach ma się wyświetlać galeria
[gallery id="123"] – wyświetlenie konkretnego obrazka nawet z innego wpisu
[gallery size="medium"] – rozmiar obrazków, domyślnie jest miniaturka
[gallery link="file"] – link do pliku obrazka
[gallery include="10,15"] – pokazuje obrazki o wskazanym id
[gallery exclude="25,28"] – pokazuje galerię z wyłączeniem zdjęć o wskazanych id
CSS galerii możemy zmodyfikować w pliku wp-includes/media.php
Więcej nt. shortcode [gallery] w dokumentacji Wordpressa.
Natknąłem się tu na problem z floatowaniem. Szerokość elementów galerii ustalana jest dynamicznie tj. cała dostępna szerokość jest dzielona przez ilość kolumn. Powoduje to przerzucanie ostatniego elementu do następnego wiersza. Poradziłem sobie z tym trochę hardcorowo, w pliku wp-includes/media.php na linii 733 zmieniłem floor(100/$columns) na floor(90/$columns), w ten sposób zostawiłem wystarczającą ilość miejsca. Wiem, że jest to rozwiązanie mocno nieeleganckie, ale działa. W przyszłości może pomyślę nad czymś odpowiedniejszym.
Brakowało mi tu jeszcze efektu lightboxa. Oczywiście w Wordpressie możemy doinstalować jakąś wypasioną wtyczkę Lightbox. Ja szukałem jednak czegoś lekkiego i prostego. Przymierzałem się do jQuery lightBox plugin według instrukcji Wpninja lub jQuery LightBoxClone. W końcu zdecydowałem się na Slimbox 2.
Dla pojedynczych obrazków atrybut rel="lightbox" adtywujący efekt lightboxa dodajemy ręcznie podczas edycji postów. Natomiast dla galerii tworzonych znacznikiem [gallery] atrybut rel="lightbox-dowolnanazwagalerii" dodajemy przez:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#gallery-1 a').attr('rel', 'lightbox-galeria1');
$('#gallery-2 a').attr('rel', 'lightbox-galeria2');
})
</script>
Kod umieszczamy w sekcji <head> przed linkiem włączającym slimbox2.js
Można również skorzystać z wtyczki NextGen Gallery, która bardziej kompleksowo załatwi wstawianie obrazków. Opis instalacji i spolszczenie tutaj.
TODO: ikona wpisu
Napisz komentarz