Post list thumbnails reordering in small viewports

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
}

That’s all folks!