chevron-left chevron-right

[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.