Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets
SVG mit Links. Das SVG ist zum Beispiel mit Icons und diese sind verlinkt. Das ist dann der Website durch Object-Tag wiederzugeben. Bsp die Beschreibung von einem Dashboard, das mit vielerlei Einstellungen ist. Nehmen wir mal an, das Dashboard auf deinem Web-Host-Server und du stehst ganz am Anfang deiner Karriere. Da ist doch eine gute Information sehr gefragt! – lass uns schauen, wie das gemeint ist.
↑ Anklicke da oben die linkerseits und grau hinterlegten Begriffe. Dann ist das als Beschreibung für den Benutzer. Und durch Anklicken der Icons geht es gleich zur Information der Gebrauchsanweisung. Anklicke, so öffnet die verlinkte Website im Bild und ist dann zum Scrollen. Um wieder zurück des Bilds der Übersicht ist die Seite hier neu zu laden, darum ist hier auch der ‘Reload’ Button. Oder passender die Links mit Rechtsklick und somit ist die Website in neuem Tab zu öffnen. So ist das hier im Beispiel.
So nun weiter im Bsp zur Herstellung des SVG mit den Links. Im erstens ist die Vorlage das Dashboard als Bildschirmfoto.png. Infolge ist das im SVG-Programm zu öffnen. Des Dashboards als PNG-Bild sind dort die Punkte und die Icons der Mittelpunkt. Diese sind so mit einem Rechteck Opazität null zu verlinken. Zur Fertigstellung ist das im Ganzen als SVG-Format abzuspeichern.
WordPress und SVG
Im Object-Tag das SVG mit verlinkten Icons
- Zuerst darf ich vorstellen ‘mediaevent.de Stil mit Stil’ dort im Titel Sieben Wege, SVG in HTML-Seiten.
So Vektorgrafik wie hier bspw. Da sind auch Icons mit Links dabei. Diese sind dann mit Rechtsklick zu öffnen. Im direkten anklicke der Links öffnen sich diese in einem Scrolle, aber allen Links funktioniert das hier nicht.
Das SVG-Bild größer → Anklicke oder in Groß so mit Rechtsklick und ‘Link in neuem Tab öffnen’.
OT: Das SVG ist fast 450 kB …
target="_blank" vom SVG. Allein mit Plug-in Safe SVG Version 1.9.8.Das SVG im Object-Tag
Dieser Code zur Anwendung:
<object data="https://wegerl.at/wp-content/uploads/2020/08/Jitsi-Meet_noopener.svg" type="image/svg+xml" width="600" height="300"><!-- Für Browser ohne SVG-Unterstützung --><img src="https://wegerl.at/wp-content/uploads/2020/08/Jitsi-Meet.png" width="600" height="300" alt="Alternatives PNG-Bild" /></object>
Nach der Umstellung von Größe und umschalten des Modus von ‘Text’ in ‘Visuell’ ändert bzw. ergänzt sich der Code.
<object data="https://wegerl.at/wp-content/uploads/2020/08/Jitsi-Meet_noopener.svg" type="image/svg+xml" width="600" height="300"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><!-- Für Browser ohne SVG-Unterstützung --><img src="https://wegerl.at/wp-content/uploads/2020/08/Jitsi-Meet.png" width="600" height="300" alt="Alternatives PNG-Bild" /></object>… Das ist sehr eigenartig! Mitunter ergeht das auch erst nach der Änderung von Größe des SVG? Usw.🫠
- Diese oben beschriebene automatische Einfügung ist keine Infektion durch Malware oder ein betrügerisches Skript oder Plugin.
- Hier der Autor von Tiny MCE vor 3 Jahren https://core.trac.wordpress.org/ticket/44275#comment:3
- Dies ist das “Lesezeichen”, das eingefügt wird, um die Cursorposition beim Umschalten von Visual › Text oder Text › Visual im klassischen Editor beizubehalten.
- Wenn beim Umschalten Text › Visual etwas falsch erscheint, versuchen Sie auf jeden Fall, irgendwo anders in den Text zu klicken, um den Cursor zu bewegen. Dadurch wird sichergestellt, dass der Code zum Beibehalten der Cursorposition andere Editor-Funktionen nicht beeinträchtigt.
Der Code hält wie eingegeben so:
- Den Code
<object data=… … …</object>in Text, - die Datei-URL einfügen und
- die Größe editieren.
- Den Cursor aus dem
<object data=… … …</object>Bereich heraus klicken. Also den Cursor in den Absatz ober- oder unterhalb einklicken und auf Visuell umschalten.
Und nächst das Beispiel mit Plug-in SVG Support.
Das SVG im img-Tag
Das Beispiel ist hier nicht, da dies, so, nicht funktioniert. Das hat aber nicht direkt mit dem Plug-in zu tun …
… mit Plug-in SVG Support. Der Einstellung ‘Enable Advanced Mode / ja’
<img class="style-svg" alt="alt-text" src="image-source.svg" />
Im direkten Anklicken der verlinkten Icons öffnen die nicht in einem Scrolle. Aber nicht so, wie nämlich die Links als target="_blank" sind.
Des nächst fiel auf, dass nach ‘Veröffentlichen’ das zweite SVG mit den verlinkten Icons nicht funktionierte. Daher habe ich das Bspw hier auf
Das mit der Größe vom SVG
Die Größe im Modus-Visuell mit ziehen. Oder eine Class erstellen. Bspw:
.logo-class {
width: 50%;
}Das mit den ‘margins’
… und die Position ist wie normalen img-Bild.
Wie auch immer …
Die Zusammenfassung ist, dass am MAMP allein mit Plug-in Safe SVG oder SVG Support das mit dem Link target="_blank" funktioniert.
Und wie von selbst …
Und wie von selbst funktioniert das, mit dem Plug-in Easy FancyBox.
Das Bild ist einfach durch ‘Dateien hinzufügen’ visuell. Das dann mit Link zur Mediendatei. Somit nach Anklicken des Bilds öffnet die Light-Box von Easy FancyBox und von dort sind die Verlinkungen anklickbar, aber allen Links funktioniert das hier nicht, da die Websites das nicht (mehr) zulassen. So, mit Rechtsklick und Link/Bild in neuem Tab öffnen funktioniert das wiederum.
Aktualisiert im Jahr 2022-November
Loading ...
