Bildunterschriften formatieren

    Hallo in die Runde,

    mein Migrationsprojekt schreitet unaufhaltsam voran. Ich hätte da noch ein paar Fragen:

    Wie kann ich Bildunterschriften formatieren? Gibt es da Boardmittel in Zeta?
    Momentan behelfe ich mir damit, den HTML Code anzupassen mit: <span style="font-size: 9pt;">
    Beispiel: <p><span style="font-size: 8pt;">Luftbild Nr. 7685/1956, Copyright:
    </span><span style="font-size: 9pt;">
    <a href="https://frankfurt.de/service-und-rathaus/verwaltung/aemter-und-institutionen/stadtvermessungsamt"> Stadtvermessungsamt Frankfurt am Main.</a></span></p>
    Hier zu betrachten. Auch der Textblock zwischen den Bildern hat diesen großen Zeilenabstand bei kleiner Schrift. Lässt sich dieser verkleinern?

    Lässt sich das Editierfeld der Bildunterschriften vergrößern? Denn um den HTML Code zu editieren ist es doch recht klein.

    Ist es möglich, Text um Bilder herum fließen zu lassen, wie hier mit NOF erledigt, mit Zeta habe ich es so umgesetzt. Es sollen Bilder untereinander angeordnet sein und Rechts oder Links der Text vertikal über die gesamte Bildstrecke gehen wie ab "Der Verlauf der Strecke mit dem Gleisdreieck im Grüneburgweg." auf o.g. Seite. ?

    Lässt sich das Copyright für jede Seite individuell setzen?

    Lässt sich die Reihenfolge des Menüs unter "Klick auf Bild" anpassen, da ich momentan meistens "Klick Adresse öffnen" nutze, hätte ich dies gerne als "Standard".

    Edit ist noch was eingefallen, -lässt sich in die Bilder Schrift einfügen? Denn die Buttons unter den Fotos sind ein "Bild" als Vorlage:

    In NOF ließ sich dies dann mit einem Text versehen:

    was dann so aussieht.

    Mit ZETA habe ich bei Bedarf mehr schlecht als recht dies mit Photoshop erledigt. OK, die meisten buttons habe ich, nur kommen ja immer mehr neue seiten hinzu.

    Vielen Dank
    Matthias

    Hallo Matthias,

    Wie kann ich Bildunterschriften formatieren? Gibt es da Boardmittel in Zeta?

    Das könntest Du mit eigenem CSS realisieren („Einstellungen > Einstellungen > CSS“):

    Code
    <style>
.imagedescription {
font-size: 8pt;
line-height: 1.5;
}
</style>

    Damit würden alle Bildbeschreibungen eine Schriftgröße von 8pt erhalten. Eine einfache Möglichkeit das Copyright gleichzeitig auf 9pt zu setzen sehe ich nicht. Warum das Copyright größer sein soll als die eigentliche Bildbeschreibung, erschließt sich mir auch nicht. Ich kann jetzt auch nicht sagen, wie sich das CSS mit Deinem HTML vertragen wird. Vermutlich wirst Du das HTML entfernen müssen und nur reinen Text als Bildunterschrift eingeben. Das wäre dann auch die sauberste Lösung.

    Von der Einheit „pt“ würde ich allerdings Abstand nehmen. Besser wäre „rem“ oder „em“. 8pt wären 0.7rem, wenn ich mich nicht irre. Ich beziehe mich damit auch auf die gesamte Seite und nicht nur auf die Bildunterschrift. Im responsive Webdesign sollte man sich idealerweise auf die Einheiten (r)em, px und % beschränken.

    Die Zeilenhöhe habe ich mal zur Sicherheit mit aufgeführt, vermutlich kannst Du aber auf diese Zeile verzichten. Einfach mal ausprobieren.

    Lässt sich das Editierfeld der Bildunterschriften vergrößern? Denn um den HTML Code zu editieren ist es doch recht klein.

    Nein. Aber mit obigen CSS wirst Du hoffentlich auch keinen HTML-Code mehr für die Bildunterschrift editieren müssen.

    Ist es möglich, Text um Bilder herum fließen zu lassen?

    Ja, dann musst Du das Bild aber direkt in das Text-Widget einfügen.


    Lässt sich das Copyright für jede Seite individuell setzen?

    Ja und zwar über das entsprechende Attribut auf Seitenebene. Dazu musst Du in den Eigenschaften der jeweiligen Seite „Attribute“ auswählen und hier dann nach „copyright“ suchen. Jetzt kannst Du für das Attribut „copyright_notice“ den gewünschten Text angeben.

    Siehe auch: https://docs.zeta-producer.com/attribute.html


    Lässt sich die Reihenfolge des Menüs unter "Klick auf Bild" anpassen, da ich momentan meistens "Klick Adresse öffnen" nutze, hätte ich dies gerne als "Standard".

    Meines Wissens ist das nicht möglich.

    Edit ist noch was eingefallen, -lässt sich in die Bilder Schrift einfügen? Denn die Buttons unter den Fotos sind ein "Bild" als Vorlage.

    Ich glaube, ich stehe hier gerade auf dem Schlauch.

    Viele Grüße

    Tom

    Hallo Tom,

    vielen lieben Dank für die Tipps. Jetzt sehe auch ich das kleine "Bild einfügen" Icon im Texteditor. ;) Manchmal sitzt man eben zu nah an der Tafel.
    Das mit dem CSS Code werde ich mal ausprobieren.
    Der Unterschied der Schriftgröße,- "Copyright" ist eher unwichtig, den beschreibenden Text sollte man aber lesen können. ;)
    Gehe ich Recht in der Annahme, dass es sich bei dem Ausdruck ".imagedescription" um eine Zeta interne Feldbezeichnung handelt?
    Wenn dem so ist, gibt es eine Liste der Feldbezeichnungen, oder bin ich da auf dem Holzweg?

    Zitat von Drcymbal

    Ich glaube, ich stehe hier gerade auf dem Schlauch.

    Stell dir vor, Du möchtest in das Foto mit dem Strand einen Text einfügen und das Foto wird mit diesem Text gespeichert.
    Das Foto lässt sich dann immer wieder mit diesem Text einfügen.
    In NOF geht das so, man fügt ein Bild ein und hat die Möglichkeit, die Bildeigenschaften zu bearbeiten:

    Ich füge das Bild ohne Text ein (oberer "button") und kann über "Bildeigenschaften" Text einfügen (unterer "Button")
    Das Bild wird dann im Assets/Images Ordner abgelegt.

    Ein sonniges Wochenende
    Matthias

    Hallo Matthias,

    einen Text ins Bild einzufügen ist mit Zeta Producer nicht möglich, dafür müsstest du ein entsprechendes Bildbearbeitungsprogramme verwenden.

    Allerdings kann ich im Hinblick auf SEO und die Barrierefreiheit nur davon abraten, Text in Bilder einzubauen und diese als Button zu verwenden. Für blinde Personen oder auch Suchmaschinen ist der Text nicht im Quellcode hinterlegt und somit nicht "lesbar". Stattdessen sollte lieber ein normaler Button (Widget in Zeta Producer) verwendet werden.

    Falls du ein Icon / Bild im Button haben willst, ist vielleicht folgendes Widget von WZP für dich interessant: https://www.widget-zp.de/button.html

    Freundliche Grüße
    Philipp

    ---------------------------------------------------------------
    Widgets für Zeta Producer: widget-zp.de

    Hallo Matthias,

    .imagedescription ist ein CSS-Selektor, genauer ein Klassen-Selektor. Bei Letzteren kann der Name beim Anlegen der Klasse frei gewählt werden, daher ergibt das Erstellen einer Liste wenig Sinn, da hier jeder Entwickler seine eigene Handschrift hat.

    Vielleicht bringt https://wiki.selfhtml.org/wiki/Selektoren_in_CSS/Einstieg etwas Licht ins Dunkel.

    Den Namen des Selektors kannst Du aber mit Hilfe der Entwickler-Werkzeuge im Browser herausfinden.

    Viele Grüße

    Tom

    Hallo Philipp,

    vielen Dank für den Hinweis. Nur ist es so, dass ich alle Buttons bereits als Bild vorliegen habe und wenig motiviert bin, diese auch noch anzupassen.
    Für neue Buttons kann ich das Butto Widget ja nutzen.
    Zumal es auch so ist, dass es sich um eine rein private Seite handelt und daher die Barrierefreiheit nicht sein muss.
    Was die Suchmaschinen anbelangt ist auch dies nicht sooo wichtig. ;)
    Dennoch Danke für den Link zu der Seite mit den kleinen "Zauberkästen" ;)

    Tom,- sorry für die Frage bzgl. CSS, Danke für die "Taschenlampe". ;)
    Ich hatte bereits nach ".imagedescription" gegoogelt, aber nix direkt gefunden.

    grüße
    Matthias

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden