Add Featured Image Column

Přidá do přehledu příspěvků a stránek nový sloupec s detekcí doporučeného obrázku s možností jeho rozkliknutí a zobrazení v Modal okně.

function add_featured_image_column( $columns ) {
    $move_after     = 'title';
    $move_after_key = array_search( $move_after, array_keys( $columns ), true );
    $first_columns  = array_slice( $columns, 0, $move_after_key + 1 );
    $last_columns   = array_slice( $columns, $move_after_key + 1 );
    return array_merge(
        $first_columns,
        array(
            'featured_image' => __( 'Featured Image' ),
        ),
        $last_columns
    );
}

function display_featured_image_column( $column ) {
    if ( 'featured_image' === $column ) {
        global $post;
        $thumbnail_id = get_post_thumbnail_id( $post->ID );
        if ( $thumbnail_id ) {
            $full_url  = wp_get_attachment_image_url( $thumbnail_id, 'full' );
            $thumb_url = wp_get_attachment_image_url( $thumbnail_id, array( 300, 80 ) );
            $title     = get_the_title( $post->ID );
            echo '<a href="' . esc_url( $full_url ) . '" class="dd-fi-thumb"
                     data-title="' . esc_attr( $title ) . '"
                     data-full="' . esc_url( $full_url ) . '">';
            echo '<img src="' . esc_url( $thumb_url ) . '">';
            echo '</a>';
        }
    }
}

function dd_featured_image_lightbox_assets( $hook ) {
    if ( 'edit.php' !== $hook ) {
        return;
    }

    $css = "
    .dd-fi-thumb img {
        max-height: 80px;
        width: auto;
        cursor: zoom-in;
        border: 2px solid transparent;
        border-radius: 3px;
        transition: border-color .2s;
    }
    .dd-fi-thumb:hover img {
        border-color: #2271b1;
    }
    #dd-fi-dialog {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 999999;
        padding: 0;
        border: none;
        border-radius: 6px;
        background: rgba(0,0,0,.75);
        backdrop-filter: blur(3px);
        max-width: 100vw;
        max-height: 100vh;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        box-shadow: none;
    }
    #dd-fi-dialog[open] {
        display: flex;
    }
    #dd-fi-dialog figure {
        margin: 0;
        display: flex;
        flex-direction: column;
        background: #1e1e1e;
        border-radius: 6px;
        overflow: hidden;
        max-width: 90vw;
        box-shadow: 0 8px 40px rgba(0,0,0,.6);
    }
    #dd-fi-dialog figure img {
        max-width: 90vw;
        max-height: 80vh;
        object-fit: contain;
        display: block;
    }
    #dd-fi-dialog figcaption {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 8px 12px;
        color: #ccc;
        font-size: 13px;
    }
    #dd-fi-close {
        flex-shrink: 0;
        background: none;
        border: none;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        line-height: 1;
        padding: 0 4px;
        opacity: .7;
        transition: opacity .2s;
    }
    #dd-fi-close:hover { opacity: 1; }
    ";
    wp_add_inline_style( 'wp-admin', $css );

    $js = "
document.addEventListener('DOMContentLoaded', function () {

    const thumbs = document.querySelectorAll('.dd-fi-thumb');
    console.log('DD Lightbox: nalezeno thumbů:', thumbs.length);

    if ( ! thumbs.length ) {
        return;
    }

    const dialog = document.createElement('dialog');
    dialog.id = 'dd-fi-dialog';
    dialog.innerHTML = `
        <figure>
            <img id='dd-fi-img' src='' alt=''>
            <figcaption>
                <span id='dd-fi-caption'></span>
                <button id='dd-fi-close' title='Zavřít'>✕</button>
            </figcaption>
        </figure>
    `;
    document.body.appendChild(dialog);

    const img     = dialog.querySelector('#dd-fi-img');
    const caption = dialog.querySelector('#dd-fi-caption');

    function openDialog( url, title ) {
        img.src             = url;
        img.alt             = title;
        caption.textContent = title;
        dialog.setAttribute('open', '');
        dialog.style.display = 'flex';
        document.body.style.overflow = 'hidden';
        console.log('DD Lightbox: otevírám', url);
    }

    function closeDialog() {
        dialog.removeAttribute('open');
        dialog.style.display = 'none';
        document.body.style.overflow = '';
    }

    thumbs.forEach(function (a) {
        a.addEventListener('click', function (e) {
            e.preventDefault();
            openDialog( a.dataset.full, a.dataset.title );
        });
    });

    dialog.querySelector('#dd-fi-close').addEventListener('click', closeDialog);

    dialog.addEventListener('click', function (e) {
        if ( e.target === dialog ) {
            closeDialog();
        }
    });

    document.addEventListener('keydown', function (e) {
        if ( e.key === 'Escape' && dialog.hasAttribute('open') ) {
            closeDialog();
        }
    });
});
    ";
    wp_add_inline_script( 'jquery', $js );
}
add_action( 'admin_enqueue_scripts', 'dd_featured_image_lightbox_assets' );

// Příspěvky
add_filter( 'manage_posts_columns',       'add_featured_image_column' );
add_action( 'manage_posts_custom_column', 'display_featured_image_column' );
// Stránky
add_filter( 'manage_pages_columns',       'add_featured_image_column' );
add_action( 'manage_pages_custom_column', 'display_featured_image_column' );