Mobile images zipper

Blog

Check Out Useful Squarespace articles here

Mobile images zipper

Often we use alternate text/image and image/text layouts and it looks cool on desktops. But when you''ll go to mobile, you probably want to see image and its description under, not on the top.

So there some CSS ways to fix with flex-boxes or CSS Grids.  But I'm simple man, I do not like all your new shiny trendy stuff, we will use JS for find alternate layout (where image is under text on mobiles/on the right hand on desktops) and just reappend columns in the right way.

 I'm simple man, I do not like all your new shiny trendy stuff and frameworks

I'm simple man, I do not like all your new shiny trendy stuff and frameworks

So here is quick code snippet which works for 2 columns in one row (.sqs-row>2*.sqs-col-*)  and with Image block in one column structure.  Inserting on different pages or using different selectors, you may use it for pages you need.  Try to resize this page and check code below.

 

Features Overview

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Sed a ligula quis sapien lacinia egestas. Donec eget risus diam. Vivamus sit amet semper lacus, in mollis libero. Mauris egestas at nibh nec finibus.

 
 
IMG_20170820_100637.jpg

Feature 1

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Mauris egestas at nibh nec finibus. Fusce at massa nec sapien auctor gravida in in tellus. Donec ac fringilla turpis. Mauris id fermentum nulla. Aenean eu justo sed elit dignissim aliquam.


Feature 2

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Vivamus a ante congue, porta nunc nec, hendrerit turpis. Maecenas non leo laoreet, condimentum lorem nec, vulputate massa. Nulla eu pretium massa. Vivamus a ante congue, porta nunc nec, hendrerit turpis. Maecenas non leo laoreet, condimentum lorem nec, vulputate massa.

And Some Table Here

CityPopulation, millionDensity, men/km2
New York8 537 6734 042 000
Los Angeles10 831 1003 198 000
IMG_20170820_100637.jpg

IMG_20170820_100637.jpg

Feature 3

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Nulla lectus ante, consequat et ex eget, feugiat tincidunt metus. Mauris id fermentum nulla. Integer tempus, elit in laoreet posuere, lectus neque blandit dui, et placerat urna diam mattis orci. In sit amet felis malesuada, feugiat purus eget, varius mi.

 
(function() {
        var body = Y.one('body');
        var sqsRows = false;
        var resizeEvent = null;

        function syncUI() {
            console.log('syncUI');
            doMobileAlternateBlocks();
        }

        function doMobileAlternateBlocks() {
            if (sqsRows && sqsRows.size()) {
                if (window.innerWidth < 641) {
                    sqsRows.filter('.alternate-row').each(function(row) {
                        if (row.one('.first-col')) {
                            row.prepend(row.one('.first-col'));
                        }
                    })
                } else {
                    sqsRows.filter('.alternate-row').each(function(row) {
                        if (row.one('.first-col')) {
                            row.append(row.one('.first-col'));
                        }
                    })
                }
            }
        }

        function activateAlternateColsInRow(rows) {
            rows.each(function(row) {
                var all_colls = row.all('.col');
                if (all_colls.size() === 2 && !row.one('.sqs-row') && all_colls.item(1).one('.image-block')) {
                    row.addClass('alternate-row');
                    all_colls.item(1).addClass('first-col');
                }
            });
        }

        Y.config.win.Squarespace.onInitialize(Y, function() {
            body = Y.one('body');
            if (body) {
                sqsRows = body.all('.sqs-layout .sqs-row');
                if (sqsRows.size()) {
                    activateAlternateColsInRow(sqsRows);
                    resizeEvent = Y.one(window).on('resize', syncUI);
                    syncUI();
                }
            }
        });
        Y.config.win.Squarespace.onDestroy(Y, function() {
            resizeEvent && resizeEvent.detach();
        });
    }
)();