Project Thumbnail Grid: 1 column to 2 column switch / transition

[Jens]

Using the Project Thumbnail Grid I would like to display a button in a row above the grid that will switch the number of columns being used between single and double.

I tried to identify the element that defines the number of rows but wasn't able to do so so far. If you could point me into the right direction that would be lovely.

In case you feel this will be very complicated to achieve please also let me know. I am not a huge expert with web stuff but I get by.

[arminunruh]

there is no easy way to do this. but i coded it for you:
https://capture.dropbox.com/SNz1hUhfA7xI09IM

there is no one single element that defines the number of columns in a row.
basically the div carries a data-config object that contains all the layout info for desktop, tablet, phone versions of the grid:

create a text element in the gridder (+text), click the <> button in the texteditor for the code editor, then enter:

<p><a class="toggle-thumbnailgrid laybutton1 laybutton" href="#">mybutton</a></p>

OR enter this code in +more → +html,
probably better :D (you can also remove <p> and </p>)

this will be our button

now put a thumbnailgrid underneath:

and put this in "lay options" -> "custom css & html" -> "custom head content":

<script>
    jQuery(document).on('click', '.toggle-thumbnailgrid', function(e){
        var $grid = jQuery(e.target).closest('.grid-inner');
        
        // you can probably code this in a more beautiful way:
        var valueToSet = ''
        var toggled = jQuery(this).attr('data-toggled')
        if(toggled == ''){
            valueToSet = 'toggled'
            jQuery(this).text('mybutton')
        } else {
            jQuery(this).text('mybutton text 2')
        }
        jQuery(this).attr('data-toggled', valueToSet)
        
        console.log($grid);
        var $thumbnailgrid = $grid.find('.thumbs-collection-region');
        if($thumbnailgrid.length > 0){
            $thumbnailgrid.each(function(){

                
                var config = jQuery(this).data('config');
                console.log(config)
                /*
                you could also set different amounts of columns, based on what screenSize you're on at the moment:
                switch(window.utility.screenSize){
                    case 'desktop':
                    break;
                    case 'tablet':
                    break;
                    case 'phone':
                    break;
                }*/
                if(valueToSet == '') {
                    config.desktop.colCount = 1
                    config.tablet.colCount = 1
                    config.phone.colCount = 1
                } else {
                    config.desktop.colCount = 2
                    config.tablet.colCount = 2
                    config.phone.colCount = 2
                }
                window.thumbnailgrid_controller.sizeLayout(jQuery(this), config)
            })
        }
    })
</script>

you need to update to the latest version of lay theme for this to work.
this will change the column count of all project thumbnail grids on that page.

sorry for the late reply

[arminunruh]

also, you can change this part of the code:

if(valueToSet == '') {
                    config.desktop.colCount = 1
                    config.tablet.colCount = 1
                    config.phone.colCount = 1
                } else {
                    config.desktop.colCount = 2
                    config.tablet.colCount = 2
                    config.phone.colCount = 2
                }

to have different amounts of columns per row

and change "mybutton" and "mybutton text 2"
here, to have different texts inside your button depending on if its toggled or not:

if(toggled == ''){
            valueToSet = 'toggled'
            jQuery(this).text('mybutton')
        } else {
            jQuery(this).text('mybutton text 2')
        }

but then you also need to change the text here, in the text/html element for our button in the gridder:

<p><a class="toggle-thumbnailgrid laybutton1 laybutton" href="#">mybutton</a></p>

"mybutton"

[Jens]

Hi Armin, the forum update went into the spam so I only saw this now.

Thank you so much. Amazing. Sending digital drink your way!

[Jens]

Just had a go and it works like a charm. Vielen Dank nochmal.

[arminunruh]

im glad it worked! :)