WBCE CMS Forum

grindbatzn

Gast

HowTo Itemz: Typisches Beispiel

Man braucht nicht immer ein Preset.
Hier anhand eines klassischen Beispiels, wie man es am besten mit Itemz angeht.

Ziel soll eine Liste sein: Bild - Titel - kurzer Text für interne Links. Die Blöcke sollen insgesamt anklickbar sein.

Ich brauche also zunächst das HTML für die Einträge, und weil der gesamte Eintrag anklickbar sein soll (also Bild - TItel _ text) nutze ich dazu ein <a href..>
EIn <a> darf keine Blockelemente enthalten, ich darf also innerhalb von <a>  nur <span>, <strong>,... verwenden und muss diese per display:block in Blöcke umwandeln.

Ich habe also:
<a class="piclinklista" href="..."><img...><span><strong>Titel</strong>Text</span></a>
Um den Eintrag herum brauche ich nochmal ein <div>, dazu später.

Damit ich das alles per CSS einfacher separat anwählen kann, kommt um alles nochmal ein <div class="piclinklist"> herum. Das kommt in das Feld Kopfzeile Gruppe, der Schlusstag </div> kommt in Fußzeile Gruppe

Das CSS kann ich direkt in der Kopfzeile angeben, es wird bei der Ausgabe in den head verschoben:

<style>
.piclinklist a, .piclinklist span, .piclinklist strong {display:block}
...
</style>

Jetzt brauche ich die entsprechenden Platzhalter, um dem ganzen Inhalt geben zu können:

<div>
<a class="piclinklista" [LINK_PAGE]>
<img src="[PICTURE]"  alt="" title="[NAME]" />
<span class="piclinklistspan">
<strong>[NAME]</strong>
[LONG1]
</span>
<span style="height:0; clear:both;" ></span>
</a>
[EDITLINK]
</div>

Alle Platzhalter stehen in der Hilfe!
[LINK_PAGE] gibt den Link inklusive href=".." aus. Das ist deswegen so, weil dann ein Link auch entfallen kann. Würde ich ein SHORT Feld verwenden, entstünden Links mit leerem href="", was Fehler verursacht. Ein <a> OHNE href hingegen ist unproblematisch.

{PICTURE} ist das Bild, ich könnte auch
<img src="[PICTURE]"  alt="" title="[NAME]" />
verwenden, dann habe ich auch ein title-Attribut. Nachteil: Wenn kein Bild angegeben ist, kommt der <img>-Tag fehlerhaft. Bei {PICTURE} kommt der Tag gar nicht.
Außerdem führt  title="[NAME]" zu Fehlern, wenn [NAME] ein " (Anführungszeichen) enthält.
Erratum: Wenn ein Link angegeben ist, enthält {PICTURE} selbst wiederum einen Link (historische Gründe), ich muss also <img src="[PICTURE]"  alt="" /> angeben...

[EDITLINK] enthält einen direkten Link zum Editieren, aber nur für Admins.
Das ist auch der Grund, warum ich um den <a> nochmal einen <div> gegeben habe: EIn <a> darf kein <a> enthalten.

Um die Felder editieren zu können, muss ich die Felder benennen:
Feld Link to Page_ID nenne ich "Seite"
Feld Long1  nenne ich "Text" und stelle es auf "Art: Text". Dadurch bleiben Zeilenwechsel erhalten, ich unterbinde aber, dass jemand HTML-Tags einfügt, das würde das Konstrukt stören und HTML-Fehler verursachen.

"Speicherort der Bilder:" gebe ich mit /piclinklist an, und gebe sinnvolle Werte für die Bildgrößen an, zb 400 x 260 px. Das ist groß genug für große Monitore und klein genug, um die Ladezeit im Rahmen zu halten.
Das Häkchen bei "Dateiuploads erlauben:" entferne ich.

Mit dem CSS in Kopfzeile kann ich jetzt das Erscheinungsbild verfeinern:

<style>
.piclinklist a.piclinklista {display:block; clear: both; width:100%; padding: 5px 0; background-color: #fff; text-decoration:none;  transition: 1s all; }
.piclinklist a:hover {padding: 10px 0; background-color: #eee;}

.piclinklist img { float:left; width:30%; margin: 0 2% 0 0;}
.piclinklist span  { display:block; }
.piclinklist .piclinklistspan {float:left; width:60%;}

.piclinklist span strong { display:block; font-size:1.4em}

.piclinklist div {position:relative;}
.piclinklist  .itemz_editlink  {position:absolute; top:0; right:0;}

.ui-dialog {z-index:9000 ! important;}

@media screen and (max-width: 460px) {
.piclinklist .piclinklistspan { font-size:0.8em;}
.piclinklist span strong { font-size:1em}
}

</style>

Fragen, Meinungen, Anregungen: Bitte gerne

Beitrag geändert von grindbatzn (14.11.2018 17:21:23)

berny

Mitglied

Re: HowTo Itemz: Typisches Beispiel

Ich möchte gerne einen Style einfügen, der anhand eines Feldes sich entsprechend ändert.

Beispiel:
<div0>
   <div1>SHORT1</div1>
   <div2>SHORT2</div2>
   <div3>LONG1</div3>
</div0>

Das <div0> ist grün, wenn in LONG1 etwas drinnen steht.
Das <div0> ist weiß, wenn in LONG1 nichts drinnen steht.
oder
Das <div3> ist grün, wenn in LONG1 was drinnen steht.

Ist das mit Itemz über css machbar ?

Update: habs gefunden, mittels Droplet aufrufbar.

if (isset($t) && $t!='') {
return '<div class="unit one-fifth gridhighlight">'.$t.'</div>';
}  else {
return '<div class="unit one-fifth"></div>';
}

[[dropletname?t=[LONG2]]]

Beitrag geändert von berny (26.03.2020 15:09:11)