In an effort to continuously evolve and offer our customers ever expanding options, Art Storefronts has created a new layout option for use on pages like Art Print Stores and Product galleries. This new layout is called collage. Instead of seeing your categories listed out in separate square or rectangular categories you’ll instead see them arranged in a collage on your page. This can be used by anyone on the Art Storefronts platform.
In this article, we’re going to show you how to use this new collage option, but there are a few things we want to address before showing you how to enable this option. First and foremost, the collage technology does have limitations. Because it uses the images you have on your site it works to make them fit together and an aesthetically pleasing way. This means that you will not have complete control over the specific width and height of the images. You will have the option to change a few of the parameters. You will have the ability to change the border width of images as well as Target height. Be aware though, if you choose to make changes using custom coding to either of these options and it does not work or causes issues, Technical Support will not be able to assist you and will ask you to remove your custom coding.
If you are still interested in using this feature, please follow the guide below.
Log in to your Art Storefronts Control Panel and click on the page you want to use the Collage Layout In our example, we’re using the page titled Home as it is a Product Gallery.
On the next page, we’re going to scroll down to the section labeled Layout and in the dropdown menu choose the Collage.
Click Save.
Click on View Live Site.
You will now see that your images are arranged in a collage and when you hover over them it will show the name of the category.
Frequently Asked Questions
Please Note: Each of the following questions and answers require custom coding. Please remember that Technical Support agents cannot assist with any custom coding changes and if you are unable to get these snippets working or you make a change and it does not behave as it should, Technical Support will not be able to find and resolve the issue. As such, please be EXTRAORDINARILY CAREFUL moving forward with any of the following steps.
How do I change the distance between my images?
To change the distance between images you can use the following code and enter it into the CSS section of your theme. If you need more information on how to edit code within your theme, please see our article How To: Edit Your Design Using Custom Coding.
Please make sure to copy the code exactly as you see it below.
.Collage img, .Collage figure .blur { border: 1px solid white; }
You only need to change the “Border” value, which, by default, is “
3px solid white;”.If you’d prefer no border at all, you can replace the “
3px solid white;” with “none;”.If you want to decrease the size of the border, you could change it to “
1px solid white;”.
How do I change the image sizes, loading effects and effects speed?
To change the images sizes, load effects and effects speed, you’ll need to enter the following code in the JS tab while editing your theme. If you need more information on how to edit code within your theme, please see our article How To: Edit Your Design Using Custom Coding.
Now, we'll show you how to change your images sizes, loading effects and effects speed. We’ll give you a whole snippet of code first. Anything that has two forward slashes (//) in front of it will be instructions on how to use the code. YOU WILL NEED TO REMOVE THESE LINES IF YOU WANT THE CODE TO WORK PROPERLY. Anything that has four forward slashes (////) in front of it will need to be removed to override the default setting for that piece of code. YOU WILL HAVE TO REMOVE THE SLASHES AND MAKE ANY APPROPRIATE CHANGES TO THE CODE SO IT WORKS PROPERLY ON YOUR WEBSITE. IF YOU INCLUDE THE SLASHES OR LEAVE PIECES OF CODE THAT CONFLICT WITH ONE ANOTHER, THIS WILL NOT WORK PROPERLY.
Please use the following code:
<script>
function loadCollagePlusOverrides(){$('.Collage').each(function() {
var collage = $(this);
// this allows you to change the loading effect of the images as they appear on the screen
// default value is "effect-2". Possible options are "effect-1", "effect-2", "effect-3".
//// collage.attr("data-effect", "effect-2")
// this is an approximation, but allows you to change the sizes of the images.
// keep in mind, the nature of a collage layout will not give you perfect control over sizing.
// default value is "450".
// collage.attr("data-target-height", "100")
// this allows you to change the speed that the images appear on the screen.
// default value is "fast". Possible options are "fast", "slow".
//// collage.attr("data-fade-speed", "fast")
});
}
</script>
All of my images are appearing as the same size when using the collage feature. Why is this happening?
You may find that all of your images are appearing as one size in two separate columns. This happens when all images are the same aspect ratio. If you would like your images to appear more collage like on your website you will need to use images that have more than one aspect ratio. The system will not automatically resize images of the same aspect ratio to make them look more like a collage than columns with images. You can still use this feature, but it is important to be aware that it will not look as collage-like as the pages of others using multiple aspect ratios.