Budowa szablonu opierać się będzie na komponencie Slideshow a dokładnie na Slideshow z content overlays. Natomiast przyciski obsłuży komponent button. Zatem kopiujemy nasz komponent i wklejamy do pliku szablonu naszej cząstki hearobanner.html.twig
{% extends '@nucleus/partials/particle.html.twig' %}
{% block javascript %}
<script src="/{{ url('gantry-theme://js/jlcomponents/slideshow.min.js') }}"></script>
{% endblock %}
{% block particle %}
<div class="jl-position-relative" jl-slideshow="ratio: 7:3">
<div class="jl-slideshow-items">
<div>
<img src="/{{ url(particle.image) }}" alt="" jl-cover>
<div class="jl-position-center jl-position-small jl-text-center">
<h1 class="jl-margin-remove">{{ particle.title }}</h1>
<p class="jl-margin-remove">{{ particle.description }}</p>
</div>
</div>
</div>
</div>
{% endblock %}
Począwszy od wersji 2.0.2 (18 grudnia 2018 r.) deweloperzy Joomlead zmienili prefiks Uikit 3 uk- na niestandardowy prefiks jl-, aby uniknąć konfliktów.
Użycie niestandardowego prefiksu pozwala na używanie wielu wersji UIkit na tej samej stronie, co oznacza, że jeśli używasz Particles lub Atom opartych na Uikit 2, możesz używać cząstek/atomów z Uikit 3 na tych samych stronach/postach/układach bez problemów.
Użycie: Jeśli użyjesz niestandardowego kodu z dokumentacji Uikit, takiego jak przycisk , domyślny kod będzie wyglądał następująco:
<a class="uk-button uk-button-default" href=""></a>
Możesz zamienić prefiks uk- na jl- w następujący sposób:
<a class="jl-button jl-button-default" href=""></a>
Na początek do naszej cząstki dodaliśmy ładowanie kodu javascript dla komponentu slideshow. Dzięki takiemu podejściu UIKit nie ładuje kodu js, którego aktualnie nie używa więc jeżeli komponent potrzebuje javascript to musimy go dodać. Usunęliśmy slajdy ponieważ nie jest to typowy slideshow. Ale bardzo przydatne są dla nas jego cechy takie jak możliwość ustawienia ratio min-height (dla zachowania wysokości na telefonach) tekstu w centrum obrazka i innych przydatnych cech.
Pętla dla dynamicznie wprowadzanych elementów wygląda następująco
{% for item in particle.button_items %}
<button class="jl-button jl-button-default">
<a href="/{{item.buttonlink}}" title="{{item.button_link_title}}" aria-label="{{item.button_aria_label}}" target="{{item.buttontarget}}">
{{item.buttontext}}
</a>
</button>
{% endfor %}
Kod po wprowadzeniu zmian i dodaniu przycisków
{% extends '@nucleus/partials/particle.html.twig' %}
{% block javascript %}
<script src="/{{ url('gantry-theme://js/jlcomponents/slideshow.min.js') }}"></script>
{% if particle.slideshow_parallax or particle.overlay_transition == 'parallax' %}
<script src="/{{ url('gantry-theme://js/jlcomponents/slideshow-parallax.min.js') }}"></script>
{% endif %}
{% endblock %}
{% block particle %}
<div class="jl-position-relative" jl-slideshow="ratio: 7:3; min-height: 600;">
<div class="jl-slideshow-items">
<div>
<img src="/{{ url(particle.image) }}" alt="" jl-cover>
<div class="jl-position-cover jl-flex jl-flex-center jl-flex-middle jl-container jl-section jl-text-left">
<div class="jl-overlay jl-overlay-primary jl-width-2xlarge">
<h1 class="jl-margin-remove">{{ particle.title|raw }}</h1>
<p class="jl-margin-remove">{{ particle.description|raw }}</p>
<p jl-margin>
{% for item in particle.button_items %}
<button class="jl-button jl-button-default">
<a href="/{{item.buttonlink|e}}"
title="{{item.button_link_title|e}}"
aria-label="{{item.button_aria_label|e}}"
target="{{item.buttontarget|e}}">
{{item.buttontext|raw}}
</a>
</button>
{% endfor %}
</p>
</div>
</div>
</div>
</div>
{% endblock %}
Użyłem tutaj dwóch ważnych z punktu widzenia bezpieczeństwa filtrów twig.
Oto efekt naszej pracy. Prosty Hero Banner. Zachęcam do dodania konfiguracji np. ratio, min-height
