Przypuśćmy, że posiadamy szablon w którym jest ustawiony graficzny nagłówek (plik JPEG) na stronie CMS. I tutaj chcemy, aby dla każdej strony CMS był on inny. W ten sposób prezentowana treść jest spójna i bardziej atrakcyjna wizualnie dla odwiedzających.
Czasami twórcy szablonów udostępniają możliwość podmiany takiego obrazka dla danej podstrony. W przypadku gdy nie ma takiego rozwiązania w Twoim sklepie – poniżej prosty sposób jak to wykonać samodzielnie.
Zawartość artykułu
Materiały graficzne – przygotowanie, odpowiednie nazwy plików i lokalizacja.
Na początek przygotujmy pliki do podmiany. Dobrze jakby miały one identyczne rozmiary jak domyślny obrazek. Niech też są w tym samym formacie – jeśli to JPEG (rozszerzenie .jpeg) to niech takie pozostaną. Tak samo w przypadku PNG.
Nazwy tych plików niech będą analogiczne do ID podstrony na której mają być wyświetlane. Oto przykład:
1) strona Regulamin -> link: {adres Twojego sklepu}/content/3-regulamin -> nazwa pliku 3.jpg
2) strona Dostawa -> link: {adres Twojego sklepu}/content/1-dostawa -> nazwa pliku 1.jpg
3) strona O nas -> link: {adres Twojego sklepu}/content/2-o-nas -> nazwa pliku 2.jpg
itd.
Oczywiście linki są przykładowe. Tak samo nazwy podstron. Chodzi jedynie o powiązanie ID strony z nazwą pliku JPEG/PNG. Liczba tych podstron też może być większa.
Jeśli dana podstrona CMS ma nie mieć zdjęcia (ma tam być wyświetlany domyślny obrazek). To po prostu nie trzeba dodawać takiego zdjęcia np. 7.jpg
Następnie te zdjęcia umieszczamy w osobnym folderze. Np. tworzymy folder:
{adres Twojego sklepu}/img/naglowki-cms/
Adres tego folderu jest dowolny.
Teraz należy wykonać odpowiednie zmiany w kodzie.
Zmiany w kodzie szablonu.
Otwórz plik:
themes/{TWÓJ SZABLON}/templates/cms/page.tpl
Znajdź blok:
{block name='page_content_container'}
Następnie przed zamknięciem tego bloku – ponad fragmentem:
{/block}
Umieść poniższy kod:
{assign var="myfile" value="img/naglowki-cms/{$cms.id}.jpg"}
{if file_exists($myfile)}
<style type="text/css">
#wrapper .breadcrumb {
background-image: url(/{$myfile});
}
</style>
{/if}
Tutaj musimy odnaleźć regułę CSS która odpowiada za wyświetlanie zdjęcia w nagłówku. W naszym przypadku jest to:
#wrapper .breadcrumb {}
U Ciebie może być ona inna. Należy to spradzić przez „Zbadaj element” w przeglądarce WWW.
Jeśli prezentowanym plikiem ma być PNG – odpowiednio zmodyfikuj powyższy kod w szablonie.
Metoda działania i dodawanie nowych obrazków.
Jak widzimy – jeśli skrypt znajdzie zdjecie powiązane z ID danej kategorii – to zostanie ono podmienione na to z utworzonego folderu. Jeśli danego zdjęcia nie ma w tym folderze – wyświetlony zostanie domyślny obrazek opisany przez podstawową regułę CSS w szablonie twojego sklepu.
Dodanie nowego zdjęcia dla nowej podstrony CMS to po prostu wgranie przez FTP nowego obrazka np. 8.jpg itd.
Aby zmiany byly wczytane musisz usunąć pamieć podręczną w dziale
Zaawansowane -> Wydajność
albo wykasować zawartość folderów:
/cache /var/cache
grafika: wallpaperflare.com
