Press "Enter" to skip to content

Przyśpieszenie wczytywania UniteGallery na stronie CMS

Admin 1

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!

 

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.

Zobacz także !
Jak przenieść daty importu klientów ze starego sklepu PrestaShop na nowy…