web-dev-qa-db-fra.com

Comment dessiner les détails des médias pour la galerie Isotope avec Photoswipe

Je suis actuellement en train de créer une galerie Wordpress qui s’inspire directement de la médiathèque et incorpore Isotope et Photoswipe. En utilisant une version modifiée de this , j’ai ajouté avec succès les pièces jointes à un modèle de page, puis en limitais l’affichage à des catégories (avec des catégories pour les pièces jointes multimédia).

Mon problème est maintenant d'affiner l'affichage ...

Comme j'utilise wp_get_attachment_image dans ma fonction (pour que je puisse définir la taille de l'image), plutôt que wp_get_attachment_url, je ne parviens pas à utiliser la href. En plus de cela, je dois définir la taille de l'image complète dans le data-size de la href.

J'essaie également de dessiner le titre et la légende de l'image, ainsi que d'appliquer les catégories de chaque image en tant que classes à la variable div.

Voici le code que j'utilise:

function get_images_from_media_library() {
    $args = array(
        'post_type' => 'attachment',
        'post_mime_type' =>'image',
        'post_status' => 'inherit',
        'posts_per_page' => 25,
        'category_name' => 'artwork',
    );
    $query_images = new WP_Query( $args );
    $images = array();
    foreach ( $query_images->posts as $image) {
        $images[]= wp_get_attachment_image( $image->ID, 'full' );
    }
    return $images;
}

function display_images_from_media_library() {

    $imgs = get_images_from_media_library();
    $url = wp_get_attachment_url( $image->ID );
    $image_title = $attachment->post_title;
    $caption = $attachment->post_excerpt;
    $html = '<section class="isotope-wrap">
              <div class="isotope gallery" data-pswp-uid="1">
                <div class="isotope-sizer"></div>';

    foreach($imgs as $img) {
        $html .= '<div class="isotope-item"><figure>
                  <a href="' . $url . '" data-size="">' . $img . '</a>
                  <figcaption class="wp-caption-text"><h2>' . $image_title . '</h2>
                  <p>' . $caption . '</p></figcaption></figure></div>';
    }

    $html .= '</div>';

    return $html;

}

Enfin, j'essaie également de créer un groupe de filtres pour la galerie Isotope, en utilisant les catégories d'images comme étiquettes. Voici le code que j'ai jusqu'à présent, qui ne semble pas fonctionner car mes catégories ne comptent pas les images (toutes les catégories affichent un compte de 0):

$terms = get_terms('category', array('parent' => 'artwork'));
                      $count = count($terms);
                        if ( $count > 0 ){
                          foreach ( $terms as $term ) {
                            echo "<button type='button' class='btn btn-dark'  data-hover='" . $term->name . "' data-filter='." . $term->slug . "'>" . $term->name . "</button>\n";
                          }
                        }

Toute aide à ce sujet serait grandement appréciée, merci.

EDITJ'ai ajouté le code suivant:

function get_image_urls_from_media_library() {
    $args = array(
        'post_type' => 'attachment',
        'post_mime_type' =>'image',
        'post_status' => 'inherit',
        'category_name' => 'artwork',
    );
    $query_images = new WP_Query( $args );
    $urls = array();
    foreach ( $query_images->posts as $image) {
        $urls[]= wp_get_attachment_url( $image->ID );
    }
    return $urls;
}

et ajouté une foreach imbriquée, qui dessine une href valide. Malheureusement, cependant, il ne dessine que la première entrée de pièce jointe et toutes les images de la galerie sont liées à cette même première image. Les images sont également dupliquées 5 fois sur la page.

phpfunctionsimagesgallery
5
Ash

J'ai eu un scénario très similaire au vôtre. J'espère que ces notes peuvent aider.

1 - Lorsque vous interrogez une taxonomie personnalisée, wp_query requiert davantage d’informations. La référence du codex est ici. Les informations sont sous cette forme.

'tax_query' => array(
        array(
            'taxonomy' => 'people',
            'field'    => 'slug',
            'terms'    => 'bob',
        ),
    ),

Dans votre cas, je pense que la taxonomie est une "oeuvre d'art". J'ai trouvé que l'utilisation de la valeur de champ 'slug' est bonne; Je vous laisse le soin de savoir quel est votre mandat.

2 - Dans votre fonction révisée, vous avez supprimé le paramètre "posts_per_page". C'est votre choix, mais sachez que si vous ne le déclarez pas, WP-Query renverra un maximum de 10 enregistrements. Si vous attendez plus d'images, cela pourrait être la solution.

3 - Dans votre fonction " display_images_from_media_library ", la deuxième ligne est:

"$ url = wp_get_attachment_url ($ image-> ID);".

Dans ce cas, $ image est une variable non définie. Puisque $ image est une variable de votre fonction " get_images_from_media_library ", je vais supposer qu’à un moment donné, vous aviez une seule fonction pour obtenir les informations sur l’image, puis les afficher; mais lorsque vous divisez la fonction unique en deux, vous n'avez probablement pas remarqué cette ligne.

4 - Votre code pour créer les filtres commence par le niveau supérieur (le niveau parent) - c'est bien, mais je crois que les filtres sont en réalité les enfants et non les parents. Essentiellement, une autre ressource est requise (détails ci-dessous).

5 - En plus de ce qui précède, vous avez défini votre focus initial comme "URL de pièce jointe". Mais je suggère qu’il serait peut-être plus productif de se concentrer sur l’obtention de l’ID poste/pièce jointe auprès de WP_Query et de l’utiliser comme moyen d’obtenir tous les autres champs à afficher. En fait, si vous créez un tableau basé sur $ posts, vous obtiendrez automatiquement la légende et le titre en tant que sous-produit.

J'ai trouvé le suivant pour travailler. De toute évidence, vous devez substituer la taxonomie et le terme pertinents dans chacune des fonctions.

function gallery_get_images_from_media_library(){
    $g_myargs = array(
        'post_type' => 'attachment',
        'post_mime_type' =>'image/jpeg',
        'post_status' => 'inherit',
        'posts_per_page' => 25,
        'tax_query' => array(
            array(
                'taxonomy' => 'media_category',
                'field'    => 'slug',
                'terms'    => 'edition-covers',
            ),
        ),
    );
    $g_myquery_images = new WP_Query( $g_myargs );

    $g_posts = $g_myquery_images->posts;

    $html = '<section class="isotope-wrap">
              <div class="isotope gallery" data-pswp-uid="1">
                <div class="isotope-sizer"></div>';

    foreach ($g_posts as $g_img) {

        $url = wp_get_attachment_url($g_img->ID);

        $src = wp_get_attachment_image_src($g_img->ID,'full');

        $image_title = $g_img->post_title;

        $caption = $g_img->post_excerpt;

        $html .= '<div class="isotope-item"><figure>
                        <a href="'.$url.'">
                        <img src="'.$src[0] .'"></a>
                        <figcaption class="wp-caption-text">
                        <h2>' . $image_title . '</h2>
                        <p>' . $caption . '</p>
                        </figcaption></figure></div>';
    }

    $html .= '</div>';

return $html;
}

Pour afficher les images, je viens d'ajouter le code suivant dans ma page de modèle.

$imgs = gallery_get_images_from_media_library();
echo $imgs;

function gallery_make_filters(){

    // starting row of the filter = show all
    $gallery_filter_content = '<button class="button is-checked" data-filter="*">show all</button>'. PHP_EOL ;

    // get the cover terms for parent terms with a count>0
    $gallery_parentterms = get_terms( array(
    'taxonomy' => 'reviewcovers',
        'parent' => 0,
    'hide_empty' => false,
    ));

    // if there are parent covers with children
    if (is_array($gallery_parentterms)) {

        // break down for each parent
        foreach($gallery_parentterms as $gallery_obj) {

            // get the children covers 
            $gallery_childterms = get_terms( array(
                'taxonomy' => 'reviewcovers',
                'child_of' => $gallery_obj->term_id,
                'hide_empty' => true,
            ));

            // test for content of childterms
            if (is_array($gallery_childterms)) {

            // create a filter for each child.
            foreach($gallery_childterms as $gallery_object) {   

                    // build the filters for each non-zero child term
                    // filter is progressively incremented.
                    $gallery_filter_content .= '<button class="button" data-filter="'.".".$gallery_object->slug.'">'.$gallery_object->description.'</button>'. PHP_EOL;

                } // end of foreach-children array

            } // end of if children array

        } //end of foreach parent array

    }// end of if - parent array
    else 
    {
    echo 'no results';
    }

return $gallery_filter_content;

}

Pour afficher les filtres, insérez le code suivant dans le modèle de page.

$filters = gallery_make_filters();
echo $filters;

Enfin, et ne voulant pas être accusé de vous "apprendre à sucer des œufs", je constate que de temps en temps une ou plusieurs lignes de mon code ne fonctionnent pas comme prévu (probablement parce que je ne suis pas un très bon codeur). Dans tous les cas, lorsque cela se produit, je trouve utile d'afficher le contenu d'un tableau ou d'une variable afin de pouvoir déterminer exactement à quel endroit le code est annulé.

Ces quelques lignes sont mes piliers. Je viens de 'ne pas marquer les lignes', mettre à jour le nom du tableau/variable, sauvegarder, mettre à jour le site.
1 - pour un tableau

//echo "<pre>";print_r($gallery_childterms);echo "</pre>"; //DEBUG - a readable form of vardump
//echo "<p>end of print_r gallery_childterms</p>"; //DEBUG-this is so I know whether and what has printed.

2 - pour une variable

//echo "the src is ".$src."</br>"; // DEBUG - the line break is so that consecutive lines will make sense.
2
Tedinoz