Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Isotope alignment and sorting problem

I'm using a Wordpress template (Studiofolio) that has Isotope integrated in it. When the gallery page (http://roanandblack.com/artists/) is displayed the sequence of artists toward the end is out of order. As the window size changes there are sometimes blank spaces. The default sequence is "original order" and it appears the sort function from Isotope was not included in the template.

Here's the relevant section of code from the template:

    if ($gallery_mb->get_the_value('gallery_slidehow')) { ?>

    <div class="gallery_element featured">
        <div class="slideshow progressive">
            <div class="flexslider<?php if ($gallery_mb->get_the_value('sshow_effect')) echo ' ' . $gallery_mb->get_the_value('sshow_effect'); ?><?php if ($gallery_mb->get_the_value('sshow_thumbs')) echo ' wthumbs' ?><?php if ($gallery_mb->get_the_value('sshow_loop')) echo ' loop'; ?><?php if ($gallery_mb->get_the_value('sshow_auto')) echo ' autoplay'; ?>" data-aspect="<?php if ($gallery_mb->get_the_value('sshow_ratio')) echo $gallery_mb->get_the_value('sshow_ratio'); ?>" data-mheight="<?php if ($gallery_mb->get_the_value('sshow_min')) echo $gallery_mb->get_the_value('sshow_min'); ?>" data-offset="<?php if ($gallery_mb->get_the_value('sshow_offset')) echo $gallery_mb->get_the_value('sshow_offset'); ?>">
                <ul class="slides">
                    <?php
                      if (is_array($mposts)) {
                          $counter = 0;
                          foreach($mposts as &$mpost) { 
                              if (isset($mpost['imgurl'])) {
                                  $imgID = $mpost['imgurl'];
                                  if (isset($mpost['caption'])) $intext = '<div class="thumb-overlay-icon"><div class="thumb-overlay-inner"><div class="thumb-overlay-content"><h1>'.$mpost['caption'].'</h1></div></div></div>';
                                  else $intext = '<div class="thumb-overlay-icon"><div class="thumb-overlay-inner"><div class="thumb-overlay-content"></div></div></div>';
                                  if (isset($mpost['video'])) echo '<li data-thumb="'.wp_get_attachment_thumb_url( $imgID).'"><a href="'.$mpost['video'].'" class="fresco video" data-fresco-group="videogr'.$counter.'"><div class="slide">'.wp_get_attachment_image( $imgID, 'full', 0).$intext.'</div></a></li>';
                                  else if (isset($mpost['link'])) echo '<li data-thumb="'.wp_get_attachment_thumb_url( $imgID).'"><a href="'.$mpost['link'].'"><div class="slide">'.wp_get_attachment_image( $imgID, 'full', 0).$intext.'</div></a></li>';
                                  else echo '<li data-thumb="'.wp_get_attachment_thumb_url( $imgID).'"><div class="slide">'.wp_get_attachment_image( $imgID, 'full', 0).$intext.'</div></li>';
                              }
                              $counter++;
                          }
                      }
                    ?>
                </ul>
            </div>
        </div>
    </div>

<?php } else { ?>

    <div class="container-isotope">
    <div id="isotope" class="<?php  ?>">
    <?php
    // loop a set of fields

    $total_posts = count($mposts);
    $load_more = is_numeric($gallery_mb->get_the_value('loadmore')) ? $gallery_mb->get_the_value('loadmore') : -1;

    if (is_front_page()) $paged = (get_query_var('page')) ? get_query_var('page') : 1;
    else $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

    if ($load_more > 0) $mposts = array_slice($mposts, ($paged - 1) * $load_more, $load_more);

    if ($gallery_mb->get_the_value('lightbox_thumbnail')) $thumbs = ' data-fresco-group-options="thumbnails:true"';
    else $thumbs = '';

    if (is_array($mposts)) {

    foreach($mposts as &$mpost) { 
        if (isset($mpost['size'])) $getsize = $mpost['size']; 
        else $getsize = 'width2'; 

        $provider = '';
        if (isset($mpost['video'])) $provider = (find_oembed($mpost['video']));
        if(strpos(trim($provider), ' ') !== false) $provider = 'unknown';
    ?>
        <div class="progressive element <?php echo $getsize; ?>">
            <div class="inside">
                <?php 
                    if (isset($data['gallery_caption']) && $data['gallery_caption']) {
                ?><div class="entry-thumb<?php if (!$mpost['caption']) echo ' wplus'; ?>" data-overlay="<?php if ($mpost['caption']) echo $mpost['caption']; else echo '&#xe072;'; ?>"><?php     
                    } else {
                ?><div class="entry-thumb wplus" data-overlay="<?php echo '&#xe072;'; ?>"><?php     
                    }
                        if (isset($mpost['imgurl'])) {
                            $imgID = $mpost['imgurl'];
                            $image_attributes = wp_get_attachment_image_src( $imgID, 'full' );
                            $imgurl = $image_attributes[0];
                            $urlquery = parse_url($imgurl);
                            if (isset($urlquery['query'])) {
                                parse_str($urlquery['query'], $output);
                                if (isset($output['resize'])) {
                                    $imgsize = explode(",", $output['resize']);
                                    $image_attributes[1] = $imgsize[0];
                                    $image_attributes[2] = $imgsize[1];
                                }
                            } ?>    
                        <div class="dummy" style="margin-top: <?php echo get_dummy_height($image_attributes[1],$image_attributes[2]); ?>%"></div>
                        <?php } else $imgID = '';

                        if (isset($mpost['caption'])) $caption = $mpost['caption']; 
                        else $caption = '';

                        if (isset($mpost['panning'])) $panning = ' data-fresco-options="fit: 'width'"';
                        else $panning = '';

                        $alt = (isset($mpost['alt'])) ? $mpost['alt'] : basename($image_attributes[0]);

                        if (isset($mpost['video'])) {

                            if ($imgID && ($provider == 'Vimeo' || $provider == 'Youtube')) { ?>

                            <a href="<?php echo $mpost['video']; ?>" class="fresco video pushed" data-fresco-group='<?php echo( basename(get_permalink()) ); ?>' data-fresco-caption="<?php echo $caption; ?>"<?php echo $thumbs; ?>><?php echo wp_get_attachment_image( $imgID, get_image_size($getsize), 0, array('class' => "attachment-full fresco") ); ?><div class="video"></div></a>

                            <?php } else {
                                $source = $mpost['video'];
                                $embed_code = wp_oembed_get($source);

                                if ($embed_code) $embedded = $embed_code;
                                else $embedded = do_shortcode($source);

                                if (isset($mpost['link'])) echo '<a href="'.$mpost['link'].'" class="video">'.$embedded.'<div class="video link"></div></a>';
                                else echo $embedded;
                            }

                        } else { 

                            if (isset($mpost['link'])) echo '<a href="'.$mpost['link'].'" class="video pushed">'.wp_get_attachment_image( $imgID, get_image_size($getsize), 0, array('class' => "attachment-full") ).'<div class="video link"></div></a>';
                            else {
                        ?>

                        <a href="<?php echo $image_attributes[0]; ?>" class="fresco pushed" data-fresco-group='<?php echo( basename(get_permalink()) ); ?>' data-fresco-caption="<?php echo $caption; ?>"<?php echo $panning; ?><?php echo $thumbs; ?>><?php echo wp_get_attachment_image( $imgID, get_image_size($getsize), 0, array('class' => "attachment-full fresco") ); ?></a> 
                    <?php  }
                        } 
                    ?>

                </div>
            </div>
        </div>

    <?php }
    } ?>    
    </div>
    <!-- isotope -->
</div>
<!-- container-isotope -->

Please let me know if you need more information

User Gravatar

dburdick

Posted Jun 28 2014 13:29 UTC

$25


  • Assigned To Gaby
  • Solved
  • isotope
    wordpress
    studiofolio
  • 1662 Views

5 Replies


Isotope isn't initializing properly - check your dev tools console. Line 323 of the page source code contains the init for Isotope: var $container = $('#container').imagesLoaded( function() { ... but jQuery isn't initialized at this point, so it throws an undefined function error.

var $container = $('#container').imagesLoaded( function() {

should instead be

var $container = jQuery('#container').imagesLoaded( function() {

However, this initialization doesn't appear in the code you have listed above. It is likely in a theme function file, template file, or a plugin on the site.

Update: the Isotope script is wrapped inside http://roanandblack.com/wp-content/themes/studiofolio/assets/js/plugins.js so this is almost certainly going to be in the theme files somewhere.

Update 2: this particular instance actually has nothing to do with your problem. The Isotope on that page is initialized properly from within http://roanandblack.com/wp-content/themes/studiofolio/assets/js/main.js

User Gravatar

emcniece

Posted Jun 28 2014 13:36 UTC

Thanks Emcniece I had added that line in the theme's custom javascript window under theme options. I have now removed it. I tried adding var $container = jQuery('#container').imagesLoaded( function() { to that window but it broke the page.

User Gravatar

dburdick

Posted Jun 28 2014 13:44 UTC

I don't really have a solution but I noticed the HTML elements are in the correct order, and the CSS looks the same on all elements. I don't think you have a problem with not having a sort function, as all the elements are ordered correctly. Maybe jQuery is messing something up ;)

User Gravatar

littlethoughts

Posted Jun 28 2014 14:10 UTC

The problem is with the "Angie Renfro" item. Its image is not square so by the resize of width:100% that you apply through CSS (combined with the height:auto applied to img tags from bootstrap), you lose the width/height applied through the attributes.

That image is originally 600x595 and when scaled down it will not become a correct square. That makes isotope treat it as extending down on its column, and so moves the other elements around it.

You need to either crop the image to a square, or wrap the images in a square container with overflow:hidden so that the image size cannot throw off the calculations of isotope.

You can convert the a tag in there to a square container and fix the issue by adding the following css

.isotope-item a {
    display: block;
    overflow: hidden;
    padding-top: 100%;
    position:relative;
}

and updating

.entry-thumb img {
    top: 0; /*ADD THIS LINE*/
    position: absolute; /*ADD THIS LINE*/
    transform: scale(1);
    transition: all 0.3s ease-in-out 0s;
    z-index: 1;
}
User Gravatar

Gaby

Posted Jun 28 2014 16:00 UTC

Solution

This didn't solve your task? Get your own custom solution.

Thank you, should have known it was operator error on my part.

User Gravatar

dburdick

Posted Jun 29 2014 8:51 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions