Ask your WordPress questions! Pay money and get answers fast! (more info)

Load images from native gallery in slider

  • SOLVED

I am using [[LINK href="http://roots.io"]]Roots[[/LINK]] Starters Theme with the [[LINK href="http://bxslider.com/examples/custom-next-prev-selectors"]]BX Slider[[/LINK]]. The slider is working well except for a small css isues using

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


for HTML. CSS and JS is loaded and running.

What I need is this slider to load images from a WordPress Gallery I just add to the media library as there will not be pages associated to it for now. All slides will need a caption below them. I also need a shortcode to load them form the homepage.

So I think I need a WP_Query to load the gallery images and have an option to display them. There is a native solution to load galleries in WordPress using built in shortcode as I recall so I only need help with the query. As soon as that runs I can display the code on the home page between other content - mainly thumbnail images.

So what is the code to make this query work well with the BX Slider CSS and JS that can be loaded using WordPress native gallery images?

Answers (2)

2014-11-16

timDesain Nanang answers:

try the follow code to override native gallery with bxslider, then insert the gallery's shortcode into page/post


add_filter('use_default_gallery_style', '__return_false');
add_filter('post_gallery', 'wpq_wp_gallery', 1, 2);
function wpq_wp_gallery($empty, $attr){
$post = get_post();

if( ! empty( $attr['ids'] ) ) {
if( empty( $attr['orderby'] ) ) $attr['orderby'] = 'post__in';
$attr['include'] = $attr['ids'];
}

if( isset( $attr['orderby'] ) ) {
$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
if( !$attr['orderby'] ) unset( $attr['orderby'] );
}

extract(shortcode_atts(array(
'order' => 'ASC',
'orderby' => 'menu_order ID',
'id' => $post ? $post->ID : 0,
'captiontag' => '',
'include' => '',
'exclude' => '',
'columns' => '1'
), $attr, 'gallery'));


$id = intval($id);
if( 'RAND' == $order ) $orderby = 'none';

if( !empty($include) ) {
$_attachments = get_posts( array(
'include' => $include,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image',
'order' => $order,
'orderby' => $orderby
) );

$attachments = array();
foreach ( $_attachments as $key => $val ) {
$attachments[$val->ID] = $_attachments[$key];
}
}
elseif( !empty($exclude) ) {
$attachments = get_children( array(
'post_parent' => $id,
'exclude' => $exclude,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image',
'order' => $order,
'orderby' => $orderby
) );
}
else {
$attachments = get_children( array(
'post_parent' => $id,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image',
'order' => $order,
'orderby' => $orderby
) );
}

if( empty($attachments) )
return '';

if( is_feed() ) {
$output = "\n";
foreach ( $attachments as $att_id => $attachment )
$output .= wp_get_attachment_link($att_id, $size, true) . "\n";
return $output;
}

$output = '';
$output .= '<ul class="bxslider">';
foreach ( $attachments as $att_id => $attachment ) {
$output .= '<li><img src="'.wp_get_attachment_url( $att_id ).'" title="'.esc_attr($attachment->post_title).'" /></li>';
}
$output .= '</ul>';

return $output;
}

add_action('wp_enqueue_scripts', 'wpq_scripts_bxslider' , 999);
function wpq_scripts_bxslider() {
wp_enqueue_style('bxslider-css', 'http://bxslider.com/lib/jquery.bxslider.css', '', '4.1.2', true);
wp_enqueue_script('bxslider-js', 'http://bxslider.com/lib/jquery.bxslider.js', array('jquery'), '4.1.2', true);
}

add_filter('wp_footer', 'wpq_footer_bxslider', 9999);
function wpq_footer_bxslider() {
?>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true
});
});//jQuery(document)
</script>
<?php
}


rhand comments:

There is no need to enqueue the scripts as they are already added, minified and concatenated in the theme. First part of the code might still do the trick to work out the loaded of images from a WordPress image gallery and display them on home.

Should the code be added to functions.php or the homepage template? What is the shortcode I can use to load the slider where needed?


timDesain Nanang comments:

put the code in the theme's functions.php
then, put this one into homepage template:
<?php echo do_shortcode('[gallery columns="1" ids="5,6,7,8,9"]'); ?>
change 5,6,7,8,9 with the image ids


rhand comments:

Thanks. Working reallly well. Going through the code some more to understand all and dealing with CSS/HTML issues causing some minor display problems, but the gallery images are all loaded well. Will also check what happens if I add another gallery and I do NOT want to use the BX slider. I will need some tumbnails to display before and after the slider and I thought of two galleries for that as well.


rhand comments:

Yeah, all galleries are now turned into BX Galleries on home. But I would like to be able to choose which one. Will see what I can work out. If you have a tweak do let me know.

2014-11-16

Bob answers:

I think you need to use <em>get_post_gallery_images( $post )</em>
[[LINK href="http://codex.wordpress.org/Function_Reference/get_post_gallery_images"]]http://codex.wordpress.org/Function_Reference/get_post_gallery_images[[/LINK]]

using above function you can loop through all gallery images and create your <li> list

global $post;
$gallery = get_post_gallery_images( $post );

$image_list = '<ul>';

// Loop through each image in each gallery
foreach( $gallery as $image ) {

$image_list .= '<li>' . $image . '</li>';

}
$image_list .= '</ul>';


rhand comments:

Added a gallery to home. That is just loaded as a gallery. If I just leave your code only and add the gallery I see nothing loaded. That is because it seems your code does not print a gallery nor grab the first gallery I added to the homepage. Do tell me what I am missing here.


Bob comments:

It is not a full code my friend. It's just an idea how you can fetch gallery image and use it to make slider.


rhand comments:

Worked out your option a bit, but still partly stuck. See http://wordpress.stackexchange.com/questions/168613/load-gallery-images-with-title-on-homepage-bx-slider . Main issue is that smallest thumbnails are loaded. Other issue is that the title should be loaded below, but that should not be too hard.