Will's demo gallery contains 117 images and is close to 400MB in size. Quite a risky and time consuming undertaking in most cases, however, with ProGallery a gallery of this magnitude is not only possible, it's also quite simple to set up.
With lazy loading/progressive loading, the image, or video that is currently requested is called from the server on demand, thus preserving bandwidth.
The ProGallery lightbox itself has been completely rebuilt and the clutter has been removed. The controls and the titles are no longer within the displayed image, but are placed outside of it, thus allowing the viewer to focus on the image itself. Keyboard navigation has been implemented, as has swipe actions on mobile devices. In addition to an image title, a caption text can now be added.
Once you've dragged a ProGallery stack to your page and clicked the + button to add a child stack, you'll see that there are now four options to add images to your Gallery.
Single Image is the simplest solution. The settings panel displays three image wells for local, or warehoused images. Thumbnail, Large Lightbox Image and High Resolution Lightbox Image. Below these options you can add both an Image Title and an Image Caption. You will then see Alternative Link: Set Link button?
The Lightbox can be disabled. Setting a link to the thumbnail then gives you the option of linking to external pages. These pages could be product pages, or further galley pages.
Single Video is similar to Single Image. The thumbnail can be a local or a warehoused image. The Video Link will accept any video that can be embedded within a page. ProGallery will automatically discern the video format. Once more, both a Title and a Caption may be added.
Directory Of Images. One means of simplifying building a large gallery of images, is to upload the images, high-res images and thumbnails (with _thumb, or @2 appended to the name) to a server and add a .php-relative path to the Directory Path in the settings panel (html will not functions here). Then set the options Use Thumbnails and/or Use Retina Images accordingly. Your index page must then be set to .php instead of .html
ProGallery will then automatically load your images into a gallery.
CSV File. As before, ProGallery will accept a CSV file as a gallery source. The file format has now been extended to include Retina Images and Captions.
The ProGallery main stack settings are too numerous to list here, but you can take full control of your gallery appearance. The settings include Gallery ID (you may have more than one gallery on a page) Grid Type, Special effects (only for modern browsers), Transition Speed and multitudinous settings for the Lightbox.
It remains to be said that – apart from the thumbnails – there are three further options to trigger the ProGallery Lightbox. You may use a link, or a button to open the lightbox, you may do the same to open a specific image from the gallery, and you can trigger a specific slide on page load. These options are all explained in detail on the product page.
ProGallery, then, has now advanced from being one of the best gallery stacks available for RapidWeaver to one of the very best.The magnitude of possibilities make it a pleasure to set up and its reliability when building large galleries makes it second to none.
Poster is a suite of stacks that blends in with any RapidWeaver theme. Foundation compatibility has specifically been added and, because Poster is based on Stacks and is not a plugin, its potential is only limited by your imagination.
You can build a standard one up/one down blog page with, or without a summarised introduction; or you can build a grid of summaries and, when you click on 'Read more…' a new stacks page will open. The new page can contain whatever you like – Responsive Slideshows; Lightboxed Image Galleries; Responsive Video – if you have it in your Stacks library, you can most likely use it.
Poster (it seems to be currently fashionable) is another soft release. It is available online but the webpages are still under construction and Jannis is still implementing RSS capabilities. Other than that it's ready to go – and I'm hooked already.
When you drop Poster onto a Stacks page, you will find a pre-formatted post with a Poster Item containing a Header and a Main Content area. The Main Content consists of a Text box with the blue button to add child stacks. The child stack options include Text; Markdown; HTML; Image; Poster Social Share Buttons; Poster Read More (a child stack that is only displayed once the Poster Item is opened) and Poster Back. Once you have added any of the options, you can drag them within the Poster Item to position them where you want them and you can format the child stacks just like any other stack.
Optionally, you may drag in any other stack from your library. A sub-header for instance, a slideshow, a video; a 'Buy Now' button; its entirely up to you.
Below the Poster Item is a second button to add your next post. Once you've added a second post and preview your page, you'll find that clicking a post title or the 'Read More' text will open your Poster Item as a full page – using the same layout that your main page uses. No surprises there – that's how blogs usually work. So let's get down to the nitty gritty…
The stack settings for the main Poster stack let you set the number of Items Per Page, below which is a checkbox to Display Pagination – if you're writing a blog. or building a storefront, you will probably have more Post Items than you'll want to display on a single page, right?
Next you can set the page Layout. The standard setting is One Column, but you can also set Multiple Columns (Flexbox) and display up to four columns of content. Four columns are impractical on mobile devices, so selecting Multiple Columns opens up a further set of settings which allow you to define the number of columns to be displayed at each of four breakpoints.
The Date Format has a choice of five settings. I'm not sure if it's intentional, but one of those settings is in German and displays the month name in German when set. If this is intentional, a few French, Spanish and even English users etc. may be a little miffed that their language is missing. The other date formats are all numerical.
The time format can be set to 12, or 24 hour format – it is Hidden by default.
The Title Header can be set to H1 through H6 and the Metadata can be displayed above, or below the Title, or hidden.
The Poster Item Styling provides format overrides for just about everything on the page – you'll probably spend a while playing with these settings; I did. I wish other blog solutions had them!
The Social Share Button Settings are also interesting. The Alignment needs no explanation, but the Design may be either Thin, as in the screenshot above, or Square (with white icons on a square background). The Color Style offers the options Colorful and Custom. Setting Custom allows you to change the default grey to any colour that suits your overall page design. The standard Font Size is set to 1rem.
The Poster Texts are all editable so that your navigation may be localised. Then follow Poster Tools, with settings for Responsive Video; Reveal Items on Scroll – a neat transition effect that animates the Poster Items as they appear on the page; Lightbox Animation – with two transitions and Disqus Name for Disqus comments.
The final setting is Poster Edit Mode and may be set to developer mode when the stack preview is not available in RW6.
So now we come to the Poster Item Settings – no, we're not done yet – These include the Item Title and the optional Slug name which is used for the Item permalink. If no Slug is set, the Item Title will be used for the permalink – again; something that's missing from most other blog solutions.
Display Date is activated by default. For a storefront or a gallery, you might want to deactivate this. The date has a default of January 1st, 2017, 07:00 – don't forget to change it for each Item!
An External Link may be set for each Poster Item. It will display after the Item Header.
An unusual, but handy feature is the option to set a Header Content. This is (by default) a text content that will appear above the Poster Header Text. The Header Content may be supplemented or replaced with any stack you wish.
The next option – Summary Content – will display a summary of your content on the main page that will then be replaced by the main content when the Poster Item is loaded.
Enable Lightbox will activate a lightbox on the Poster Item page, allowing images to be displayed fullscreen – with an optional Caption. The next setting enable Disqus comments.
Categories + Tags allow you to set up five categories and/or tags for each Poster Item. Both the Categories and the Tags may be used to sort posts once published.
Both the 'Read More' and the 'Back' texts are optional and may be deactivated. As both are editable in the main stack settings, they may also be replaced by FontAwesome icons.
The final settings option is Hide Content. If your blog page is getting too long in edit mode, each Poster Item may be hidden and will only display the title.
I wrote that Poster is a suite of stacks. You will probably want each and every Poster Item to look the same on your page; or perhaps you want more than one standard Item design. If either is the case, drag a Poster Item onto your page and add any, or all of the Poster Back; Poster Read More and Poster Social Share Buttons into your Item, add the stacks that you otherwise require and, when you have finished moulding your Poster Item, create a Partial Stack which you can then drag into the main Poster stack as often as it is required!
Poster takes advantage of the built-in RW Blog Plugin CSS classes, so that it will adapt to any of the RW standard themes. But, as already mentioned, it also offers specific settings for Foundation.
Just like the standard RW blog, there is no CMS and no Database, so zero setup necessary. It is Stacks based, so that you can design your pages as you want them and it is extremely versatile. Even though the RSS capabilities are still in Arbeit – in preparation – I wish it had been available years ago!
BTW "No CMS'?. I tested Poster with a simple CMS solution – Sentry – and it works perfectly; each entry can be edited without problems!
Wall is a masonry style stack without a lightbox function. Add images of any proportion to the Wall and they will be displayed in a grid, like bricks in a wall. Wall will reshuffle them until they fit perfectly on the page.
When you reduce the size of the page, the images will reshuffle until they fit the new screen size. (The screenshot above is not a perfect rendering of what is displayed in Safari, Chrome, Firefox, or Brave. I assure you that the images align perfectly in those browsers – I will admit that I've not tested any M$ browsers, but I've been assured that the display is identical) The images can be linked to new pages, or even to a lightbox such as Expose.
So here's the 'How To…'
Click the blue + button in the main Wall stack and add either a local, or a warehoused image. If you need an Image Caption – a title, or perhaps a web link – add it alongside the image. Once you've added all of your images, click the main stack to see the stack settings.
Beginning at the top, we find Brick Columns and the number of columns to be displayed on Phone; Tablet; Laptop and Desktop. Joint Spacing adjusts the spacing around each brick.
If we move on to Wall Style Settings, we find Image Padding; Brick Radius; Brick Border and Shadow Spread. I don't think we'll have any problems setting these? Again, with Border Colour; Brick Fill and Brick Shadow (colour/opacity), I don't think that any explanations are necessary?
The last and final setting. Would you like to display the Image Captions or not? There's no witchcraft required here either! Click 'preview' and check the appearance of your new Wall. After a couple of tweaks, you'll have a Wall of images just as you envisaged it! Pure HTML / CSS grid system ensure quick rendering and excellent compatibility.
Thumb Grid is a versatile stack that will display a simple grid of images. The images should all have the same proportions, but if you have a portfolio of landscape images or websites, or a bunch of icons, this will usually be the case.
Thumb Grid can display either local, or warehoused images (the default setting is warehoused) at just about any size you please and has a plethora of settings to make sure that your images are presented just as you want them.
If we take a look at the Thumb Grid settings panel, the first settings are for the Image Width and the Image Height. Below these values, you'll find the Item Margin and the Item Padding, the Border Width and the Border Colours for the Static and Hovered states.
Item Radius will add rounded corners to your Thumb Grid grid items and Thumbnail Radius will round off the corners of the thumbnail content.
The Shadow may also be set for both Static and Hovered states, the settings are given as CSS values, e.g. box-shadow: 0 5px 5px 0 rgba(0,0,0,.25); – this might look unusual for the novice, but it's easy enough to set up. The 'box shadow:' is the name of the container and should remain unaltered. The first value (the default is '0') is the offset and if you wish to alter it, you can add a + or - value in px, where + offsets the shadow to the right and - to the left. The second and third values are the shadow spread and the fourth value is the shadow size. This should ideally be left at 0. The next four values are for CSS RGBa colour values. A dark teal with 60% opacity, for instance, would like like this: rgba(37,94,92,.60);
Thumb Grid's next two settings target the image opacity for the hovered and static states. 1.00 is the maximum. In the screenshot below, the static images are set to 0.50, whilst the hovered value remains at 1.00.
As you can see in the second screenshot, you can also add tooltips to the images. When you drop an image into the image well, you have an option to add a link to the image. If you add a Title to the URL panel too, the title will appear when the next setting, Tooltips, is activated. The Tooltips can be displayed with, or without the Tooltip Arrow. Max Width sets the maximum width of the tip. The next three settings are identical to the RWE Super Tooltip stack – Tooltip Animation; Tooltip Side and Tooltip Theme.
Thumb Grid will, as already stated, allow you to link its contents to external pages, or popups such as Pop Drop or Expose. It is therefore ideal for building your very own lightbox.
RWE's Photo Box arranges a collection of images in a grid and will display those images in a lightbox slideshow when one of them is clicked. Just as with RWE's other image and gallery stacks, when you drop Photo Box onto a stacks page, you will see a box with a set of instructions and the blue + button to add an image and, just as with those other stacks, you can choose between a local or a warehoused image. There are two image wells, one for a Thumbnail and one for the Lightbox Image.
Both the Image Title and the Image Caption are displayed below both the Thumbnail and the main image, so you can add one, or both and deactivate whichever you don't wish to be displayed in the main settings panel. Don't forget, however, that both can enhance your SEO results.
Photo Box' Thumbnail Grid Settings are straightforward and allow you to set the Thumb Size, Thumb Space an Thumb Radius. Each grid cell adapts to the height of the image placed within it, so your resulting page will look much more organised, if your images are all the same size. For the examples below I created square thumbnails for my oblong images.
Below the Grid settings, you will find the Title and Caption settings. Both allow you to choose Font Size, Line Height and Colour. As mentioned before, both can also be disabled.
Photo Box' Lightbox Settings give you the option to Autoplay the lightbox and, when activated, shows further settings for the duration. The Loop option will allow your automated slideshow to rerun from the first image once it's done. The Thumbnails are displayed by default underneath the lightbox, but can be deactivated by unchecking Lightbox Thumbnails.
Lightbox Counter will display the image number/total images, e.g. 3/20 underneath the lightbox image and the extravagant feature Lightbox Zoom will let you zoom the image with the mouse scroll wheel. I don't have a mouse, but the Feature works with the slide bar on a Wacom tablet too. As tis is not a standard lightbox feature, you might want to add a text explains that this feature is available.
The Lightbox Radius is set to 10px by default. Settings for the Colour of the Lightbox Text and Fill are available, as are the colour of the Lightbox Thumbs [frame] in both active and hovered states.
The Lightbox Interface Shade can be set to any colour that matches your overall design and may be set to transparent. The Button Colour too may be changed.
Buttons? Yes – obviously there are buttons that appear when the lightbox image is hovered, to advance the image in either direction, but there is also a button that will hide/show the thumbnails below the lightbox image.
With a little preparation, Photo Box is the ideal stack to display a collection of light boxed images.
Remember that box full of Polaroids in your cupboard? A text scrawled on each one and when you shared them with friends, they (the Polaroids, not usually the friends) landed in unorganised heaps on the table. Scatter Mosaic reproduces this effect (without the tipsy friends) and is a fun way to show an album on your web page.
Once again, when you drop Scatter Mosaic onto a stacks page, you get the instruction box with the blue + button. Click the button and start adding images to the stack. A word of advice – the images should all be square, just like Polaroid images were. Now the fun can begin.
The image well that opens, when you click the + button has the option to place a single local, or a single warehoused image – without a thumbnail. You can add an Image Title for SEO purposes and an Image Caption. You will see the Image Caption on your 'Polaroid' later.
Once you've added a couple of images, click the main stack to access its settings panel. If you only loaded a few images, you can click Bulk Up With Duplicate Images to make your mosaic look more interesting. Otherwise you can continue with Mosaic Height to set the height of your 'table' and Mosaic Fill to set the colour of the table.
An interesting feature of Scatter Mosaic is the option Starting Ovelay. This will place a dimmed collection of your Polaroids on the page until you click View Gallery. With this option deactivated, your Polaroids will be strewn on the table as the page loads. You can set the colours for the backdrop and the View Gallery Button – or whatever you would like to call the button in the provided settings.
Item Padding, Item Radius, and Item Size all allow you to adjust how your Polaroids are fashioned. Their Fill is set to white by default, but if you want colourful frames, you can always change that – the Shadow is set to dark grey.
You will find twelve different font settings for the scrawled Title Font Face, including the Main Theme Font and you can set the Font Size and Letter Spacing along with the Caption Colour.
Navigation Dots appear at the bottom of your 'table' and you can set the Navigation Colour for both the Normal and the Active dots. I found that semi transparent colours work best for me.
Finished! Now, each time your page loads, your Polaroids will be strewn into heaps over your table – with different heaps each time and your first image on view in the centre. Each time you click the navigation, your new image appears in the centre and the heaps are randomly rearranged.Scatter Scatter Mosaic is a fun gallery stack which is ideal for both personal albums, or product shots.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—16