HTML-Ausgabe eines verlinkten Bildes anpassen

  • Hallo allerseits

    irgendwie habe ich mich in einem Problem verrannt und vielleicht kann mir jemand einen Schubs in die richtige Richtung geben.
    Das wäre sehr nett.

    Mein Problem:
    Ich möchte gerne das von Wordpress generierte HTML verändern. Konkret: Wenn ich in einem Beitrag ein verlinktes Bild einfüge, erscheint im Texteditor folgendes:

    Code
    <a href="http://www.xyz.ch/bild.jpg"><img class="alignnone wp-image-3820 size-thumbnail" src="http://www.xyz.ch/bild-212x150.jpg" alt="Alternativtext" width="212" height="150" /></a>

    Nun möchte ich gerne ein zusätzlicher tag (caption) nach dem a-tag einfügen. Dieser soll gefüttert werden mit der Beschreibung des Bildes aus der Mediathek. Also:

    Code
    <a caption="<strong>Legende:</strong>Das ist die Beschreibung zum Bild" href="http://www.xyz.ch/bild.jpg"><img class="alignnone wp-image-3820 size-thumbnail" src="http://www.xyz.ch/bild-212x150.jpg" alt="Alternativtext" width="212" height="150" /></a>

    Lustigerweise hab ich das Ganze hingekriegt, wenn es sich um mehrere Bilder (als Galerie) handelt (eingefügt als Shortcode).
    Die Lösung sieht so aus:

    Wenn mir jemand einen Tipp geben könnte, wäre ich sehr dankbar!

    beste Grüsse

    Matthias

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Herzlichen Dank für die Antworten!

    Monika
    Ah, ja das tönt interessant.
    Aber: bei Galerien erscheinen die Bildunterschriften nicht im HTML-Markup...

    ............

    nicht überall wird alles angezeigt, was auch sinnvoll ist.

    Eine Bildunterschrift, soll kurz und knackig zeigen worums geht => caption

    die Bildbeschreibung ist für Galerien gedacht, wenn man zum Attachment verlinkt.

    Man kann eine Galerie ja auch auf das "große Bild" verlinken, dann kann man eine Lightbox nutzen.


    Um rauszufinden was wo da ist,
    schreibe einfach mal bei einem Bild bei der Bildunterschrift in das Feld "Bildunterschrift" etc rein,
    also hol dir die INFO indem du in das input Feld das reinschreibst was als Label da steht,
    beim Alternativtext musst im Quelltext nachsehen.

    Magst im normalen Beitrag ein Bild mit viel Text, tät ich das direkt in den Inhalt des Beitrags schreiben. Ist erstens bequemer und ich muss das System nicht nachhaltigst verändern.

  • Schreiben kann man viel in Tags aber, die sind damit nicht mehr valide oder?
    Eigene Attribute in HTML5 werden mit "data-" hinzugefügt damit diese wieder valide sind.

    Aber man lernt ja nie aus :D


  • Meinst du, mal in sämtliche Felder (Alternativtext, Bildunterschrift, Beschreibung, usw.) einen Text zum Testen reinzuschreiben?
    Das habe ich natürlich schon längstens getan.

    Ich hätte einfach gerne den Inhalt immer in das selbe Feld geschrieben, egal ob Einzelbild oder Galerie...
    Einen eigenen Tag dafür zu erstellen, macht dahingehend Sinn, dass der Text formatiert (fett,...) angezeigt wird, was beispielsweise beim alt-Tag verworfen wird.

  • alt-tag gibt es nicht, das ist ein Attribut und wird meist nur im Quelltext angezeigt, daher ist dort Formatierung absolut sinnlos.

    du magst ja auch nicht das html ändern,sondern den Inhalt des Shortcodes caption


    ungetestet von mir:
    http://wordpress.stackexchange.com/a/196097

  • Hallo allerseits

    irgendwie habe ich mich in einem Problem verrannt und vielleicht kann mir jemand einen Schubs in die richtige Richtung geben.
    Das wäre sehr nett.

    [...]

    Hallo Matthias,

    ja, vielleicht hast du dich wirklich etwas verrannt.

    Eins nach dem anderen:


    [COLOR=#333333]@Woogie-Design[/COLOR]
    [COLOR=#333333]eigene Attribute sind seit HTML erlaubt. [/COLOR]
    [COLOR=#333333]Und ja, der Code funktioniert so.
    [/COLOR]

    Ich gehe davon aus, dass du HTML5 meinst.
    Ja, du hast recht, die sind seit HTML5 tatsächlich erlaubt - aber nicht in der Form, wie du das Attribut caption benutzt.
    Jedes eigene Attribut muss data- davor stehen haben. (data-*)
    In deinem Fall wäre also caption als Attribut einzusetzen ein HTML-Fehler, du müsstest data-caption=... nutzen.

    Soweit zum dazu, aber was noch viel wichtiger ist:

    Wieso benutzt du denn das caption überhaupt.
    Das hat zwei entscheidende Nachteile:
    - die data-attribute bzw. überhaupt eigene attribute sind für Menschen, die blind oder anderweitig auf Reader angewiesen sind, kaum mehr zu verstehen, bzw. die Reader können das nicht herauslesen - wenn du Pech hast, verlierst du dadurch Potenzielle User, da du hier ja anscheinend Content hineinpacken möchtest, wovon ich dir und generell auch abgeraten wird.
    Ist ja auch irgendwo logisch - Stell dir mal vor, du bist auf einen ScreenReader angewiesen, der liest dir dann vor: "Link auf http://www.google.de, hat Eigenschaften 1.) data-slide eins 2.) data-changeclass fünfzehn 3.) data-caption Sehr schönes Bild 4.) data-read readonly ...
    Da ist zwar das Caption dann dabei - aber woher will der Reader wissen, welche Attribute wichtig und welche nicht wichtig sind?

    - Es gibt title und alt - wieso noch caption.
    Streng genommen erfüllt title schon diese Aufgabe? Wieso nicht title benutzen, den herausrendern. Ist einfacher und geht schneller, als eigene Dinge zu basteln. (Ich habe nichts gegen eigene Dinge, aber hier ist das schon sehr gezwungen!)

    Solche Attribute sollten nur genutzt werden, um irgendwelche anderen Operationen auf der Seite auszuführen, z.b. für einen Slider könnte man das nutzen, e.g.: data-slide="1"

    Wie gesagt, ich würde das nicht so nutzen, vor allem aber nicht ohne data-*.

    Wenn du es aber unbedingt so machen möchtest, dann würde ich da anders vorgehen.
    Vor dem speichern in die Datenbank nimmst du den String, den der Editor ausspuckt, und generierst deinen Tag aus der Beschreibung des Bildes in den a-tag, der auch img-tags enthält.

    Somit müsstest du nicht "unbequem" den Editor ändern und den User vielleicht noch verunsichern, sondern das wird einfach beim speichern gemacht.
    Dazu gibt es mehrere Hooks, wie save_post oder ähnliche.

    Wenn du noch weitere Fragen dazu hast, einfach laut schreien.

    Vielen Dank

  • Hallo Steral

    vielen Dank für deine Antwort.


    Wieso benutzt du denn das caption überhaupt.
    Das hat zwei entscheidende Nachteile:
    - die data-attribute bzw. überhaupt eigene attribute sind für Menschen, die blind oder anderweitig auf Reader angewiesen sind, kaum mehr zu verstehen, bzw. die Reader können das nicht herauslesen - wenn du Pech hast, verlierst du dadurch Potenzielle User, da du hier ja anscheinend Content hineinpacken möchtest, wovon ich dir und generell auch abgeraten wird.
    Ist ja auch irgendwo logisch - Stell dir mal vor, du bist auf einen ScreenReader angewiesen, der liest dir dann vor: "Link auf http://www.google.de, hat Eigenschaften 1.) data-slide eins 2.) data-changeclass fünfzehn 3.) data-caption Sehr schönes Bild 4.) data-read readonly ...
    Da ist zwar das Caption dann dabei - aber woher will der Reader wissen, welche Attribute wichtig und welche nicht wichtig sind?


    Das Zielpublikum sind meine Schüler, der Seiteninhalt Bildende Kunst...

    Zitat


    - Es gibt title und alt - wieso noch caption.
    Streng genommen erfüllt title schon diese Aufgabe? Wieso nicht title benutzen, den herausrendern. Ist einfacher und geht schneller, als eigene Dinge zu basteln. (Ich habe nichts gegen eigene Dinge, aber hier ist das schon sehr gezwungen!)

    Weil ich den Text minimal formatieren möchte, bzw. auch mal einen erzwungenen Zeilenumbruch einsetzen möchte. Soweit ich das gesehen habe, kann man das mit title, bzw. alt vergessen... nicht?

    Zitat


    Wie gesagt, ich würde das nicht so nutzen, vor allem aber nicht ohne data-*.

    Wenn du es aber unbedingt so machen möchtest, dann würde ich da anders vorgehen.
    Vor dem speichern in die Datenbank nimmst du den String, den der Editor ausspuckt, und generierst deinen Tag aus der Beschreibung des Bildes in den a-tag, der auch img-tags enthält.

    Somit müsstest du nicht "unbequem" den Editor ändern und den User vielleicht noch verunsichern, sondern das wird einfach beim speichern gemacht.
    Dazu gibt es mehrere Hooks, wie save_post oder ähnliche.

    Wenn du noch weitere Fragen dazu hast, einfach laut schreien.

    Vielen Dank

    Aha - das schau ich mir gerne mal an.

    Vielen Dank!

  • Für Bilder gibt es auch das weniger bekannte Attribut 'longdesc', daß eine URL zu einer Seite mit einer ausführlicheren Beschreibung enthalten kann.

    Das Problem ist, kaum ein Browser zeigt das irgendwie an. Beim Firefox wird mit "Grafik-Info anzeigen" wenigstens die URL aus longdesc angezeigt, mehr aber auch nicht.

    Naja, und wenn man schon bei HTML5 ist, kann man dann auch Tags wie figure und figcaption verwenden. Dann bekommt die Sache zumindest Struktur.

    Gruß
    Ingo

    Wenn ich helfen konnte, bitte [ Gefällt mir ] klicken. :-)

  • bevor du dich mit save_post auseinandersetzt
    erinner ich nochmals an diesen Kommentar von mir

    http://forum.wpde.org/allgemeines/15…html#post676058

    da ist ja die Lösung drin :-)
    oder zumindest ein verdammt guter Ansatz...

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!