Frage zu CSS bei alten Bildergalerien

    Hallo zusammen,

    ich betreibe mehrere Websites, welche mit dem Classic Editor und dem Theme Blocksy erstellt wurden. Bei den Bildergalerien wurden alle Bilder untereinander angeordnet, was mit diesem CSS-Code in nebeneinander berichtigt wurde:

    Code
    /* Bilder in Galerie nebeneinander */
.gallery-item {
float: left;
padding: 10px;
}
.gallery {
overflow: hidden;
}

    Aktuell läuft ein Umbau mit Theme-Wechsel zu Kadence. Damit ist der obige CSS-Code wirkungslos. Als Lösung wurde dieser Code im Customizer eingebunden (kommt später in die functions.php rein):

    Code
    /* Bilder in Galerie nebeneinander */
.alignnone {
    float: left;
    padding: 5px;
}

    Ist das aus eurer Sicht OK oder gibt es bessere Lösungen?
    Die beiden Bilder zeigen die fehlerhafte und die richtige Darstellung der Bildergalerie.

    Neue Bildergalerien werden mit Gutenberg erstellt und sind OK.

    Hier der Link zu einer Test-Website:
    https://galerie.m266.de/

    Feedback erbeten.
    Vielen Dank.

    • Gerade eben
    • 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

    ..... auch da würde ich das nicht rein schreiben. Das sollte in den zusätzlichen CSS eingefügt werden.

    Zitat


    CSS-Code kann man (wenn kein Child-Theme vorhanden ist) im WordPress-Backend >> Design >> Customizer >> zusätzliches CSS (ganz ans Ende) einfügen.

    Abgekürzter Weg -> (dein-domainname.de/wp-admin/customize.php), also:

    /wp-admin/customize.php an deine Domain anhängen >>, aufrufen und dann auf zusätzliches CSS klicken, das funktioniert auch (noch?), wenn du unter dem Menüpunkt Design kein „Customizer“ mehr findest.
    Nach dem Abspeichern musst du den Browsercache leeren, drücke dafür CTRL (STRG) + SHIFT + Entf gleichzeitig, dadurch wird in den gängigen Browsern ein Fenster zum Löschen geöffnet


    ... eine freundliche Leigabe von (@la-geek) aus dem Paralleluniversum ;-) Danke Angelika

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    Ich verwende ein Child-Theme und da kommt die CSS in die style.css rein. Sehe keinen Grund, hier eine PHP-Datei zu verwenden oder den Customizer zu benutzen. Das fertige Child-Theme wird regelmäßig aktualisiert und dann verteilt.

    Meine Frage war aber eigentlich, ob alignnone für diesen Zweck richtig ist oder bisher noch nicht entdeckte Nebenwirkungen hat. Die alten Bildergalerien sollen nahtlos weiter laufen, da eine Umstellung bei den vielen Galerien pro Website zu aufwändig ist. Neue Galerien sind wie erwähnt davon nicht betroffen.

    Der moderne Weg wären Flexboxen, keine floatenden Elemente. Mit denen hast Du auch mehr Kontrolle über die Mobilansicht.

    Am Beispiel deiner "importierten" Galerie wäre es ausreichend am umgebenden

    Code
    <p>

    die Eigenschaft

    Code
    display: flex

    zu setzen. Weitere Details zur Steuerung kannst Du dann noch ergänzen. Schwierig ist hierbei lediglich, dass der Absatz keinen passenden Selector hat. Wenn Du den HTML-Code davon anpassen kannst, würde ich dir empfehlen dem noch eine Klasse zur besseren Steuerung zu geben.

    Im übrigen würde ich solche Angaben auch in der style.css eines Child-Themes eintragen. Dort besteht die Chance, dass sie auch sowohl von Optimierungs-Plugins wie auch vom Browsercache gecached werden können. Der Customizer ist, wie du richtig schon andeutest, eher zum experimentieren geeignet.

    Zitat von threadi

    Am Beispiel deiner "importierten" Galerie wäre es ausreichend am umgebenden <p>


    Wenn ich das recht verstehe, müsste ich dies bei allen Bildergalerien machen. Das ist aber aufgrund der Anzahl Galerien zuviel Aufwand. Daher bevorzuge ich eine Lösung mit CSS-Code, gültig für alle Seiten. Bisher habe ich mit meinem eingefügten Code keine negativen Auswirkungen erkannt und kann es ggf. so belassen.

    Zitat von threadi

    Dort besteht die Chance, dass sie auch sowohl von Optimierungs-Plugins wie auch vom Browsercache gecached werden können.


    Erstaunlicherweise sind die Webseiten bei Verwendung von Kadence recht schnell, so dass ich auf Cache-Plugins verzichten kann. Bei der Programmierung wird man durch solche Plugins auch öfter zum Narren gehalten. Das kennst du sicher. Die Performance meiner Testsite kannst du gerne mit diesem Tool messen und mit anderen Websites vergleichen. Mit Blocksy habe ich i. d. R. trotz Cacheplugin schlechtere Werte; besonders in der mobilen Darstellung. Deshalb ist das Theme Kadence aktuell mein Favorit.

    Haben die importierten Galerien eine Gemeinsamkeit? Sind sie ein eigener Post-Type oder nutzen sie das gleiche Template? Schau dir mal das body-Element an - vielleicht sind dort Gemeinsamkeiten zu finden über die du die Gestaltung vornehmen könntest.

    Ich bin jetzt nicht so der Profi und auf den ersten Blick erkenne ich keine großen Unterschiede bei neuen und alten (importierten) Galerien. Ich werde mal weiter testen und hoffe, es läuft.
    Vielen Dank für die Hinweise.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden