Load Gallery Images with Title on Homepage BX Slider

Question

I need to display all thumbnails of a gallery on the homepage using the Roots theme with links to one page with a shortcode. The gallery has to be loaded as list items using BX Slider's jQuery to create a carousel. HTML code:

<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>

The slider by itself is already working. Now I want to load images from the home gallery with titles beneath the images as well

Been at it for a while and I have this code now:

//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'); 

The issue is that it is not shown properly. Images are loaded but they are shown as tiny thumbs while they should cover the width of the slider. And I still need the title to load. How to show the images with titles beneath the slides and link them all to the same page and load them with the shortcode with proper fiting size and title below it?

Answer 1

I would recommend using this plugin instead: https://wordpress.org/plugins/cpt-bootstrap-carousel/

It works well with the built-in Twitter Boostrap 3 in Roots.oi theme (Responsive) and it comes along with a CPT named carousel.

Looking in your code:

The get_post_gallery_images() function only returns the url and it doesn't contain any Gallery Image Title content.

Answer 2

You can use "rilwis/meta-box " for this .

For dynamic slider use this snippet,

                <?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>";
}

            ?>