Post list thumbnails reordering in small viewports

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

3.1.* 3.2.*

Nov 2014 update: Tested with WordPress 4.0 and Customizr 3.2.5 . Still works if you choose to display thumbnails on the left/right. Will not do anything if you display them on top/bottom. Basically ’cause the aim of this script, as you can see in the example pictures, is to avoid the alternation top/bottom, which could be unaesthetic. So if you use to display them on top or bottom, probably you already don’t select the “Alternate thumbnail/content” option, if not you should 😛

May 2014 update: Now works also on window resize


As you know Customizr, by default, alternates thumbnails and articles content when displaying post list.

You have already learned how to change this behavior here .

But what if you wanted to maintain the alternation except when the content of the article and the thumbnail are arranged one below the other (e.g. in small width devices)?

What you need to achieve that is adding the following code in your child-theme functions.php

add_action('wp_footer', 'postlist_smallwidth_disable_alternate_layout');
function postlist_smallwidth_disable_alternate_layout(){
$tb_position = "after"; /* "before" article-content or "after" article-content */
?>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            ! function ($) {

                var $thumbnails = $('article section[class*="tc-thumbnail"]'),
                    $contents = $('article section[class*="tc-content"]').not(".span12"),
                    reordered = false;

                //reordering function
                function reordering(reorder){
                    var position = '<?php echo $tb_position; ?>',
                    iterator = ( (position == "before" && reorder) || ( position != "before" && ! reorder ) ) ? $thumbnails : $contents;
			
                    reordered = reorder;
			
                    iterator.each(
                        function(){
                            if ( $(this).next().is('section') || (!reorder && ! $(this).parent().hasClass('reordered')) )
                                return;

                            $(this).prependTo($(this).parent());
                            $(this).parent().toggleClass('reordered');
                        }
                    );
                }

                function reorder_or_revert(){
                    if ( $thumbnails.width() == $thumbnails.parent().width() && ! reordered )
                        reordering(true);
                    else if ( $thumbnails.width() != $thumbnails.parent().width() && reordered )
                        reordering(false);
                }

                reorder_or_revert();

                $(window).resize(function () {
                    //call the function with a timeout of 500 ms when resing window.
                    setTimeout(reorder_or_revert, 500);
                }); 
             }(window.jQuery);
         });
    </script>
<?php
}

 

Normal behavior

pl-normal

Running the script

plt-reordered


That’s all folks!

 

Where to copy/paste this code? => in your functions.php file. We strongly recommend you create a child theme. Download a start-up child theme here.

Remember: you shouldn’t edit the theme’s functions.php.

Everything you need to know about child theme with Customizr here.

3 thoughts on “Post list thumbnails reordering in small viewports”

Comments are closed.