[PHP][HTML5] Jak zaimplementować galerię responsywnych obrazków w WordPress?
This post is 11 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.
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.
Section 1Implementacja 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.
Section 2Czym 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.
Section 3Podsumowanie
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.
About the author
