Vor einiger Zeit haben wir Ihnen das Plugin «Image Source Control» gezeigt, mit welchem Sie die Namen der FotografInnen Ihrer Bilder ganz bequem darstellen können. Hin und wieder wurden wir angefragt, wie sich die Bildquelle stylen lässt. Unsere Antwort: Mit ein paar Zeilen CSS. Wir zeigen’s Ihnen.
Vielleicht haben Sie unsere Plugin-Empfehlung «Endlich sichere Bildquellen-Angaben: Plugin-Empfehlung ‹Image Source Control’» gelesen. Dr. Code-Leser P.V. hat sich danach gemeldet und wollte wissen, ob sich die Bildquellen-Einblendungen noch etwas aufhübschen lassen. Das geht freilich. Wir verwenden auf dieser Website das Plugin ebenfalls und haben den Einblender nach unseren Bedürfnissen angepasst. So wie im Beispiel rechts.
© angieconscious/pixelio.de
Ohne Zutun würde dann die Bildquelle direkt ins Bild eingeblendet – etwa so wie in der vergrösserten Darstellung rechts – was wir nicht wollten.
Gelöst haben wir das ganze mit folgendem CSS-Code, den Sie in Ihr CSS-Stylesheet (unter Design/Customizer/zusätzliches CSS) einfügen können:
.isc-source-text {
background:none!important;
color:#000000!important;
font-size:10px!important;
line-height:1.2!important;
margin-bottom:-12px!important;
margin-left:-12px!important;
opacity:1!important;
transform:rotate(270deg);
transform-origin:0;
}Der Code kurz erklärt:
- Zeile 2 entfernt den Hintergrund, der eingeblendet wird, damit der Bildquellen-Text auf allen Bildern lesbar ist.
- Zeilen 3-5 definieren die Darstellung: Schriftgrösse, -farbe usw.
- Zeilen 6 und 7: Da müssen Sie ein wenig pröbeln und Pixel-schieben, bis die Bildquelle perfekt liegt. Das passt nicht in jedem Theme gleich gut.
- Die Bildquelle wäre standardmässig transparent – brauchen wir nicht, drum schalten wir die Transparenz in Zeile 8 ab.
- Zeilen 9 und 10 können Sie verwenden oder nicht: Sie sorgen dafür, dass der Text nicht waagrecht, sondern senkrecht erscheint – wie im Beispiel weiter oben auf dieser Seite.
Testen Sie die Bildquellenanzeige an mehreren Stellen Ihres Themes aus. Besonders, wenn das Bild am Seitenrand platziert wird, werden manchmal seitlich notierte Bildquellen nicht angezeigt. Das sollten Sie möglichst vermeiden.
