zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bilderraster

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.08.2021, 09:19
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 121
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard Bilderraster

Hallo Leute,

Für die Bildergalerie unseres Tennisvereins habe ich ein Plugin verwendet, welches unabhängig von der Anzahl der Bilder und der Größe der einzelnen Bilder ein Rechteckiges Layout der Miniaturansichten fabrizierte.

Seit einiger Zeit, genauer gesagt seit einigen WordPress-Updates, funktioniert dieses Raster jedoch nicht mehr und vom Plugin gibt es schon seit längerem keine Updates mehr.
Siehe hier:
https://www.herrieden-tennis.de/tennisanlage/

Kann man bei dem vorhandenen Layout durch Ergänzung von zusätzlichen CSS ein einigermaßen schönes Layout der Bilder schaffen?
Wenn ja, wie muss dieses CSS aussehen oder wo gibt es Beispiele, an denen ich mich orientieren kann?


Habe das folgende Beispiel gefunden
https://css-tricks.com/adaptive-phot...-with-flexbox/

Leider sind die Bilder in diesem Beispiel in eine Liste verpackt.
Auf der Seite vom Tennisverein ist dies nicht der Fall.
Hier sind die Bilder folgendermaßen eingebunden:
HTML-Code:
<a class='nch-lightbox' href='https://www.herrieden-tennis.de/wp-content/uploads/2015/10/0luftbild1.jpg'   data-grid="320,540,720,960,1140"  rel="gallery19311"  title='0luftbild1'>
<img width="300" height="199" src="https://www.herrieden-tennis.de/wp-content/uploads/2015/10/0luftbild1-300x199.jpg" class="attachment-medium size-medium" alt="" loading="lazy" />
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.08.2021, 09:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.207
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zb folgendes, habe ich jetzt innerhalb von 1 Minute zusammengetüftelt. Kann man natürlich noch erweitern und noch besser machen wenn man noch mehr Zeit hinein steckt:

Code:
.nch-lb-grid {
  display: flex; 
  flex-wrap: wrap; 
  gap: 20px;
}

.nch-lb-grid img {
 width: 40%;
 object-fit: cover
}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.08.2021, 10:51
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 121
Sabine1 befindet sich auf einem aufstrebenden Ast
Lächeln

Vielen vielen herzlichen Dank!
Offline funktioniert das ganze.
Schaut schon ziemlich so aus, wie ich mir das vorgestellt habe.
Werde mich bemühen, das ganze zu verfeinern.
Und dann muss ich mal schauen, wie ich das ganze am besten in die WordPress-Website einbaue

Nochmals vielen vielen Dank für deine Hilfe und deinen Lösungsvorschlag
sehr nett von dir
Mit Zitat antworten
  #4 (permalink)  
Alt 05.08.2021, 09:23
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 121
Sabine1 befindet sich auf einem aufstrebenden Ast
Lächeln

Habe den Fehler gefunden.
Es lag an einem Plugin, welches den folgenden Code beinhaltet hat
Code:
/**
* Dequeue jQuery Migrate Script 
*/
if ( ! function_exists( 'evolution_remove_jquery_migrate' ) ) :
 
function evolution_remove_jquery_migrate( &$scripts) {
    if(!is_admin()) {
        $scripts->remove( 'jquery');
        $scripts->add( 'jquery', false, array( 'jquery-core' ), '1.12.4' );
    }
}
add_filter( 'wp_default_scripts', 'evolution_remove_jquery_migrate' );
endif;
Habe diesen Code entfernt
Nun passt es wieder mit dem Bilderraster.

Nochmals danke für deine Hilfe cloned!
Mit Zitat antworten
  #5 (permalink)  
Alt 05.08.2021, 10:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.207
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

das ist natürlich die schönere Lösung, wenn man die direkte Ursache für das Problem behebt
Mit Zitat antworten
  #6 (permalink)  
Alt 05.08.2021, 10:53
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 121
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
das ist natürlich die schönere Lösung, wenn man die direkte Ursache für das Problem behebt
Bin ganz deiner Meinung
dir noch einen schönen Tag
Mit Zitat antworten
  #7 (permalink)  
Alt 05.08.2021, 14:03
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.975
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Da musst da aber aufpassen, dass Änderungen im Plugincode bei einem update wieder überschrieben werden.
Mit Zitat antworten
  #8 (permalink)  
Alt 25.08.2021, 17:11
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 121
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von protonenbeschleuniger Beitrag anzeigen
Da musst da aber aufpassen, dass Änderungen im Plugincode bei einem update wieder überschrieben werden.
Bei dem Plugin handelt es sich um ein selbst erstelltes, welches verschiedene Code-Schnipsel enthält, die WordPress etwas sicherer und schneller machen.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus



Alle Zeitangaben in WEZ +2. Es ist jetzt 18:45 Uhr.