Responsive Slideshow Galleries: Skyscraper to Square

Hello guys

Like many websites, mine has skyscraper ads of which are ideally designed for viewing on a full screen browser but do not work well for mobile use. I have seen code that would allow single images to be responsive in that a skyscraper (160x600) can be replaced by a square (250x250) advertisement when the browser window reaches a certain minimum/maximum width. Is there such a code that can be done with galleries on Squarespace?

For example - I want to have a slideshow gallery of rotating skyscraper ads display on browser screens over 750 px wide. Where anything narrower, I want to have a slideshow gallery of rotatng square ads shown in the same place.  Thus optimizing mobile viewing.

Hi @briang97603. This is achievable via either JavaScript or CSS.

Option 1: JavaScript .This would be more complicated and would require swapping src attributes and other attributes in order to make use of Squarespace's dynamic image sizing, ImageLoader.

Option 2: CSS Background Images. CSS is simpler if you only load a single, high-resolution alternate image via the background-image CSS property. Using media queries, you'd then hide the <img> itself via either opacity, visibility, position, etc. I suppose you could also use media-queries to load various alternate images of various resolutions/sizes if you really wanted to. Usually, with Squarespace sites, I tell people to just load a single high-resolution image because it's usually not significant compared to the collective size of the page. Some CSS will be required to resize the gallery itself. In any case, you can upload the images via file storage or via an image gallery collection, etc. Then, use those file paths as the alternate img file paths, whether using JavaScript or CSS.

Option 3: Two gallery blocks & CSS. Put the skyscrapers in one, and the square ads in the other. Use CSS media queries to show one gallery on desktop and show the other on mobile. That would look something like this (Where the code says "TBD" is where the block ID of the square gallery would be. You can identify block IDs using your browser's developer tools/web-inspector.):

/* Show skyscraper */
#block-yui_3_17_2_1_1537482878901_13769 {
    display: block;
}
/* Hide square */
#block-yui_TBD {
    display: none;
}

@media only screen and (max-width: 640px) {
    /* Hide skyscraper */
    #block-yui_3_17_2_1_1537482878901_13769 {
        display: none;
    }
    /* Show square */
    #block-yui_TBD {
        display: block;
    }
}

The first option may take an experienced Squarespace dev. 4 hours or less to do in a way that allowed you to maintain it over time, changing ads. The second would probably take 2 hours or less, and the third an hour.

On 11/2/2019 at 7:43 AM, brandon said:

Hi @briang97603. This is achievable via either JavaScript or CSS. JavaScript would be more complicated and would require swapping src attributes and other attributes in order to make use of Squarespace's dynamic image sizing, ImageLoader. CSS is simpler if you only load a single, high-resolution alternate image via the background-image CSS property. Using media queries, you'd then hide the <img> itself via either opacity, visibility, position, etc. I suppose you could also use media-queries to load various alternate images of various resolutions/sizes if you really wanted to. Usually, with Squarespace sites, I tell people to just load a single high-resolution image because it's usually not significant compared to the collective size of the page.

In any case, you can upload the images via file storage or via an image gallery collection, etc. Then, use those file paths as the alternate img file paths, whether using JavaScript or CSS.

Thanks Brandon. That sounds incredibly complicated for my knowledge level. 

The original question is in relation to advertising graphics on a news site. Does anyone out there have a simpler solution that might work for the same issue? Maybe the solution lies outside the Squarespace Platform and is placed in the site via a code?

FYI: The site in question is www.KlamathFallsNews.org

Summary of initial question: I want the ads (currently loaded into galleries) to change in dimensions based on screen size. (i.e. 160x600 on desktop 300x200 on mobile).

22 hours ago, brandon said:

@briang97603, I've added a third option to my original answer. It is simpler yet than even the second.

Option 3 sounds like what I want to do. Where do I find CSS media queries to get started. And how do I identify the skyscraper gallery and square gallery?

Please see updated post above.