WBCE CMS Forum

bakerling

Mitglied

Itemz Probleme mit Bildern und Presets

Hallo
Auf http://theater-udligenswil.ch habe ich eine Seite Archiv eingerichtet. Itemz benutze ich als eine Art Bildermenu.
Leider verhält es sich nicht so wie ich möchte.

Ich habe deshalb Itemz auf meiner Testseite http://starpage.ch eingerichtet. Ich bastle schon den 2. Tag an Itemz Preset teaser-grid rum und verstehe immer noch Bahnhof.
Seite ARCHIV ist so wie es aktuell aussieht mit 6 items.
Seite ARCHIV 2 ist das gleiche preset aber mit 7 items.
Seite ARCHIV 3 ist die Darstellung beim standard preset

Wieso ändert sich die Darstellung wenn ein items mehr dazukommt (Archiv und Archiv 2)
Gefallen würde mir die Darstellung wie in ARCHIV 2. Es verunsichert mich aber wenn die Darstellung von der Anzahl items abhängig ist.

Archiv 3 wäre auch ok. Nur verstehe ich den Umgang mit den Bildern nicht. Auf dem Handy sehen die Bilder furchtbar aus, weil sie vergrössert werden. Wenn ich grössere Bilder verwende, werden diese in der Übersicht nicht verkleinert.

Auf http://wbce.at habe ich eine rudimentäre Anleitung mit Video gefunden. Diese hilft mir jedoch nicht weiter.

Ich hoffe ein ITEMZ Spezialist kann mir weiterhelfen. Ich danke schon mal.

LG Harry

berny

Mitglied

Re: Itemz Probleme mit Bildern und Presets

Prinzipiell:
Was genau willst du?

Du hast das preset für 6 Bilder nebeneinander ausgelegt, wenn jetzt ein 7tes dazu kommt, ist es ja normal, dass es den Div-Bereich in die nächste Zeile verschiebt.

Mach mal dein Browserfenster kleiner, und ändere die Größe des Fensters, dann erkennst du das System wie sich die Div verschieben...

Und der äußere Rand ist nochmals durch das Template begrenzt.

bakerling

Mitglied

Re: Itemz Probleme mit Bildern und Presets

Hallo berny

Natürlich ist mir klar, dass ein Bild, wenn es keinen Platz mehr hat, auf die untere Zeile springt. Wieso jedoch das responsive Verhalten so unterschiedlich ist, verstehe ich nicht.
Verkleinere mal das Browserfenster bei Archiv und bei Archiv 2, dann siehst Du was ich meine.

Was ich im Grunde möchte, ist das Verhalten der Bilder in Archiv 2. Ich habe jedoch erst 6 Bilder. Das nächste kommt erst in ein paar Monaten dazu, wenn das aktuelle Stück abgespielt ist.

Auf Chios Seite https://wbce.at/tpls/itemz/gallery-slid … teaser.php ist das Verhalten wie bei Archiv 3. Er hat Bilder 1200x600 px hochgeladen. Die Thumbs werden jedoch kleiner dargestell.

Wenn ich jedoch bei mir grössere Bilder hochlade, werden leider auch die Teaserboxen gross. Wie gesagt, ich verstehe das Bilderhandling nicht.

LG Harry

florian

Administrator

Re: Itemz Probleme mit Bildern und Presets

In Archiv 1 ist für die einzelnen Teaser eine feste Breite angegeben, die anhand der Anzahl der Teaser berechnet wird:
In der Itemz-Kopfzeile sind die Zeilen

.teaserbox2 {width:48%; margin:0 2% 20px 0;}
.teaserbox3 {width:32%; margin:0 1% 20px 0;}
.teaserbox4 {width:23.8%; margin:0 1% 20px 0;}
.teaserbox5 {width:18.81%; margin:0 1% 20px 0;}
.teaserbox6 {width:16%; margin:0 0.45% 20px 0;}

Darauf bezieht sich die Anweisung teaserbox[ITEMS_IN_GROUP] beim Code für das einzelne Item ,  bei mehr als 6 Einträgen greift nur die Standard-Anweisung ohne explizite Größenangabe für die Teaserbox, die sich dann bei Dir nach der Größe des Bildes richtet, weshalb das Layout gesprengt wird.

Wenn Du die Größenänderung nach Anzahl nicht willst, kannst Du die Anweisungen teaserbox2 - teaserbox8 sowie teaserbox[ITEMS_IN_GROUP]  beim Item entfernen und

.teaserbox {float:left; margin:0 1% 20px 0; background: rgba(100,100,100,0.1); padding-bottom:30px;

ändern zu

.teaserbox {float:left; width:20%; margin:0 1% 20px 0; background: rgba(100,100,100,0.1); padding-bottom:30px;

Dann sind die Teaser immer 20% breit und Du kannst größere Bilder hinterlegen.

Bei Archiv2 ist, keine Ahnung aus welchem Preset das stammt, ein Javascript eingebunden, das dynamisch die Breite der Boxen anpasst, unabhängig von der Anzahl. D.h. wenn Du da bei einem Teaser ein breiteres Bild hinterlegst, würden alle anderen Teaserboxen dieselbe Breite annehmen.

Bei Archiv 3 greift in der mobilen Ansicht greift der Code

@media screen and (max-width: 768px) {
.teaserbox {width:98% ! important; height:auto ! important; float:none; margin :10px 0 20px 0 !important;}
}	

Diesen müsstest Du entfernen oder anpassen. Der Breakpoint 768 ist sehr früh, ich würde diesen auf 400 setzen, und auch mit width:98% evtl auf width:48% ändern.

bakerling

Mitglied

Re: Itemz Probleme mit Bildern und Presets

Hallo Florian

Vielen, vielen Dank! Deine Antwort hat mir sehr geholfen.
Deinem Rat folgend, habe ich .teaserbox2 - .teaserbox6 entfernt und schon funktioniert das Bildermenu auf http://www.theater-udligenswil.ch/pages/archiv.php wie gewünscht.

LG Harry