Przyśpieszenie wczytywania UniteGallery na stronie CMS

Jak osadzić taką galerię na stronie opisywaliśmy w tym artykule:

https://pskrk.com/presta-shop-osadzenie-galerii-unitegallery-na-stronie-cms/

Przedstawiona tam instalacja co prawda działa jak należy, jednak zdjecia są wczytywane w pełnej rozdzielczości. Powoduje to dłuuuugie wczytywanie strony z galerią.

Jest jednak łatwy sposób jak diametralnie przyśpieszyć taką galerię. Wdrożymy automatyczny system tworzenia miniatur. Poniżej jak to zrobić.

1. Wgranie skryptu PHP

Do katalogu głównego sklepu wgrywamy plik thmb.php. Można go pobrać tutaj: thmb.php Jest on spakowany ZIPem. Rozpakuj go przed wgraniem na serwer.

2. Utworzenie folderu do przechowywania miniatur

Tworzymy w katalogu głównym sklepu (o ile już go nie ma) katalog o nazwie:

tmp

3. Modyfikujemy kod z galerią.

Przedstawiony w w/w artykule kod nieco zmodyfikujemy.

Zamieniamy tam zaprezentowany fragment:

{foreach from=$unigallery item=itemimage}
<img alt="Image 1 Title" src="{$itemimage|replace:$skippath:''}"
            data-image="{$itemimage|replace:$skippath:''}"
            data-description="{$cms->meta_title}" />
{/foreach}

Na:

{foreach from=$unigallery item=itemimage}
    <img alt="Image 1 Title" src="/thmb.php?image={$itemimage|replace:$skippath:''}&width=180&height=150&cropratio=180:150"
                data-image="{$itemimage|replace:$skippath:''}"
                data-description="{$cms->meta_title}" />
    {/foreach}

Chodzi dokładnie o atrybut src, ktory w tym momencie tworzy „w locie” miniaturkę na podstawie oryginalnego zdjęcia.

4. Obrazek zastępczy „brak obrazka”

Wypada też wgrać na serwer obrazek, który będzię się pojawiać w momencie jak któryś z obrazków będzie niedostępny. Wygląda on w ten sposób:

Link do obrazka: https://pskrk.com/wp-content/uploads/2018/09/noimage.jpg

Wgraj go do folderu:

img

Ważne, aby był pod nazwą: noimage.jpg (taka jest zdeklarowana w w/w pliku PHP).

Oczywiście możesz wgrać inny obrazek tego typu, to tylko przykład.

Gotowe!