Changing Columns Attribute by Screen Size

  • Resolved empiresafe

    (@empiresafe)


    7 years, 8 months ago

    Hi there,

    Love the plugin, this is exactly what I needed!

    I’m going to have a page with dozens of document galleries on top of one another, and I have all of them set to display 8 columns. Is there any way to change this column attribute to 4 columns for all galleries when the screen reaches a certain size?

    My only idea for this right now is to duplicate every gallery on the page, put them below, change the columns to 4 for all of them, and then use a CSS addition like “@media only screen and (max-device-width: 480px)” and custom classes to hide the bottom (4 column) half on desktop/tablet and hide the top (8 column) half on mobile.

    I know this would work, but I’m concerned that with the large number of galleries I’m putting on one page, making the user load all of them twice would make the page load slower. Is there any way to do this automatically?

    Thanks a lot,
    Collin
    Empire Safe Company

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Dan Rossiter

    (@danrossiter)

    Collin,

    I’m glad DG is proving useful for you! ??

    Regarding changing columns based on screen size, there is no supported way to do this at this time. In theory, you could hijack the logic used to implement pagination within a gallery (https://plugins.svn.www.ads-software.com/document-gallery/trunk/assets/js/gallery.js, see retrieveGallery()), however I can’t promise this interface won’t change in the future.

    EDIT: In retreiveGallery, the column count (along with many other values) is passed off to the server in the atts variable.

    -Dan

    • This reply was modified 7 years, 7 months ago by Dan Rossiter.
    Thread Starter empiresafe

    (@empiresafe)

    For anybody looking through this post – I didn’t end up finding a way to hijack the pagination, I tried setting atts[‘columns’] (and atts[‘cols’]) but it seemed like nothing changed it. Instead, I’m using WP Mobile Detect that doesn’t load content based on the device. Now, my page is double size with a LOT of galleries and the Visual Editor runs very slowly on that page, but a desktop or phone user only downloads the 8 or 4 column galleries & images, rather than my original idea above of loading both and HIDING one or the other. Threw some [notphone] tags around the page, copied and pasted the whole thing, and then threw [phone] tags around the rest. Perfect!

    Plugin Author Dan Rossiter

    (@danrossiter)

    Nice work around! Glad you found something that’ll do the trick for you.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Changing Columns Attribute by Screen Size’ is closed to new replies.