WordPress: Wie style Galerie Shortcode in Mauerwerk Layout?

Question

Ich versuche, ein Mauerwerk Layout möglich durch den Einsatz von (platzieren diese in dem Seiteninhalt Abschnitt) zu machen:

[gallery size="large" link="file" columns="4" ids="1,2,3"]

Dokumentation: https://codex.wordpress.org/Gallery_Shortcode

Aber auch wenn dies der gewünschte Effekt ist:

das ist, was passiert, hält:

Wesentlichen, wenn es einige CSS oder sogar javascript war, die hinzugefügt werden, um die Galerie zu verwandeln, dies zu tun, wäre fantastisch.

zur Zeit Mein Code sieht wie folgt aus:

<div class="gallery-template"> 
    the_content(); 
</div> 

Und meine zusätzliche CSS ist:

.gallery-template img{ 
    max-width: 100%; 
    height: auto; 
    border: none !important; 
} 
.gallery-item{ 
    width: 33% !important; 
    margin: 0; 
    margin-top: 0 !important; 
} 

Das genau tut nichts, das Problem der, wenn ein neuer Abschnitt zu lösen von Dritteln beginnt, um die padding und margin zwischen den "Zeilen" loszuwerden.

Wenn die [gallery] Short oben erwähnt gemacht wird, wie es in dem DOM gemacht hat ist wie so:

<div class="gallery-template"> 
    <div id="gallery-1" class="gallery"> 
     <dl class="gallery-item">...</div> 
     <dl class="gallery-item">...</div> 
     <dl class="gallery-item">...</div> 

     // And so on.. 
    </div> 
</div> 

Und die in dem DOM gemacht CSS ist:

#gallery-1 { 
    margin: auto; 
} 
#gallery-1 .gallery-item { 
    float: left; 
    text-align: center; 
} 
.gallery-item { 
    width: 33% !important; 
    margin: 0; 
    margin-top: 0 !important; 
} 

jemand umgesetzt hat eine Lösung für diese Art von Hindernis noch?

Auch ich versuche, von einem externen Plugin zu verzichten.

Answer 1

OK! Ich konnte das zum Laufen bringen. Hier ist meine Lösung:

Zuerst war es notwendig, die Galerie shortcode zu verbieten, um externe Stile in die Seite zu injizieren.So in der funtions.php Datei, fügte ich hinzu:

add_filter('use_default_gallery_style', '__return_false'); 

Als nächst ich die Spaltenangabe in dem Short Tag nahm ich in der Seite enthalten, etwa so:

[gallery size="large" link="file" ids="1,2,3"] 

Statt:

[gallery size="large" link="file" columns="4" ids="1,2,3"] 

Schließlich legte ich diese CSS in meine Seite (einschließlich der column-count):

.gallery-template{margin:auto; column-count:4;column-gap:0;} 
.gallery-template img{max-width:100%;height:auto;border:none !important;} 
.gallery-item{margin:0;display:inline-block;width:100%;width:100%;margin-top:0;} 

EXTRA: Wenn Sie schauen, diese reaktionsfähiger zu machen, fügen Sie einfach die @media-Tags, wo Sie Ihre bevorzugten Stützpunkte werden soll, und in der neuen Anzahl der Spalten, etwa so:

@media screen and (max-width:1200px) { 
    .gallery-template{column-count:3;} 
} 

@media screen and (max-width:772px) { 
    .gallery-template{column-count:2;} 
} 

Answer 2

Dies ist in der Tat eine CSS-Frage. Ich würde vorschlagen, flexbox auszuprobieren. Eine ganze Lösung für Sie zu erstellen ist ein wenig schwierig, da Sie Ihren HTML-Code nicht veröffentlicht haben. Wenn dieser Code also nicht funktioniert, versuchen Sie, Ihren Beitrag so zu bearbeiten, dass er einen Teil davon enthält.

#gallery-1 { 
    display: flex; 
    flex-direction: column; 
} 

.gallery-item { 
    flex: 0 1 33%; 
    margin: 0; 
    margin-top: 0 !important; 
}