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

Neuuser

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.

Werbepost

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

SirEctor

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.

Neuuser

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

.gallery-item {
font-style: italic;
margin-bottom: 30px;
}
.wp-caption-text {text-align:left; }

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 :-)

SirEctor

Versuch mal das

CSS

.wp-caption-text.gallery-caption {
    max-width: 345px;
    margin: auto !important;
    line-height: 0.7rem;
}

SEpp55

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:

CSS

#gallery-1 .gallery-item {
    width: 48% !important;;
    padding-left: 1%;
    padding-right: 1%;
}

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

.wp-caption-text {
    text-align: center;
}

Linksbündig mit dem Bild ist schwierig, da sich der Rand vom Bild dynamisch mit der Anzeigebreite verändert.

Neuuser

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

padding-bottom: 1%;

und dann mit

Code

padding-bottom: -30%;

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

line-height: 1%;

im Block .gallery-item ist Bildunterschrift jetzt direkt unter dem Bild.
Juchei!

SEpp55

Genau das war mein Gedanke zu

Zitat

Die Bilder sind mittig ausgerichtet

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

SEpp55

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 .....

CSS

/* CSS-Anweisungen für Bildschirmbreiten bis maximal 480 Pixel */
@media screen and (max-width: 480px) {
  .gallery-item {
    font-style: italic;
    width: 100% !important;
    padding-left: 1%;
    padding-right: 1%;
    padding-bottom: 5%;
    line-height: 1%;
    text-align: left !important;
}
  #gallery-1 .gallery-item {
    float: left;
    margin-top: 10px;
    text-align: center !important;
}
}

Alles anzeigen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

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

Jetzt mitmachen!