Beispiele für die Shortcodes von TinyCode… » weiterlesen…

Da es seit kurzer Zeit bei meinem „Gallery Widget“ auch Shortcodes gibt, möchte ich hier mal ein „Praxis“-Beispiel zeigen. Möchte man z.B. auf einer Seite oder in einem Beitag 9 zufällige Bilder anzeigen, und diese automatisch auf dem vorhandenen Platz in mehreren Zeilen/Spalten anordnen, so bietet sich folgende vorgehensweise an.

1. Einfügen des Shortcodes + Div (via HTML-Modus des Editors) in der Seite/Beitrag:

<div class=“testClass“>
[ getGWImages max=9 order=random linkclass=’testClass‘ ]
</div>

2. Erweitern der CSS-Datei des verwendeten Themes:

/* TestClass */
.testClass {
overflow: hidden !important;
padding: 10px 5px !important;
}
.testClass ul {
float: left !important;
}
.testClass li {
list-style-type: none !important;
display: inline !important;
padding: 5px !important;
float: left !important;
margin: 5px !important;
width: 150px !important; /* Groesse der Vorschaubilder */
height: 150px !important; /* Groesse der Vorschaubilder */
}
.testClass li a img, .testClass li a:visited img {
border: solid 1px #fff !important;
}
.testClass li a:hover img {
border: solid 1px #000 !important;
}

Die Ergänzung um „!important“ ist nur dann wichtig, wenn schon andere Formatierungen vorgenommen wurden, die mit diesen Einstellungen nun zwingend „überschrieben“ werden.

Das wars dann auch schon. Ich überlege derzeit, ob ich für den CSS-Teil nicht eine neue Funktion im Plugin einbaue, damit das CSS innerhalb des Adminbereiches verändert werden kann und unabhängig von einer händischen Änderung der CSS-Datei möglich ist. Meine vorherige Überlegung weiterer Optionen zum Aufteilen der Bilder auf mehrere Spalten/Zeilen werde ich ersteinmal nicht weiterverfolgen, die CSS-Variante ist meiner Meinung nach die geschicktere.