Thumbnails in Phoca Gallery

Hallo zusammen,

hat jemand eine Idee, wie ich die Thumbnails meiner Phoca Gallery responsiv mache?

Ich würde gerne, ähnlich wie beim Flexbox-Konzept, die Größe der Thumbnails dynamisch abhängig von der Bildschirmgröße anzeigen.

Also z.B. auf breiten Bildschirmen 4 Thumbnails, auf schmalen Smartphonedisplays 2 Thumbnails usw.

Ich nutze Phoca Gallery 6.1.0 und binde die Galerien mit dem Phoca Gallery Plugin (Version 6.0.0) ein. Für die Detailansicht nutze ich Photoswipe.

Kann ich das in den Phoca Gallery-Themes anpassen oder muss ich ein Override machen? Wenn ja in welcher Datei? in der Doku habe ich nichts dazu gefunden.

Über eine Tipp würde ich mich sehr freuen.

Hallo Benno, vielen Dank für deine schnelle und ausführliche Erklärung!

Es wäre nur schön, wenn die Thumbnails nicht auf die in den Optionen "Hartkodierten" Abmessungen beschränkt wären und sich bei größeren Bildschirmen entsprechend anpassen würden.

Um auf schmalen Handydisplays 2 Thumbnails nebeneinander anzuzeigen, habe ich unter Optionen > Miniaturbilder > Mittleres Bild: Breite 140px und Mittleres Bild: Höhe 140px eingestellt. Bei großen Bildschirmen sind die Thumbnails dann so "verloren".

Daher meine Idee mit dem Override.

Hallo Benno,

ich habe in meiner user.css folgenden Code ergänzt, damit ändern die Vorschaubilder ihre Größe dynamisch. Die mittelgroßen Miniaturbilder habe ich auf 500x500px gesetzt. Damit vermeide ich Leerräume bei Quer- und Hochkant-Bildern.

.pg-category-items-box {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    align-items: start;
}
.pg-category-items-box .pg-item-box {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    display: block;
    box-sizing: border-box;
}
.pg-category-items-box .pg-item-box figure {
    margin: 0;
}
.pg-category-items-box .pg-item-box-image {
    width: 100%;
    overflow: hidden;
    border-radius: 0.2rem;
}
.pg-category-items-box .pg-item-box-image img.pg-image {
    display: block;
    width: 100%;
    height: auto;
}
.pg-category-items-box figcaption {
    padding-top: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.3;
    text-align: center;
    word-break: break-word;
}
@media (min-width: 768px) {
    .pg-category-items-box {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 1200px) {
    .pg-category-items-box {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

Somit ist der Thread erledigt.