1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Galerie: Wie Einstellungen wie pading, Bildunterschrift und so weiter bearbeiten?

Dieses Thema im Forum "Design" wurde erstellt von Neuuser, 24. Januar 2018.

  1. Neuuser

    Neuuser Active Member

    Registriert seit:
    3. Januar 2017
    Beiträge:
    28
    Zustimmungen:
    0
    Hallo zusammen,

    ich habe gerade meine erste Galerie erstellt.
    Ich nehme 4 Bilder und lasse die in 2x2 anzeigen.
    Wenn ich nun die Seite kleiner mache (also auf Mobilgröße schrumpfe), rücken die Bilder so nah zusammen, dass sie sich final gegenseitig berühren. Das ist unschön. Gibt es hier irgendwo eine Möglichkeit global für jede Galerie die Regel einzustellen, dass die Bilder immer einen Abstand haben sollen (notfalls dann eben noch kleiner werden wenn man die Seite staucht). Ich glaube man nennt es pading?
    Im gleichen Atemzug gefällt mir die Bildunterschrift nicht. Sie ist so arial 10. Ich hätte sie gerne näher am Bild, kursiv und eben in der gleichen Schriftart, wie den Rest der Seite. (ich glaub das ist roboto).

    Gibt es so etwas wie globale Einstellungen für Galerien? Wenn ja, wo im Setup von WP finde ich sie?
    Danke.
     
  2. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Einstellungen gibt es dazu nicht. Man macht sowas über CSS. Um dir helfen zu können, müssten wir einen Blick auf deine Seite werfen.
     
  3. Neuuser

    Neuuser Active Member

    Registriert seit:
    3. Januar 2017
    Beiträge:
    28
    Zustimmungen:
    0
    OK, ich habe die fragliche Galerie mal auf einen Einzelbeitrag gestellt, damit man das Problem sofort sieht.
    Hier ist der Link:
    https://mobil.transitfrei.de/testbeitrag-fuer-gallerie/

    In meiner CSS habe ich jetzt durch Try&Error plus eine Hilfe an anderer Stelle folgendes in die CSS eingetragen:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Lasse ich den Teil mit ".wp-caption-text" weg, ist die Bildunterschrift mittig. Nehme ich es rein, ist die Schrift zu weit nach links versetzt. Jetzt müsste das Bild auch nach links, oder? Oder gibt es eine Möglichkeit den Text der Bildunterschrift auch mit dem Bild beginnen zu lassen?

    Zweite Frage wäre, wie ich den Text näher an das jeweilige Bild bekomme?
    Dazu jemand eine Idee?

    Danke vorab :)
     
  4. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Versuch mal das
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  5. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.141
    Zustimmungen:
    591
    Deine Bilder stoßen zusammen, weil sie keinen Rand (padding) haben!

    Die Bilder sind derzeit in der id=gallery-1, der class=gallery-item une weiter der class=gallery-icon landscape mit width:50% (ohne Rand) festgelegt.
    Das heißt Platz schaffen für einen Rand!

    Versuch das mal in den zusätzlichen CSS:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Die Schrift darunter ist ein anderes Problem!
    Die Bilder sind mittig ausgerichtet und sobald die "Spaltenbreite" größer als die Bildbreite von 345px wird entsteht links und rechts ein Rand.
    Da die Schrift aber links ausgerichtet wird passt die Flucht nicht mehr zusammen!
    Mit folgender Anweisung könntest du die Schrift auch mittig setzen.

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Linksbündig mit dem Bild ist schwierig, da sich der Rand vom Bild dynamisch mit der Anzeigebreite verändert.
     
  6. Neuuser

    Neuuser Active Member

    Registriert seit:
    3. Januar 2017
    Beiträge:
    28
    Zustimmungen:
    0
    Erstmal vielen Dank euch beiden!
    SirEctor: Ich habe dein Fragment zuerst probiert. Aber so recht sehe ich keine Veränderung zu vorher. Was bewirkt der Code genau?

    SEpp55: Super, der erste Codeschnipsel hat schonmal einen kleinen Rahmen um die Bilder gelegt! Stauche ich jetzt das Bild, behalen sie einen kleinen Rand.
    Mit der Textausrichtung OK, dann ist das so. "Schwierig" übersteigt meine persönlichen Möglichkeiten. Definitiv.
    Hättest du aber vielleicht eine Idee, wie ich die Bildunterschrift näher an das Bild heran bekomme? Jetzt ist die Unterschrift einfach zu weit weg.
    Ich habe es mal wahlweise mit
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    und dann mit
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    probiert. Aber beides scheint keinen Einfluss auf den unteren Abstand zwischen Bild und Textunterschrift zu haben. Mist, es hätte auch klappen können mit dem Selbstprobieren.
    :grin:

    Edit: Ich glaube ich habe den Abstand selbst hinbekommen!
    Mit
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    im Block .gallery-item ist Bildunterschrift jetzt direkt unter dem Bild.
    Juchei!
     
    #6 Neuuser, 25. Januar 2018
    Zuletzt bearbeitet: 25. Januar 2018
  7. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.141
    Zustimmungen:
    591
    Genau das war mein Gedanke zu

    mit Bilder nach "left" ist alles in einer Flucht - passt! ;)
     
  8. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.141
    Zustimmungen:
    591
    Man könnte natürlich jetzt noch nachdenken, ob für Handys z.B. 2 Bilder nebeneiander gut sind oder das mit MediaQueries ändert?

    So zum probieren .....

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden