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.
So let's get print products out of the way first. Lets take an image of 500px X 375px. If you set it to 3dpi and print it, the print will have 3 X 3 dots spaced across each inch. The physical size of the print will be a whopping 168 X 125 inches, but you'll need to stand around 100 yards away to recognise it.
If we set the resolution of the exact same image to 300dpi the physical size of the image (kb) remains exactly the same, but when printed it will have 300 dots spread across an inch. The print size will be 1.67 X 1.25 inches – little better than a thumbnail.
A comparison of 3dpi and 30 dpi in print
To Scale, but not actual size
Depending, of course, on your screen resolution (ppi)
Now let's take a look at video screens. Video screens only display pixels and are set to a screen resolution in ppi (Pixels Per Inch) a common setting today is, for instance 1920px X 1080px.
Any dpi information contained within an image is disregarded. An image with a pixel size of 500px X 375px will always display at 500px X 375px – on your monitor, on my monitor, or on Joe Blogs' monitor regardless of the dpi settings. It will never change either its pixel size, or its appearance. The physically displayed size will depend on your monitor's ppi settings.
Here's Proof That Video Systems don't use dpi
Don't believe me? Then take a closer look at the two images below. The first is set to 3dpi, the second is set to 300dpi. Both are 500px X 375px.
Do you see any difference? I don't. And yes, I have my glasses on.
Image set to 3dpi
Image set to 300dpi
Still don't believe me? Then drag the images to your desktop (or right-click and save.)
Don't use the clipboard function. The copy function won't copy any dpi information and Windows image editors will automatically set the resolution to 96dpi, whilst Mac editors will set the resolution to 72dpi.
Now open both images in your favourite editor and check the size and resolution for yourself.
Believe me now?
In the end, it's all just pixels.
There is now a new answer to question two. PDF Viewer 2 from RWtuts.
Marvin has just completely rewritten PDF Viewer – it is now fully Stacks 3 compatible and includes Sparkle updating.
I have a client (a charity) that publishes a regular newsletter. The staff members responsible for the publication are completely computer illiterate, but they can save a text document to PDF.
With MountainDuck, they can upload the PDF to the server (overwriting the old version) and Voila! the newsletter is instantly displayed on their website.
And, thanks to PDF Viewer, the PDF is displayed blazingly fast – my 57 page test was instantly viewable; much faster than accessing it directly via the browser – and it's also fully responsive.
PDF Viewer is not a complicated stack, in fact there are just three settings:
At the bottom of the published stack there is an indication of the page you are viewing (5 / 57) and magnification controls. In the top right hand corner there is a Pop-Out button that will open the PDF in a new window and allow your visitor to download and save the PDF.
If you need PDFs to be displayed in Rapidweaver, PDF Viewer is the address to visit!
Eric's Video Gallery supports YouTube, Vimeo and HTML5 video formats. As the name states, the stack places a gallery on your page. The gallery may contain a single video, or multiple videos – I dropped 50 videos into Video Gallery before I got bored with the test. I like the way the videos are presented.
A panel for the active video and a description panel with thumbnails for the video list. Both fully configurable.
What surprised me when I first looked at the settings panel, is that the standard top four Stacks settings, Background, Border, Layout, Responsive, are missing.
O.K. That's a new one! You'll need a visibility stack, if you don't want the gallery to load on mobile.
Instead, Video Gallery sets off by requesting Main Gallery Settings. These begin with Show Notes. When loading a child video container, there is a field for notes which may be displayed as in the screenshot above.
Panel Type refers to the panel content – the options are Title Only, Title and Description, Title,. Description and Thumbnail – the info displayed in the gallery list.
Autoplay Video – a very important option that is set to No by default! Thumb Scrolling refers to the gallery list which may be scrolled simply by moving the mouse over it, or by dragging with the mouse/finger. Play Next Video – equally as important as autoplay – is set to manual, but may be set to When Current Video Ends.
External Border refers to the Colour and Pixel Width of the Border around the gallery. The Gallery Width is set to 500px by default and the Alignment is set to Centre. The Thumbnail Width, Thumbnail Height, Row height and the Panel Width can all be set individually. By default the panels set to 45%. The width and colour of the Separator between the video and the playlist may also be set. You must then decide if your video is displayed on the left, or the right of the playlist.
The Selected Row and the inactive Other Rows may be formatted individually, so it's easy to see which video is currently playing. The formatting includes Background Colour, Thumbnail Border Colour and Width, Title Bold, Title Colour, Description Bold, Description Colour, Title Font Size, Title Font Family, Description Font Size and the Description Font Family.
So far, so good, now it's time to add a video. One video container is already in the mother stack, if you click it, the setting options are Video Type, the choices being YouTube, Vimeo and HTML5 Video. If you set either YouTube or Vimeo, the Video ID is required next. If you set HTML5, the panel slides open to reveal MP4 URL, Webm URL, OGV URL, with an option to set a link for each.
Below the video format are fields to add Short Title and Description. If a video thumbnail is found, it will be added automatically. If no thumbnail is found, a link setting appears automatically so that you may set your own warehoused thumbnail.
Once you've formatted your video, you can click the plus button to add the next child stack.
Video Gallery is easy to set up, looks good and has an abundance of settings for personalisation. I never put a video online myself and, strangely enough, none of my clients ever requested me to, but if I ever get into the situation, I'll be taking another look at this stack
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