Slick Slider mit Querformat und Hochformat

Question

Ich habe einen Schieberegler mit Wordpress erstellt, die variable Bildanzahl basierend darauf zurückgeben muss, ob das Bild Querformat oder Hochformat ist. Also habe ich Wordpress dazu gebracht, die Bildmaße abzurufen und dann basierend auf der Bildorientierung dem Beitrag eine Klasse zuzuordnen.

Ich habe dann die Klasse verwendet, um alle divs, die im Hochformat sind, in den gleichen Spaltennamen zu paaren, den die Landschaftsbilder haben.

Das Problem, das ich jetzt habe, ist, dass ich mit leeren divs übrig bin. Ich habe den jQuery-Code anderer Leute verwendet und bin mir nicht sicher, ob dies mit der Anzahl der Slick-Schieberegler in Konflikt steht oder ob die Folien möglicherweise erstellt werden, bevor das Skript ausgeführt wird, das die Bilder aufteilt. Wie auch immer, ich würde wirklich einen Einblick in diese Sache zu schätzen wissen. Mein Code ist unten:

\t <div class="slider"> 
 
\t \t \t <span> 
 
\t \t \t \t <span class="element half"><?php get_template_part('template-parts/content', 'single'); ?></span> 
 
\t \t \t </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 
 
\t $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'); 
 
\t \t \t $wi = $image_attributes[1]; 
 
\t \t \t $he = $image_attributes[2]; 
 
\t \t \t if ($wi > $he) \t \t : \t $orient = 'full'; 
 
\t \t \t elseif ($wi < $he) \t : \t $orient = 'half'; 
 
\t \t \t endif;?> 
 
\t \t \t \t <span> 
 
\t \t \t \t \t <span class="element <?php echo $orient; ?>"><?php echo wp_get_attachment_image( $attachment->ID, 'large'); ?></span> \t \t 
 
\t \t \t \t </span> 
 
     <?php } 
 
\t \t } ?> 
 
\t </div> 
 
<script> 
 
    jQuery(window).load(function() { 
 
// Convert the NodeList to an Array 
 
\t var pairs = []; 
 
\t jQuery('span.half').each(function(i, div) { 
 
\t var i_over_2 = Math.floor(i/2); 
 
\t if (!pairs[i_over_2]) pairs[i_over_2] = jQuery(); 
 
\t pairs[i_over_2] = pairs[i_over_2].add(div); 
 
\t }); 
 
\t jQuery.each(pairs, function(i, p) { 
 
\t p.wrapAll("<span class='full'></span>"); 
 
\t }); 
 

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

Die Entwickler-Website kann hier angesehen werden: dev site

Answer 1

Ok, so habe ich es aus, wenn die Anordnung der Bilder um es in Bewegung war, wurde es unter aus einem div und platziere es in einem anderen - also anstatt die divs zu addieren, die Slick Slider direkt benötigt, wird es jetzt durch das HTML generiert. Es gab auch ein Problem für Seiten, die nur Landschaftsbilder enthalten. Also hier ist die Lösung für jeden, der einen Schieberegler hinzufügen möchte, bei dem das erste Element der Inhalt ist, das zweite ein Hintergrundbild und der Rest entweder Querformat oder Hochformat.

<div class="slider"> 
 
\t \t \t <div> \t 
 
\t \t \t \t <div class="full"> 
 
\t \t \t \t \t <div class="element half"><?php get_template_part('template-parts/content', 'single'); ?></div> 
 
\t \t \t \t \t <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> 
 
\t \t \t \t </div> 
 
\t \t \t </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 
 
\t $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'); 
 
\t \t \t $wi = $image_attributes[1]; 
 
\t \t \t $he = $image_attributes[2]; 
 
\t \t \t if ($wi > $he) \t \t : \t $orient = 'landscape'; 
 
\t \t \t elseif ($wi < $he) \t : \t $orient = 'portrait'; 
 
\t \t \t endif;?> 
 
\t \t \t \t \t <img src="<?php echo wp_get_attachment_image_url($attachment->ID, 'large'); ?>" class="element <?php echo $orient; ?>"/> \t \t 
 
     <?php } 
 
\t \t } ?> 
 
\t </div> 
 

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

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