Martin Hugo Martin Hugo - 2 months ago 15
jQuery Question

Slick Slider using landscape and portrait

I have created a slider with Wordpress that needs to return variable image counts based on whether the image is landscape or portrait. So what I did was to get Wordpress to retrieve the image dimensions and then based on the image orientation to assign a class to the post.

I then used the class to pair all the divs that are portrait into the same column name that the landscape images have.

The problem I have now is I am left with empty divs. I've been using other people's jQuery code and I am not sure if this may be conflicting with slick slider's count or if the slides are perhaps created before the script runs that splits the images. Anyhow, would really appreciates some insight into this. My code is below:



<div class="slider">
<span>
<span class="element half"><?php get_template_part( 'template-parts/content', 'single' ); ?></span>
</span>
<?php /*
* This is just a simple loop to display 7 attachments attached to a post or page in WordPress
* You can change 'medium' and 'thumbnail' to add sizes you have definied in your theme by the add_image_size function
* in WordPress
*/
?>
<?php
$thumb_ID = get_post_thumbnail_id( $post->ID );
$args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $post->ID, 'exclude' => $thumb_ID );
$attachments = get_posts( $args );
if ( $attachments ) {
foreach ( $attachments as $attachment ) {
$image_attributes = wp_get_attachment_image_src( $attachment->ID, 'medium' );
$wi = $image_attributes[1];
$he = $image_attributes[2];
if ($wi > $he) : $orient = 'full';
elseif ($wi < $he) : $orient = 'half';
endif;?>
<span>
<span class="element <?php echo $orient; ?>"><?php echo wp_get_attachment_image( $attachment->ID, 'large' ); ?></span>
</span>
<?php }
} ?>
</div>
<script>
jQuery( window ).load(function() {
// Convert the NodeList to an Array
var pairs = [];
jQuery('span.half').each(function(i, div) {
var i_over_2 = Math.floor(i / 2);
if (!pairs[i_over_2]) pairs[i_over_2] = jQuery();
pairs[i_over_2] = pairs[i_over_2].add(div);
});
jQuery.each(pairs, function(i, p) {
p.wrapAll("<span class='full'></span>");
});


});
jQuery(document).ready(function(){
jQuery('.slider').slick({
arrows: true,
infinite: false,
speed: 500,
fade: true,
cssEase: 'linear'
});
});
</script>





The dev site can be viewed here : dev site

Answer

Ok so I figured it out, when the array was moving the images around it was taking it out of one div and placing it in another - so instead of adding the divs Slick Slider needs directly it is now generated through the HTML. There was also an issue for pages that just have landscape images. So here is the solution for anyone who would like to add a slider where the first item is the content, the second is a background image, and the rest are either landscape or portrait.

<div class="slider">
			<div>	
				<div class="full">
					<div class="element half"><?php get_template_part( 'template-parts/content', 'single' ); ?></div>
					<div class="element half" style="background:url('<?php the_post_thumbnail_url();?>') no-repeat center center;background-size:cover;position:absolute;top:0;right:0;bottom:0;"></div>
				</div>
			</div>
<?php /*
  * This is just a simple loop to display 7 attachments attached to a post or page in WordPress
  * You can change 'medium' and 'thumbnail' to add sizes you have definied in your theme by the add_image_size function
  * in WordPress
  */
?>
    <?php
	$thumb_ID = get_post_thumbnail_id( $post->ID );
    $args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $post->ID, 'exclude' => $thumb_ID );
    $attachments = get_posts( $args );
    if ( $attachments ) {
        foreach ( $attachments as $attachment ) {
            $image_attributes = wp_get_attachment_image_src( $attachment->ID, 'medium' );
			$wi = $image_attributes[1];
			$he = $image_attributes[2];
			if ($wi > $he) 		:	$orient = 'landscape';
			elseif ($wi < $he) 	:	$orient = 'portrait';
			endif;?>
					<img src="<?php echo wp_get_attachment_image_url( $attachment->ID, 'large' ); ?>" class="element <?php echo $orient; ?>"/>		
        <?php } 
		} ?>
	</div>

<script>
  jQuery(document).ready(function() {
// Convert the NodeList to an Array
	var pairs = [];
	jQuery('.portrait').each(function(i, div) {
	  var i_over_2 = Math.floor(i / 2);
	  if (!pairs[i_over_2]) pairs[i_over_2] = jQuery();
	  pairs[i_over_2] = pairs[i_over_2].add(div);
  
	});
	jQuery.each(pairs, function(i, p) {
	  p.wrapAll("<div><div class='full'></div></div>");
	  
	});
	jQuery('.landscape').wrap("<div><div class='full'></div></div>");
});

	jQuery(document).ready(function(){
	jQuery('.slider').slick({
	  arrows: true,
	  infinite: false,
	  speed: 500,
	  fade: true,
	  cssEase: 'linear'
	});
});
  
  </script>