Support » Developing with WordPress » get_post_gallery in slider and joining gallery with content

  • Resolved kirasiris

    (@kirasiris)


    Hello so here is what I want. In the back-end of WordPress I sometimes like to create a gallery on pages or posts. So rather than displaying them as WordPress usually does (3-columns) I would like to use a bootstrap carousel to show them every time there is a gallery on the post. There is also a problem rather than showing all picture, it just shows the first one from the gallery, and I just tried several times playing with php etc and I still can not make it show me the second picture, or the rest if there are more.

    This is my code for the slider(is already inside the while):

    
    <!-- Carousel -->                   
    <?php
    if ( get_post_gallery() ) : $gallery = get_post_gallery( get_the_ID(), false ); ?>
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
    <?php
    echo "<li data-target='#carousel-example-generic' data-slide-to='0'></li>";
    echo "<li data-target='#carousel-example-generic' data-slide-to='1'></li>";
    echo "<li data-target='#carousel-example-generic' data-slide-to='2'></li>";
    ?>   
    </ol>
    <?php foreach( $gallery['src'] as $src ) : ?>
      	<?php echo "<div class='carousel-inner' role='listbox'>" ?>
        <?php echo "<div class='item active'>" ?>
        <img src="<?php echo $src; ?>" class='' alt='image 1' />
        <?php echo "</div>" ?>
        <?php echo "<div class='item'>" ?>
    	<img src="<?php echo $src; ?>" class='' alt='image 2' />
        <?php echo "</div>" ?>
    	<?php echo "</div>"  ?>
    <?php endforeach; ?>
    <?php echo "<a class='left carousel-control' href='#carousel-example-generic' role='button' data-slide='prev'><span class='glyphicon glyphicon-chevron-left' aria-hidden='true'></span><span class='sr-only'>Previous</span></a>" ?>
    <?php echo "<a class='right carousel-control' href='#carousel-example-generic' role='button' data-slide='next'><span class='glyphicon glyphicon-chevron-right' aria-hidden='true'></span><span class='sr-only'>Next</span></a>" ?>
    </div>
    <?php endif; ?>
    <!-- /Carousel -->
    

    I would like to ask for somthing else as well. Once the slider works as Im expecting, how would I make the post to show the gallery pictures just in the slider; it currently shows them in the slider and in the content of the post, and I dont want that. :/

    Sorry if I did not explain myself well, but English is not my native language.

    Thanks,
    Kevin.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    It seems there’s something wrong with how you’ve structured your HTML output so the carousel script thinks the first image is all there is to display. Carefully compare your HTML structure with the carousel documentation example, then adjust your PHP so that it matches.

    To prevent the original gallery shortcode from displaying, hook the ‘post_gallery’ filter and return anything but an empty string. What you return will replace the gallery shortcode on output. You could return your carousel output instead of doing so on your template. Then you can mix other content with the shortcode and the gallery will occur in the proper relative position instead of always in the same position. If you are happy with the template positioning, you could simply return ' ' (a single space) to suppress the shortcode output.

    If you do want to return your carousel output for the post_gallery filter, you’ll need to collect the output in a single variable instead of echoing out. Either adjust your code or utilize PHP’s output buffer capability.

    Thread Starter kirasiris

    (@kirasiris)

    Thanks man, but I already solved it. I actually changed the whole html and I pot most of the php on my functions.php file.
    Here are the codes that I used to make it work as I wanted:
    First one(you can put it on any file; content.php. single.php; whereever you need it)

    
    <!-- Carousel -->
    <?php if ( get_post_gallery() ) : $gallery = get_post_gallery( get_the_ID(), false ); ?>
    <div id="carousel-example-generic" class="carousel slide">
    <?php functions_indicators($post) ?>
    <!--<div class="carousel-inner">-->
    <?php function_slides($post) ?>
    <!--</div>-->
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
    </a>
    </div>
    <?php endif; ?>
    <!-- /Carousel -->
    

    Here is what you need to put in your functions.php file to make it work with no problem:

    
    // Slider function if a gallery is presented on a post or page
    function wp_get_attachment( $attachment_id ) {
    
        $attachment = get_post( $attachment_id );
        return array(
            'alt' => get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true ),
            'caption' => $attachment->post_excerpt,
            'description' => $attachment->post_content,
            'href' => get_permalink( $attachment->ID ),
            'src' => $attachment->guid,
            'title' => $attachment->post_title
        );
    }
    
    function functions_indicators() {
    $special_gallery = get_post_gallery( $post, false );
    $ids = explode( ",", $special_gallery['ids'] );
    $html = '<ol class="carousel-indicators">';
    foreach( $ids as $id ) {
        $link   = wp_get_attachment_url( $id );
        $class = ( $i == 0 ) ? 'active ' : '';
        $i++;
        $b=1;
        $html .= '<li data-target="#carousel-example-generic" data-slide-to="'.($i - $b).'" '. 'class="'.$class.'"></li>';
    } 
    $html .= '</ol>';
    echo $html;
    
    }
    
    function function_slides() {
    $special_gallery = get_post_gallery( $post, false );
    $ids = explode( ",", $special_gallery['ids'] );
    $html = '<div class="carousel-inner">';
    foreach( $ids as $id ) {
        $link   = wp_get_attachment_url( $id );
        $attachment_meta = wp_get_attachment($id);
        $class = ( $i == 0 ) ? 'active ' : '';
        $i++;
        $html .= '<div class="item '.$class. '"><img src="' . $link . '">' . '<div class="carousel-caption"><h4>'.$attachment_meta['title'].'</h4><p>'.$attachment_meta['description']. '</p></div></div>';
    } 
    $html .= '</div>';
    echo $html;
    }
    

    and lastly if you dont want the gallery to be shown twice (the carousel itself and the default WordPress gallery). You just need to put this on your functions.php file as well:

    
    // Join everythin inside content
    add_filter('the_content', 'strip_shortcodes');
    
    Moderator bcworkz

    (@bcworkz)

    No problem. Thanks for returning with your solution!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘get_post_gallery in slider and joining gallery with content’ is closed to new replies.