Jetpack - Kafelkowa mozaika …bez Image CDN z wp.com

Jetpack jest wtyczką do Wordpress’a, którą każdy powinien mieć zainstalowaną i nie trzeba nad tym dużo polemizować. Wprowadza ona sporo udogodnień do naszej strony. Te udogodnienia mogą z czasem się zmienić (szczególnie jeżeli używamy darmowej wersji).

Kilka lat wstecz, twórcy Jetpack wprowadzili ładnie wyglądające galerie przy pomocy opcji zwanej Photon. Umożliwiała ona wyświetlanie galerii w dodatkowych stylach/typach (w tym ładnie wyglądającej kafelkowej mozaice) bez konieczności zbędnego obciążania naszej strony. Wszystko bazowało jednak na CDN (Content Delivery Network) serwowanej z serwerów wp.com.

Jetpack Tiled Galleries

Otóż w momencie włączenia elementu Photon, wszystkie nasze obrazy na stronie były wysyłane na serwer Wordpress i serwowane z adresu wp.com wewnątrz naszej stronie. O ile ktoś nie używa jeszcze CDN to nie sprawiało to większego problemu, a dodatkowo zauważył szybsze ładowanie się zdjęć. Jednakże, w moim przypadku używam CloudFlare jako CDN, przez co strona ładuje się znacznie szybciej, a dodatkowo wszystko serwowane jest z oryginalnego adresu internetowego strony (a nie z adresu wp.com wewnątrz mojej strony). Dzięki temu mam większą kontrolę nad pamięcią podręczną w CDN w przypadku gdy chcę ją opróżnić czy odświeżyć.

W przypadku Photon i CDN (tzw. Image CDN), w momencie, gdy wgraliśmy nasze zdjęcie i wstawiliśmy na stronie, wszystko działało jak należy do czasu, gdy chcielibyśmy je odświeżyć lub podmienić. Podmiana bez zmiany nazwy pliku oraz bez edycji wpisu jest jednym z najprostszych i bardziej efektywnych (ze względu na czas) metod, jednakże wiąże się z koniecznością wygenerowania nowych miniatur do naszego zdjęcia. Nie jest to trudne w przypadku plików serwowanych bezpośrednio z naszej strony (Regenerate Thumbnails). W przypadku używania Photon wraz z ichnym CDN nie mamy kontroli nad wygenerowanymi i serwowanymi miniaturkami z domeny wp.com. Przez co każda zmiana obrazu polegać musi na wgraniu go pod inną nazwą pliku oraz jego podmienienie poprzez edycję odpowiedniego wpisu.

Powyższy zabieg jest nieco uciążliwy, szczególnie gdy chcesz podmienić obrazy rozrzucone po kilkunasty wpisach.

W przeszłości dało się używać Photon bez Image CDN, jednakże ta opcja została wyłączona (ukryta z ustawień wtyczki). Mimo tego, strony, które włączyły Photon oraz nowe typy galerii bez serwowania obrazów z serwerów wp.com, nadal mogły używać tego rozwiązania.

Niestety, nowe strony (nowo postawione strony) nie mają możliwości wybrania tego rozwiązania w prosty sposób, mimo że rozwiązanie cały czas działa.

W momencie, gdy jednak chcemy używać nowych typów galerii dostępnych we wtyczce Jetpack, możemy wesprzeć się rozwiązaniami od innych twórców - czyli po prostu zainstalować dodatkową wtyczkę.

Jednakże, jeżeli już używamy Jetpack, to dlaczego nie możemy użyć tego, co jest we wtyczkę wbudowane?

Otóż jest na to rozwiązanie.

Nim zaczniemy, upewnijmy się że Jetpack i Image CDN jest wyłączony (Jetpack > Ustawienia). Korzystając z opcji szukaj (lupa w prawym górnym rogu) wpisujemy słowo CDN i upewniamy się, że poniższa opcja jest wyłączona.

JetPack perfromance and speed site accelerator

Oraz mamy wyłączoną opcję Carousel gallery tak jak poniżej. Korzystając z opcji szukaj (lupa w prawym górnym rogu) wpisujemy słowo carousel i upewniamy się, że poniższa opcja jest wyłączona.

JetPack Media Carusel Gallery

We wcześniejszej wersji tego artykułu opisałem jak wszystko zrobić przy pomocy phpMyAdmin i bazy SQL. W związku z licznymi aktualizacjami wtyczki oraz zmianami, jakie zaszły w Wordpress 5.0 postanowiłem zmienić dalszą część na bardziej przyjazną mniej wprawionemu użytkownikowi WordPress.

W związku z wprowadzeniem przez Wordpress 5.0 edytora bazującego na blokach (Gutenberg), sprawa z JetPack’iem uległa lekkiej komplikacji.

Jeżeli chcemy użyć galerii w postaci kafelkowej mozaiki oferowanej przez Jetpack/Photo bez serwowania zdjęć z serwerów wp.com musimy zainstalować dodatkową (oficjalną) wtyczkę przywracającą tymczasowo klasyczny edytor wpisów. Tylko w klasycznym edytorze będziemy mogli aktywować odpowiednią galerię, gdyż w edytorze blokowym nie będzie ona dostępna.

Aby to zrobić, przechodzimy do Wtyczki > Dodaj nową i wyszukujemy wtyczkę zwaną Classic Editor (Klasyczny Edytor), następnie instalujemy i aktywujemy.

klasyczny edytor wordpress classic editor

Następnie wracamy do Jetpack‘a.

Z lewej strony wybieramy Jetpack > Ustawienia.

W pasku adresu naszej stronie, w przeglądarce internetowej powinniśmy widzieć (w zależności od przeglądarki) nasz adres w postaci:

https://{nasza_domena}
/wp-admin/admin.php?page=jetpack#/settings

W tym momencie musimy podmienić page=jetpack#/settings na page=jetpack_modules aby przejść do ukrytych opcji zaawansowanych wtyczki Jetpack.

JetPack modules

Na tym etapie musimy włączyć dwa moduły: Kafelkowe galerie oraz Karuzela.

I to by było na tyle jeżeli chodzi o wtyczkę Jetpack.

Następnie przechodzimy do naszego wpisu (lub tworzymy nowy) gdzie mamy naszą galerię i ją edytujemy (lub wstawiamy nową za pomocą przycisku Dodaj medium w lewym górnym rogu edytora). Dzięki powyższemu zabiegowi powinniśmy zobaczyć dodatkowe opcje w typach galerii, które działają bez konieczności serwowania naszych zdjęć z wp.com.

Edytuj galerie Typ Kafelkowa mozaika

Po dodaniu galerii, jeżeli nie chcemy, możemy wyłączyć Klasyczny edytor i dać szanse nowemu edytorowi blokowemu Gutenberg, który osobiście aktywnie testuję i uważam, że ma on pewien sens w rzeczywistości ułatwia tworzenie nowych wpisów.

Pamiętajmy jednak, że w galerie dodane przez edytor blokowy nie będą miały opcji dostępnych tak jak na powyższym zrzucie ekranowym (Ustawienia galerii) a dedykowana galeria ze wtyczki Jetpack nie będzie dostępna dopóki nie włączymy serwowania naszych zdjęć z wp.com - czego właśnie nie chcemy.


Rozszerzając co nieco powyższy wpis. Jak zapewne zauważycie, galerie wstawione na stronie w postaci mozaiki, na co niektórych motywach są co nieco ograniczone co do szerokości. Jeżeli nasz motyw jest pełno-ekranowy to galeria może być domyślnie ograniczona do 500px szerokości.

500px jest to zabieg celowy a dostosowanie jego na naszego motywu (o ile motyw nie jest do tego dostosowany) wiąże się z zabiegiem modyfikacji opcji odpowiadającej za wyświetlanie tzw. Custom Content Width (szerokość niestandardowej zawartości strony).

Bez zagłębiania się w szczegóły, gdyż nie każdy chce edytować motyw strony odsyłam do poniższej strony developer.jetpack.com/hooks/tiled_gallery_content_width

Powyższą opcję możemy ustawić w nieco łatwiejszy sposób przy pomocy prostej wtyczki o tej samej nazwie (Custom Content Width)

Mimo że wtyczka nie była aktualizowana od przeszło 4 lat, to nadal jest w pełni funkcjonalna i polecana jest przez samych twórców dodatku Jetpack.

Po jej zainstalowaniu przechodzimy ustawień mediów na naszej stronie (Ustawienia > Media) i wprowadzamy wartość w polu Custom Content Width.

O ile nasz motyw nie ma ustawionej tej wartości (tak jak mój = 1100px, o którym wtyczka informuje), wówczas ustawiamy ją na wartość tj..x (zalecane minimum).

Custom Content Width

Mam nadzieję, że pomogłem. Jeżeli masz problem, to daj znać.

Pozdrawiam.

_How to activate beautiful galleries through Jetpack (Photon) without activating Image CDN. _Tiled Gallery Carousel Without JetPack Image CDN.

Dołącz do dyskusji