WBCE CMS – Way Better Content Editing.
Du bist nicht angemeldet.
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 16:21:23)
byteworker, screamindan, bernd, stefanek, ice, florian
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 14:09:11)
Online
klawin