WordPress : Charger les images de la galerie avec le titre sur le curseur BX de la page d’accueil

Publié par Jean-Michel le 7 novembre 2022

J’ai besoin d’afficher toutes les vignettes d’une galerie sur la page d’accueil en utilisant le thème Roots avec des liens vers une page avec un shortcode. La galerie doit être chargée en tant qu’éléments de liste à l’aide de jQuery de BX Slider pour créer un carrousel. Code HTML:

<ul class="bxslider">

  <li><img src="http://placehold.it/750x150" /></li>

  <li><img src="http://placehold.it/750x150" /></li>

  <li><img src="http://placehold.it/750x150" /></li>

  <li><img src="http://placehold.it/750x150" /></li>

</ul>

Le curseur par lui-même fonctionne déjà. Maintenant, je veux charger des images de la galerie d’accueil avec des titres sous les images également

J’y suis depuis un moment et j’ai ce code maintenant:

//http://codex.wordpress.org/Function_Reference/get_post_gallery_images
    function pw_show_gallery_images( $content ) {
        global $post;
        // Only do this on singular items
        if( ! is_singular() )
            return $content;
        // Make sure the post has a gallery in it
        if( ! has_shortcode( $post->post_content, 'gallery' ) )
            return $content;
        // Retrieve the first gallery in the post
        $gallery = get_post_gallery_images( $post );
        $image_list = '<ul class="bxslider">';
        // Loop through each image in each gallery
        foreach( $gallery as $image ) {

            $image_list .= '<li><a href="' . $image . '"><img src="' . $image . '" /></a></li>';
        }
        $image_list .= '</ul>';

return $image_list;
     }
//http://codex.wordpress.org/Function_Reference/add_shortcode
     function footag_func( $atts ) {
          return "foo = {$atts['foo']}";
     }
     add_shortcode('footag', 'pw_show_gallery_images');

Le problème est qu’il ne s’affiche pas correctement. Les images sont chargées mais elles sont affichées sous forme de petits pouces alors qu’elles doivent couvrir la largeur du curseur. Et j’ai encore besoin que le titre se charge. Comment afficher les images avec des titres sous les diapositives et les lier toutes à la même page et les charger avec le shortcode avec la taille et le titre appropriés en dessous ?

Solution n°1 trouvée

Vous pouvez utiliser « rilwis/meta-box » pour cela.

Pour le curseur dynamique, utilisez cet extrait,

                <?php 
                $images = rwmb_meta( 'gallery', 'type=image' );
foreach ( $images as $image )
{
echo "<a href='{$image['']}' title='{$image['title']}' rel='thickbox'><img src='{$image['full_url']}'  alt='{$image['alt']}' /></a>";
}

            ?>

Solution n°2 trouvée

Je recommanderais plutôt d’utiliser ce plugin : https://wordpress.org/plugins/cpt-bootstrap-carousel/

Il fonctionne bien avec le thème Twitter Boostrap 3 intégré dans Roots.oi (Responsive) et il est accompagné d’un carrousel nommé CPT.

Regarde dans ton code :

La fonction get_post_gallery_images() ne renvoie que l’URL et ne contient aucun contenu de titre d’image de galerie.

Solution n°3 trouvée