[PHP][HTML5] Jak zaimplementować galerię responsywnych obrazków w WordPress?
Dzisiejszy wpis powstał na życzenie jednego z czytelników bloga, który w komentarzach do poprzedniego wpisu dotyczącego responsywnych obrazków na stronach internetowych poprosił o rozwiązanie dotyczące implementacji galerii w WordPress.
Uznałem, że jest to ciekawe pytanie i dlatego postanowiłem pomóc czytelnikowi i Tobie prezentując rozwiązanie, które pozwala na utworzenie galerii responsywnych obrazków w WordPress.
Implementacja galerii w WordPress
Tworzenie galerii obrazków w WordPress różni się od utworzenia widoku pojedynczego obrazka w szablonie WordPress. Musimy tutaj wykorzystać sporą ilość kodu PHP, aby nadpisać domyślny sposób generowania galerii. Nasz kod musimy umieścić w pliku functions.php:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | function custom_post_gallery($output, $attr) { global $post; $output = ''; // Tworzymy nowe zmienne do wykorzystania w dalszej części kodu extract(shortcode_atts(array( 'order' => 'ASC', 'orderby' => 'menu_order ID', 'id' => $post->ID, 'itemtag' => 'dl', 'icontag' => 'dt', 'captiontag' => 'dd', 'columns' => 3, 'size' => 'thumbnail', 'include' => '', 'exclude' => '' ), $attr)); $id = intval($id); if (!empty($include)) { $include = preg_replace('/[^0-9,]+/', '', $include); $_attachments = get_posts(array( 'include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby )); $attachments = array(); foreach ($_attachments as $key => $val) { $attachments[$val->ID] = $_attachments[$key]; } } if (empty($attachments)) { return $output; } // Generujemy kod HTML galerii $output .= '<div class="post-gallery">'; $output .= '<div class="post-gallery__wrapper">'; // W pętli generujemy kod dla każdego obrazka foreach ($attachments as $id => $attachment) { // Pobieramy informacje dotyczące obrazka $imgDesc = wp_prepare_attachment_for_js($id); $output .= '<div class="post-gallery__wrapper__thumb">'; $output .= '<img src="' . wp_get_attachment_image_src($id, 'post-thumb')[0] . '" '; $output .= 'class="post-gallery__wrapper__thumb__image" '; $output .= 'data-full-img="' . wp_get_attachment_image_src($id, 'post-main-x4')[0] . '" '; $output .= 'sizes="' . '(-webkit-min-device-pixel-ratio: 3) 1040px, ' . '(min--moz-device-pixel-ratio: 3) 1040px, ' . '(-o-min-device-pixel-ratio: 3/1) 1040px, ' . '(min-device-pixel-ratio: 3) 1040px, ' . '(min-resolution: 288dpi) 1040px, ' . '(min-resolution: 3dppx) 1040px, ' . '(-webkit-min-device-pixel-ratio: 2) 720px, ' . '(min--moz-device-pixel-ratio: 2) 720px, ' . '(-o-min-device-pixel-ratio: 2/1) 720px, ' . '(min-device-pixel-ratio: 2) 720px, ' . '(min-resolution: 192dpi) 720px, ' . '(min-resolution: 2dppx) 720px, ' . '360px" '; $output .= 'srcset="' . wp_get_attachment_image_src($id, 'post-main-x1')[0] . ' 360w,' . wp_get_attachment_image_src($id, 'post-main-x2')[0] . ' 720w,' . wp_get_attachment_image_src($id, 'post-main-x3')[0] . ' 1040w" '; $output .= 'alt="' . $imgDesc['alt'] . '">'; $output .= '</div>'; } $output .= '</div>'; $output .= '</div>'; return $output; } add_filter('post_gallery', 'custom_post_gallery', 10, 2); |
Powyższy kod generuje galerię obrazków, których jakość i wielkość dostosowuje się do gęstości pikseli na ekranie urządzenia. Tym sposobem możemy osiągnąć dobrą jakość obrazków zarówno na ekranach standardowych, np. standardowego monitora PC, jak i na ekranach typu Retina (patrz iPhone, iPad). Wykrywanie gęstości pikseli uzyskano przy pomocy sprawdzania wartości min-device-pixel-ratio
.
Czym jest gęstość pikseli na ekranie?
Jeśli nie do końca wiesz o co chodzi z gęstością pikseli na ekranie to już to wyjaśniam.
Standardowy ekran o rozdzielczości 1920 pikseli na 1080 pikseli ma też faktyczną rozdzielczość o tych samych wymiarach, tj. 1920 pikseli na 1080 pikseli. W przypadku ekranów typu Retina sytuacja wygląda nieco inaczej. Ze względu na większe upakowanie pikseli na ekranie faktyczna rozdzielczość jest mniejsza w przypadku ekranów o natywnej rozdzielczości 1920 pikseli na 1080 pikseli faktyczna rozdzielczość będzie wynosiła 960 pikseli na 540 pikseli.
Dzięki temu tekst na takim ekranie wydaje się być bardzo ostry, nieposzarpany a obrazki bardziej szczegółowe. Jednakże trzeba pamiętać, że w takim przypadku aby wyświetlić ostry obrazek o wymiarach 300 pikseli na 200 pikseli to faktycznie trzeba załadować obrazek o wymiarach 600 pikseli na 400 pikseli. W innym przypadku, obrazek może się okazać nieostry na takim ekranie.
Podsumowanie
Mam nadzieję, że udało mi się w sposób wyczerpujący opisać temat tworzenia galerii obrazków w WordPress i będziesz w stanie zaimplementować galerię na swojej stronie internetowej opartej o WordPress.