Wer kennt sie nicht, die gegensätzlichen Paare : alt und jung, heiß und kalt, damals und heute usw. Vielfach lassen sich diese sehr schön durch zwei Bilder darstellen. Also suchte ich nach einer Methode mit der man per Knopfdruck auf einer WordPress Seite zwei Bilder gegeneinander austauschen kann. Das Ganze soll als ‚toggle‘ laufen, d.h. es kann hin-und-her geschaltet werden.
Das man dafür etwas Javascript brauchen würde war mir schon klar. Auch Custom-CSS wird zur Gestaltung des Buttons erforderlich sein. Zunächst habe ich dann mal fleissig gegoogelt und per copy-paste das ein oder andere ausprobiert. Eine eigene Javascript-Datei wollte ich hierfür nicht einbinden. Ich wollte es inline machen. Eine Weile scheiterte ich daran, das der Editor von WordPress im visuellen Modus Statements wie onclick=“machWas()“ schlicht und einfach löscht. Auch hier wurde gegoogelt. Manche behaupteten das es am verwendeten TinyMCE Plugin liegt. Stimmt aber nicht. Auch andere diverse diesbezügliche Hilfestellungen funktionierten nicht.
Die Lösung brachte mir die Verwendung einer anonymen Funktion, die sozusagen inline an den Button gebunden wird. Eine Anweisung : document.getElementById(„einButton“).onclick = function(){…..} wird vom Editor verschont und in die geschweifte Klammer kann der erforderlich Code eingebunden werden. Eine Vorlage der Funktion fand ich bei jsfiddle.net. Besonders gefällt mir das sie, im Gegensatz zu anderen Möglichkeiten, ohne eine Boolsche Variable auskommt. Die Pfade der auszutauschenden Bilder werden aus der WordPress-Mediathek rüber kopiert und nach einiger Probiererei, auch mit dem Button, habe ich es dann hin bekommen.
So ganz zufrieden war ich aber noch nicht. Das Bild sollte auch noch beschriftet werden. Dabei wollte ich die Beschriftung der Bilder aus der Bibliothek nicht übernehmen sondern dies „vor Ort“ vornehmen. Auch die Formatierung der Bildbeschriftung habe ich inline vorgenommen.
Meine „Sommer – Winter“ Variante sieht dann so aus :
Balkonaussicht im Sommer
Hier der dazugehörige Code :
<img id="test" src="http://localhost:8888/WordPress/wp-content/uploads/2019/01/Beitragsbild-Dyck.jpg" />
<p id="beschriftung" style="font-size: 16px;font-family: Georgia, 'Times New Roman', serif; margin-top:-35px;margin-left:20px;">Balkonaussicht im Sommer</p>
<p style="text-align: center;"><button id="einButton" class="meinButton">Bild ändern</button></p>
<script>
document.getElementById("einButton").onclick = function(){
var img2 = "http://localhost:8888/WordPress/wp-content/uploads/2019/01/Beitragsbild-Dyck.jpg",
img1 = "http://localhost:8888/WordPress/wp-content/uploads/2019/01/Karibik-Slider-1.jpg";
var imgElement = document.getElementById('test');
imgElement.src = (imgElement.src === img1)? img2 : img1;
var beschr1 = "Balkonaussicht im Sommer",beschr2="Balkonaussicht im Winter";
var bildBeschr = document.getElementById("beschriftung").innerHTML;
document.getElementById("beschriftung").innerHTML = (bildBeschr == beschr1 )? beschr2 : beschr1;
}
</script>
Der obige Code kann von hier markiert und kopiert werden. Er ist im Text-Modus des WordPress Editors einzufügen. Die Pfadangaben für die Bilder müssen natürlich angepasst werden, ebenso die Beschriftung des Buttons und die der Bilder. Für den Button zum Umschalten zwischen den beiden Bildern (mit der ID = „einButton“) wurde zur Formatierung die CSS-Klasse meinButton erzeugt. Dieser Code ist in die Custom CSS des jeweiligen Themes einzufügen.
Wichtig ist noch die ID des Buttons. Bei WordPress darf eine ID nur einmal vergeben werden. Wenn also in einem anderen Beitrag (oder dem gleichen Beitrag) noch ein Button mit der gleich ID „einButton“ vorkommt, so funktioniert das ganze nicht. Ich verbinde meinen Button mit der ID des Post’s, z.B. : button_14235. Wenn es in einem Beitrag mehrere Buttons gibt : button_4711_abs etc.
CSS Code zur Button Formatierung :
.meinButton{
background-color:#1c86ee; color:white;
text-align:center; border-radius:12px;
padding-left:20px; padding-right:20px;
padding-top:3px; padding-bottom:3px;
outline-width: 0; border:0px;
}
.meinButton:hover{
background-color:red;
color:black;
}
Getestet habe ich das Ganze mit dem Google-Chrome Browser, mit Safari und mit dem Fire-Fox von Modzilla. Dieses Ausprobieren lohnte sich, denn bei Safari stellte sich heraus das der CSS-Code für den Button noch etwas angepasst werden musste.
Fazit : Für mich ganz nützlich, vielleicht kann es ja noch jemand gebrauchen.
Dieser Beitrag hat bisher : 342 views.