PDA

Zobacz pełną wersję : Content Tabs w Joomla 5 i Gantry 5 jak zrobić Autoplay



emesnet
21-05-2024, 16:28
Witam.
Posiadam jak w tytule Joomla 5 i Gantry 5 które posiada Content Tabs, chciał bym aby zakładki same się przerzucały po ustalonym czasie, czy ktoś jest w stanie mi pomóc z tym lub podpowiedzieć jakie rozszerzenie darmowe posiada autoplay w tabs?

Dziękuję

pablop76
22-05-2024, 10:30
Można się pokusić o dodanie takiej funkcji do cząstki kopiując ją do custom particles (https://docs.gantry.org/gantry5/advanced/creating-a-new-particle) i dodając javascript (https://docs.gantry.org/gantry5/advanced/css-js-twig). Najlepsze cząstki ma joomled (https://joomlead.com/g5/docs/tabs-particle-documentation/) ale nie wiem czy taby mają taką funkcję. Bo i po co!?

pablop76
26-05-2024, 10:42
Cząstka mycontenttabs (https://github.com/pablop76/mycontenttabs) z auto switch.

emesnet
26-05-2024, 11:08
Bardzo Ci dziękuję, tyle szukałem i nie znalazłem, działa. :up:

pablop76
26-05-2024, 11:52
Bo dopiero dzisiaj wstawiłem :D

emesnet
02-06-2024, 14:43
Skoro o tabach to możesz mi podpowiedzieć odnośnie TEGO (http://demo.inspiretheme.com/particles/index.php/particles/tabs) chodzi o to że on mi się nie wyświetla prawidłowo a sprawdzałem kilkanaście razy czy wszystko jest ok jak w opisie TUTAJ (https://www.inspiretheme.com/documentation/gantry5-particles/tabs)

10235

Posiadam najnowszą Joomlę 5 (5.1.1) Gantry 5 (v5.5.19 / g5_helium) Dodane pliki particles oraz scss w pliku custom.scss także dodane

10236
w szablonie w Particles też się wyświetla
10237
UIkit oczywiście też jest a jednak mi nie działa to prawidłowo.
A chodzi mi o funkcję wyświetlania top, bottom, left, right.

Dziękuję za pomoc

pablop76
02-06-2024, 17:26
Załączniki nie działają.

emesnet
02-06-2024, 18:14
Szkoda że edytować nie można posta a dlaczego nie wyświetla fotek nie mam pojęcia, po napisaniu go wszystko było ok bo sprawdzałem, no trudno.
Skoro o tabach to możesz mi podpowiedzieć odnośnie TEGO (http://demo.inspiretheme.com/particles/index.php/particles/tabs) chodzi o to że on mi się nie wyświetla prawidłowo a sprawdzałem kilkanaście razy czy wszystko jest ok jak w opisie TUTAJ (https://www.inspiretheme.com/documentation/gantry5-particles/tabs)

10240

Posiadam najnowszą Joomlę 5 (5.1.1) Gantry 5 (v5.5.19 / g5_helium) Dodane pliki particles oraz scss w pliku custom.scss także dodane

10238
w szablonie w Particles też się wyświetla
10239
UIkit oczywiście też jest a jednak mi nie działa to prawidłowo.
A chodzi mi o funkcję wyświetlania top, bottom, left, right.

pablop76
02-06-2024, 19:14
Ciężko powiedzieć. Przydałby się dostęp do zaplecza. Ale swoja drogą trochę starego UIkit używa inspiretheme. Ostatnia aktualizacja była w tym miesiącu. Chyba, że to są pliki z cdn. Ja osobiście wolę cząstki od joomlead (https://joomlead.com/gantry-5-particles/). Płacisz raz i masz dożywotnie aktualizacje.

emesnet
02-06-2024, 19:25
Więc zostało szukać czegoś innego lub poczekać, a ten z auto co mi podesłałeś to jest możliwość by dodać taką opcję? Zapewne tak ale trzeba wiedzieć co i jak bo ja sprawdzałem zawartość plików i jest coś w nim odnośnie ustawień ale kompletnie nie wiem jak się zabrać za to.


{% set tabsnavcontainer %}
{% if (particle.layout|default('top') == 'left') or (particle.layout|default('top') == 'right') %}
<div class="uk-width-medium-1-{{ particle.tabswidth|default('2')|e }}{% if particle.layout|default('top') == 'right' %} uk-push-{{ (particle.tabswidth|default('2') - 1)|e }}-{{ particle.tabswidth|default('2')|e }}{% endif %}">
{% endif %}
<ul class="uk-tab{% if particle.layout|default('top') == 'top' %} uk-tab-top{% endif %}{% if particle.layout|default('top') == 'bottom' %} uk-tab-bottom{% endif %}{% if particle.layout|default('top') == 'left' %} uk-tab-left{% endif %}{% if particle.layout|default('top') == 'right' %} uk-tab-right{% endif %}{% if (particle.justify|default('no') == 'yes') and ((particle.layout|default('top') != 'left') and (particle.layout|default('top') != 'right')) %} uk-tab-grid{% endif %}" data-uk-tab="{connect:'#tabs-content_{{ tabsid }}', animation: '{{ particle.animation|default('none')|e }}'}">
{{ tabsnav }}
</ul>
{% if (particle.layout|default('top') == 'left') or (particle.layout|default('top') == 'right') %}
</div>
{% endif %}
{% endset %}

{% set tabscontentcontainer %}
{% if (particle.layout|default('top') == 'left') or (particle.layout|default('top') == 'right') %}
<div class="uk-width-medium-{{ (particle.tabswidth|default('2') - 1)|e }}-{{ particle.tabswidth|default('2')|e }}{% if particle.layout|default('top') == 'right' %} uk-pull-1-{{ particle.tabswidth|default('2')|e }}{% endif %}">
{% endif %}
<ul id="tabs-content_{{ tabsid }}" class="tabs-content uk-switcher uk-margin {{ particle.layout|e }}">
{{ tabscontent }}
</ul>
{% if (particle.layout|default('top') == 'left') or (particle.layout|default('top') == 'right') %}
</div>
{% endif %}
{% endset %}

pablop76
03-06-2024, 07:15
Cząstka (http://demo.inspiretheme.com/particles/index.php/particles/tabs) działa ale musisz skopiować folder uikit z atomu uikit (https://www.inspiretheme.com/documentation/gantry5-particles/uikit-for-gantry5) do folderu custom swojego szablonu Gantry 5. Są w tym folderze dwa foldery css i js, w których są pliki js i css uikita. Jest to w punkcie 4. instrukcji (https://www.inspiretheme.com/documentation/gantry5-particles/uikit-for-gantry5) instalacji.

emesnet
03-06-2024, 09:25
I właśnie tam mam katalog uikit a w nim katalogi css oraz js, pliki uikit.yaml oraz uikit.html.twig w particles i niestety nie działa, pojęcia nie mam co jest nie tak.

pablop76
03-06-2024, 09:56
Sprawdziłem na stronie testowej i wszystko jest ok.
1. Do folderu szablonu gantry 5 np. templates/g5_helium/custom wrzucasz folder uikit, który zawiera foldery js i css z plikami.
2. Do folderu templates/g5_helium/custom/particles wrzucasz uikit.html.twig, uikit.yaml, tabs.html.twig, tabs.yaml.
3. Do folderu templates/g5_helium/custom/scss wrzucasz _tabs.scss.
4. Jeżeli nie ma to tworzysz w folderze templates/g5_helium/custom folder scss a w nim plik custom.scss i wrzucasz do niego importy


@import "dependencies";
@import 'tabs';

5. Uruchamiasz atom uikit w bazowym zarysie (Base Outline) w zakładce Page Settings przeciągając ją z sekcji Atoms na białe pole poniżej.
6. Dodajesz i konfigurujesz cząstkę Tabs w zarysie tematu (Theme Outline)

Pamiętaj, że kompilacja automatyczna css odbywa się wyłącznie w trybie development (https://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet), jeżeli ustawiłeś tryb production musisz ręcznie rekompilować css w zakładce styles za pomocą przycisku recompile CSS.
Jeżeli włączyłeś cache joomla również musisz wyczyścić cache w zakładce Pulpit kafelek Pamięć podręczna Usuń wszystko.

emesnet
03-06-2024, 10:54
Mam wszystko dokładnie tak jak piszesz, już x razy sprawdzałem wszystko i jest ok, z samej ciekawości zainstaluję nową Joomlę i sprawdzę bo aż wierzyć mi się nie chce.

emesnet
03-06-2024, 18:18
Człowiek uczy się całe życie, aż wstyd się przyznać :D.
Tab który jest już w Gantry
10241
a cząstka dodana osobno
10242
różnią się tym że w standardzie tytułem zakładki jest jego nazwa czy jak to nazwać a okno edycji zawiera tylko treść taba, a w nowym tabie wpisuje się nazwę w otwartym oknie oraz treść a ja wpisywałem tylko treść bez tytułu zakładki.
Cóż, myślę że jestem cierpliwy i znalazłem śmieszny mój problem.
Dziękuję za pomoc pablop76