WBCE CMS Forum

chadmin8

Member

Seiten/Abschnitte in Abhängigkeit von viewport anzeigen

Guten Abend zusammen

Ich bin an einer grösseren Migration und vielleicht hat ja jemand eine Lösung/Ansatz bevor ich
alles hänschisch machen muss:

- Alle @Media styles im CSS möchte ich ergänzen mit neuen Mediastyles
- Nun möchte ich zum Beispiel eine Page oder Section nicht zeigen, wenn dies in Media definiert ist.

Wenn zum Beispiel ein @media für Mobile zb 5,6,X definiert habe in Landscape/Portrait,
möchte ich in dessen  Abhängigkeit,  eine Page oder Section (Sectionpicker)  ausschalten können.
display:none;

Ebenso suche ich einen Ansatz um Start/Ende von Pages in Abhängigkeit der @media definition zu schalten.

Danke für Ideen und einen schönen Gruss aus der Schweiz
Urs Etter

florian

Administrator

Re: Seiten/Abschnitte in Abhängigkeit von viewport anzeigen

Ich verstehe nicht ganz genau, was Du meinst...
Wenn Du Links zu Seiten in der Navigation abhängig von der Displaygröße anzeigen/ausblenden willst, fällt mir als Ansatz nur ein, die Page-ID im show_menu2-Aufruf mit zu übergeben (siehe http://sm2.wbce-cms.org/media/README.de.txt), also

...
 $aItemOpen      = <li class="[class] page[page_id]">[a][menu_title]</a>',
...

und dann im Stylesheet

...
@media screen and (max-width:400px) {
  .page23, .page42 {display:none;}
}
...

Ein--/Ausblenden von Abschnitten abhängig von der Displaygröße ist nicht so ohne weiteres möglich. Für ganze Blöcke ist klar, da braucht im Template nur beim umgebenden div eine entsprechende Klasse gesetzt zu werden.

<div class="no-mobile">
<?php page_content(2); ?>
</div>
...

<style type="text/css"> <!-- bzw. im Stylesheet des Templates -->
@media screen and (max-width:400px) {
  .no-mobile {display:none;}
}
</style>

Aber für einzelne Abschnitte? Schwierig. Am ehesten noch in den Abschnittseinstellungen (abhängig vom Inhaltstyp).
Oder mittels eines Droplets, das dann vor/nach dem betr. Abschnitt aufgerufen wird, und einen div mit der entsprechenden Klassendefinition öffnet und schließt.
Wenn es immer nur eine bestimmte Art von Abschnitt betrifft, könnte man ab 1.4 eventuell auch was mit Outputfiltern machen, das setzt aber voraus, dass mittels Regular Expressions die betr. Abschnitte identifiziert werden können. Darüber könnte dann eine CSS-Klasse ergänzt werden, die dann dafür sorgt, dass die jeweiligen Inhalte bei einer bestimmten Displaygröße (nicht) angezeigt werden.

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

florian

Administrator

Re: Seiten/Abschnitte in Abhängigkeit von viewport anzeigen

Beiträge vom Ursprungsthread abgetrennt

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

chadmin8

Member

Re: Seiten/Abschnitte in Abhängigkeit von viewport anzeigen

Hallo Florian

Danke für Deine Antwort.

an meinem kleinen Beispiel (https://shoptotal.ch/cms/wb/wbce/pages/home.php) sieht man vielleicht besser was ich meine:
Der Footer für Dektops ist in HTML und den kann ich gut steuern mit <div>....</iv> .
Das Accordion sollte jedoch nur in Mobileklassen erscheinen.  (ist mit Plugin erstellt) - genau diesen Section/Abschnitt möchte ich jedoch in normalen Pages abschalten.

Gruss Urs Etter

florian

Administrator

Re: Seiten/Abschnitte in Abhängigkeit von viewport anzeigen

Dafür gibt es diverse Möglichkeiten.

1. Wie oben beschrieben in den Moduleinstellungen, also Kopfzeile  <div class="hide-on-desktop"> und in Fußzeile </div> einfügen (hide-on-desktop muss natürlich im Templatestylesheet definiert sein.

2. Wenn Du Accordion grundsätzlich nur in der Mobilansicht verwendest: die Klasse wb-accordion für Desktops per Mediaquery unsichtbar setzen.

3. Wenn Accordion bisweilen auch auf Desktops erscheinen soll: Accordion setzt von Haus aus dankenswerterweise einen Div imit der Section-ID, Du brauchst also nur zu schauen, welche ID die jeweils nicht anzuzeigenden Accordion-Abschnitte haben, und definierst dann im Templatestylesheet die entsprechenden Klassen, also z.B. .sid-26 für einen Accordion-Abschnitt in dem Abschnitt mit der ID 26 usw.

Nebenbei bemerkt: Du lädst auf der Seite sage und schreibe 3x jQuery. Erstaunlich, dass das Accordion überhaupt funktioniert...

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

chadmin8

Member

Re: Seiten/Abschnitte in Abhängigkeit von viewport anzeigen

Hallo Florian

Danke für Deine Antwort, da werde ich mal dahinter gehen. (JQuery ! muss ich mal "GoogleRenderSpielen" , danke für Deinen Hinweis)
PS: zum Test habe ich den Abschnitt Accordion mit "Sectionpicker" geladen, das ist natürlich sowieso nicht normal :-(  )   ...*

Frage:
wie siehts zeitlich mit einem Update für Outputfilter aus?
ist geplant, die VEGA Slider (ist ja irgenwo drin) zu integrieren?

Urs Etter

*da fehlt mir eben eine Funktion um Abschnitte global für alle Seiten zu definieren.

Last edited by chadmin8 (21.05.2019 09:04:29)

florian

Administrator

Re: Seiten/Abschnitte in Abhängigkeit von viewport anzeigen

Ich kann Dir immer weniger folgen... was haben denn jetzt Outputfilter und Vega-Slider mit dem Thema zu tun?
Und nein, es ist ganz gewiss nicht geplant, den Vega-Slider in irgend einen Outputfilter zu integrieren, wie sollte das auch gehen und was sollte das bringen?

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

chadmin8

Member

Re: Seiten/Abschnitte in Abhängigkeit von viewport anzeigen

sorry,Ist mir bewusst, das beide Themen nichts miteinander zu tun haben.
Vega wär nur interessant vs. Hero.
Outputfilter zum Anzeigen für bestimmte Sections.

Gruss Urs

florian

Administrator

Re: Seiten/Abschnitte in Abhängigkeit von viewport anzeigen

In WBCE 1.4 wird mit dem Outputfilter-Dashboard ein leistungsfähiges Tool zur Konfiguration von individuellen Outputfiltern zur Verfügung stehen, die dann entweder direkt im Tool als Plugin hinterlegt werden (in etwa wie die Droplets) oder sozusagen als Sub-Module installiert werden. So einen Filter zu programmieren setzt aber schon etwas Kenntnis von der Materie voraus.

Zur konkreten Seite nochmal:
Der Accordion-Abschnitt hat die Klasse sid-26, also die ID des Abschnitts, in dem das Accordion ursprünglich angelegt wurde, auch wenn es über den Sectionpicker geladen wurde. Wenn Du über SP auf mehreren Seiten das selbe Accordion lädst, ist es für Dich ja sogar noch einfacher, weil Du dann nicht für .sid-26, .sid-32, .sid-456 usw. die Sichtbarkeit definieren musst, sondern eben nur für .sid-26.

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.