Automatic, fully responsive, image montage. With a click option to either, go to another page, or light-box the original image.
Arranging images in a montage like fashion can be a challenging task when considering certain constraints, like the window size when using fullscreen, the right image number to fill all the available space or also the size of the images in use. With the Montage stack you can automatically create a montage, either for a liquid container or a fixed size container (including optional light-box), with the option to fill all the gaps.
Play Video
Live Demo
Settings
Click to Enlarge
Choose what to do when a user hovers over an image.
The choices are :
Show only the image title
Show the image title and an overlay, that darkens the rest of the images
The choices are :
Show only the image title
Show the image title and an overlay, that darkens the rest of the images
Choose what to do when a user clicks on an image.
The choices are :
Open the original in a light-box
Direct the user to another page
The choices are :
Open the original in a light-box
Direct the user to another page
This sets the total number of images the stack will contain. And presents you with a drop zone for each of your images in the edit area.
Montage randomly sets the height of each row of images, each time the page is loaded.
This setting enables you to set a minimum height for each of the rows, in the finished montage.
This setting enables you to set a minimum height for each of the rows, in the finished montage.
Montage randomly sets the height of each row of images, each time the page is loaded.
This setting enables you to set a maximum height for each of the rows, in the finished montage.
This setting enables you to set a maximum height for each of the rows, in the finished montage.
You can set a slight gap between each of the images, and allow the background to show through the gaps.
This can be used to create a great extra effect on the montage.
This can be used to create a great extra effect on the montage.
Montage is very clever at what it does. While resizing and fitting all of your images into the montage, it will inevitably end up with a gap at the end of the last row of images.
If you select "fill last row" the last image in the set is stretched to fill any gap at the end, completing a perfect montage. (normally this should be left selected at all times).
If you select "fill last row" the last image in the set is stretched to fill any gap at the end, completing a perfect montage. (normally this should be left selected at all times).
Sets a background colour within the stack. This will show through and margins of the images if you have applied any margin at all.
When selected, this will tidy the stack in the edit area, hiding all but the title bar, to keep your edit view uncluttered, when you are finished editing the montage.
This is the max width the stack will be allowed to expand to in a responsive theme.
If you just always want the stack to fill 100% of the width of it's con tainer, set this to a very high number like : 100000
If you just always want the stack to fill 100% of the width of it's con tainer, set this to a very high number like : 100000
Aligns the stack in the centre of its container, if the max width is set, and the container is currently larger than that.
User Guide
Drag an instance of the stack into the page.
Select the number of images required in the settings.
Add images to each of the slides by dragging them into the drop zones.
Thats all you need do to publish your montage page.
You my then explore the settings to customise your montage to taste.
Detailed settings info is contained in the settings tab of this demo page.
Select the number of images required in the settings.
Add images to each of the slides by dragging them into the drop zones.
Thats all you need do to publish your montage page.
You my then explore the settings to customise your montage to taste.
Detailed settings info is contained in the settings tab of this demo page.
There are 2 possible answers to this question, based on what you have selected as the click action, in the montage stacks settings.. "Light-box" or "Link to Page" or "No Action".
If you have selected the light-box option, you want the images to be larger than the stack is going to make them in the light-box to avoid the images becoming pixelated.
The stack will light-box an image at a maximum of 500px in height.
So the image you drop in should be over that size.
The stack will automatically resize larger images to the size it needs and it also reduces the file size, so you don't need to worry about really large images slowing things down.
If you have selected one of the other click actions. Your image need only be as tall as the maximum row size you have set.
So for example of your max row size is set at the default 350px, your images need be no more than that in height.
This can save some load time when you use a lot of images in the stack.
The red drop Zone is slightly different.
This image is what fills in the end of the montage and is when needed, stretched to fill any remaining space.
There for there is a possibility that the image will sometimes fill a much larger width than the others in the green zones.
So it is recommended that this image should be at least 1000px in width, to avoid any pixelating.
These are not hard and fast rules. The stack will work with what ever you throw at it, but these are the recommended optimum sizes.
If you have selected the light-box option, you want the images to be larger than the stack is going to make them in the light-box to avoid the images becoming pixelated.
The stack will light-box an image at a maximum of 500px in height.
So the image you drop in should be over that size.
The stack will automatically resize larger images to the size it needs and it also reduces the file size, so you don't need to worry about really large images slowing things down.
If you have selected one of the other click actions. Your image need only be as tall as the maximum row size you have set.
So for example of your max row size is set at the default 350px, your images need be no more than that in height.
This can save some load time when you use a lot of images in the stack.
The red drop Zone is slightly different.
This image is what fills in the end of the montage and is when needed, stretched to fill any remaining space.
There for there is a possibility that the image will sometimes fill a much larger width than the others in the green zones.
So it is recommended that this image should be at least 1000px in width, to avoid any pixelating.
These are not hard and fast rules. The stack will work with what ever you throw at it, but these are the recommended optimum sizes.
Simply double click the title in the stacks edit mode, and replace the text with your own image title.
Select "Link to Page" as the click action in the stacks settings.
Highlight each of your images in turn, and add a link to them using Rapidweavers built in links panel :
Highlight each of your images in turn, and add a link to them using Rapidweavers built in links panel :
Sometimes you may want to constrain the stack to a maximum width, in the page.
Just set the number in Max-Width to the size in pixels you want to constrain the montage container within.
You will be given the option to align the stack left of centre when using this setting.
Just set the number in Max-Width to the size in pixels you want to constrain the montage container within.
You will be given the option to align the stack left of centre when using this setting.
While the stack can hold unto 1000 images. That would be somewhat impractical, and hinder the page load time considerably.
Building any webpage, the amount of content on each page has to be considered, to avoid really slow page loading time.
Images and video are by far the most hungry, when it comes to page load times, so care must be taken.
As a rule of thumb, we recommend around 15 images is around the modt you should use in the stack to keep page load times snappy.
Building any webpage, the amount of content on each page has to be considered, to avoid really slow page loading time.
Images and video are by far the most hungry, when it comes to page load times, so care must be taken.
As a rule of thumb, we recommend around 15 images is around the modt you should use in the stack to keep page load times snappy.
Tested in the following browsers :
- Mozilla FireFox
- Google Chrome
- Safari
- Opera
- Internet Explorer 7+
- iPhone 4 + 5
- iPad 2 + 3
- Android
Video Overview
Back to Stacks Store Page
