Masonry View Code

[donsenilo]

I created this Code (with a little Help of A.I.) to change the Appearance of the Thumbnails.
It works and looks good (for me), so maybe someone would find it useful.

I created a new Theme using the water_drop as Source. Here is my Site if you wanna have a look: https://myasa.eu/.

This Code goes at the End of the theme.php (but before the //EOF):

Code Select Expand

/******************************************************************************
 ** Section <<<theme_display_thumbnails>>> - ABSOLUT KRISENSICHERES MASONRY LAYOUT
 ******************************************************************************/
function theme_display_thumbnails(&$thumb_list, $nbThumb, $album_name, $aid, $cat, $page, $total_pages, $sort_options, $display_tabs, $mode = 'thumb', $date = '')
{
    global $CONFIG;

    if ($nbThumb == 0) {
        theme_no_img_to_display($album_name);
        return;
    }

    // 1. Start des Masonry-Containers
    echo '<div class="cpg_masonry_container">';

    // 2. Loop durch alle Bilder
    foreach ($thumb_list as $thumb) {
        echo '<div class="cpg_masonry_brick">';
       
        // KRISENSICHERER LINK-BAU: Wir generieren die displayimage.php URL direkt aus der Bild-ID (pid)
        if (!empty($thumb['pid'])) {
            $image_url = "displayimage.php?album=" . $aid . "&amp;pid=" . $thumb['pid'];
            echo '<a class="cpg_masonry_link" href="' . $image_url . '">' . $thumb['image'] . '</a>';
        } else {
            // Fallback, falls keine PID existiert (gibt zumindest das Bild aus)
            echo $thumb['image'];
        }
       
        // Bildunterschrift (Dateiname, Bewertungen etc.)
        if (!empty($thumb['caption'])) {
            echo '<div class="cpg_caption">' . $thumb['caption'] . '</div>';
        }
       
        // Admin-Knöpfe für Bearbeiten/Löschen (falls eingeloggt)
        if (!empty($thumb['admin_menu'])) {
            echo '<div class="cpg_admin_menu">' . $thumb['admin_menu'] . '</div>';
        }
       
        echo '</div>';
    }

    echo '</div>';

    // 3. Seitennummerierung (Pagination)
    if ($display_tabs && $total_pages > 1) {
        echo '<div class="cpg_pagination">';
        theme_display_video_tabs($total_pages, $page, $mode);
        echo '</div>';
    }
}This goes into the style.css:

Code Select Expand

/* Setzt umschließende System-Tabellen vollständig zurück */
.thumbnails,
.thumbnails > table,
.thumbnails > table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

/* Der Hauptcontainer erzeugt das Spalten-Layout */
.cpg_masonry_container {
    display: block !important;
    column-count: 4 !important;
    column-gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Jede einzelne Kachel */
.cpg_masonry_brick {
    display: inline-block !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    break-inside: avoid !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-radius: 4px;
}

/* Der neue, direkte Link umschließt das Bild perfekt */
a.cpg_masonry_link {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    cursor: pointer !important;         /* Erzwingt das Hand-Symbol */
    text-decoration: none !important;
}

/* Das Bild innerhalb des Links zentrieren */
a.cpg_masonry_link img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    border: none !important;
}

/* Bildtitel und Beschreibung */
.cpg_caption {
    margin-top: 10px !important;
    font-size: 11px !important;
    color: #555 !important;
    line-height: 1.4 !important;
}

/* Admin-Menü falls eingeloggt */
.cpg_admin_menu {
    margin-top: 10px !important;
    font-size: 10px !important;
}

/* RESPONSIVE STEUERUNG */
@media (max-width: 1200px) { .cpg_masonry_container { column-count: 3 !important; } }
@media (max-width: 768px)  { .cpg_masonry_container { column-count: 2 !important; } }
@media (max-width: 480px)  { .cpg_masonry_container { column-count: 1 !important; } }