Easier said than done! That would involve standardised image names, set sizes and the manual production of corresponding thumbnails…
… but wait, everyone and his dog seems to have an Instagram account theses days and Weavium has just released a flexible new Instagram browser.
Instagram Vista displays either a slider or a grid of Instagram thumbnails which, when clicked open up in a fullscreen lightbox.
Each of the thumbnails has a floating (or inline) caption with the date and number of likes and, when hovered will display either the image comment, or the tags.
When in slider mode, Instagram Vista displays a row of thumbnails (the number of columns is up to you) which can be navigated with arrow buttons or, on touch devices, by swiping. The view can be switched to grid view and back again with the click of a button. Apart from the navigation the stack's header also displays the Instagram avatar and user name.
Setup is simple. You will need your (or your client's) Access Token which Instagram makes difficult to discover. Luckily there's a tool at http://instagram.pixelunion.net/ that makes life easier: Log in to your Instagram account, then go to pixel union and with the click of a button, you'll receive your Access Token. Copy ALL of the 51 characters into Vista's control panel and you're ready to go!
As to be expected from Weavium, All background, control and text colours and all fonts can be customised until you have your very own Instagram Vista.
# Of Images
Use Dummy Content For Editing
Max Width – px
Radius – px
Avatar – px
User Name – px
Controls – Button, Icon – px
Control Radius – px
Control Breakpoint – px
Post Style – Floated, Inline
Initial View – Slider, Grid
Hover Content – Caption, Tags
Columns – Desktop, Tablet, Mobile
Breakpoints – Tablet, Mobile
Gutter – px
Image Radius – px
Detail Padding – Vertical, Horizontal
Detail Heart – px
Colours & Fonts
Instagram Vista, a great way to add Instagram to a RapidWeaver project.
Album is a lightbox stack and I'll say right from the start that I'm rather taken with it.
Album displays a stylised stack of photos which. when clicked, open up a grid of images which, when clicked, open to cover the screen. You can then scroll through the images using the navigation buttons. Both the photo stack.and the main lightbox window display a title alongside a description and each large image displays a caption.
As mentioned above, the stack settings panel is a mile long, so I'm not going to go through the settings here. Just take my word for it that you'll be able to set everything just to your liking, beginning with the size of the photo stack which can fill the page or be thumbnail sized – that's entirely up to you.
So how does it work? Drop an album stack onto your page and begin by configuring the initial album display. Then add a child stack for each of the images in your gallery. You can now go about configuring the gallery page, i.e. decide how many columns you wish to have displayed for each device, title overlay colour, page overlay colour, caption overlay colour and gallery font sizes etc.
It will take some time to set up Album exactly as you want it, but I guarantee that the effort will be well worth it. Be sure to take look at the demo project that comes with the stack!
Jannis describes Gallery 3 [G3] as 'Kick-Ass', so what puts the kick into this stack?
Well, first off, you can choose from 10 different grids, 6 different lightboxes and 5 different sliders.
These choices alone are kick-ass, but then come Gallery 3's integration options. You can integrate G3 with the Bootstrap, Foundry and Foundation frameworks, plus Armadillo, Easy CMS, Pulse CMS, Sentry and Total CMS; and – if that's not enough – Adobe Behance, Apple iCloud and FTP folders. Oh, I almost forgot, you can drag and drop your images directly into G3 too and Thumbnail images are created automatically. Now tell me that's not as versatile an egg*!
When you drag G3 onto a Stacks page, you'll find a container with two child stacks.
You can play around with the upper container for hours choosing the Grid, or Slider that suits your taste/purposes. There are fifteen options to choose from, five of the options are framework based. Not having all of the Frameworks, I was only able to test the Foundation Grid. However, the other Grids/Sliders offer plenty of choice.
When you've selected your grid, you can open the settings panel – I'd begin with the main G3 panel where you can set the number of columns displayed in edit mode, a smaller grid makes it so much easier to add images.
Main Max Width sets the gallery width, you can add your own size definition in px, %, or rem. Setting 0 allows G3 to fill the container it is placed within.
CSS Filter. There is a choice of 21 different CSS Filters for your thumbnails.
Disable Context menu does just that – your visitor will be unable to right click an image to download it.
Shuffle / Randomize Images loads the images in a different order every time the page is reloaded.
Grid/Slider settings panel. In the settings panel for Grids, you can set the maximum number of columns for four different viewports.
In the settings panel for Sliders, you can set the maximum image height.
The lower child stack is where you add your images. The child stacks include:
Image – drag your images into the child stack.
Image + Thumb – drag and drop your images – thumbnails are automatically created.
Image + Thumb Pro – Drag your images into the settings panel container and add an Alt Text.
Adobe Behance images – Set the API and Project name in the settings panel.
Apple iCloud - Set the URL and number of images to be displayed in the settings panel.
FTP Directory/Web Folder – Set the path and the information to be displayed in the settings panel.
Armadillo/Sentry Integration - No settings necessary.
Each thumbnail is set to Square by default in the image settings panel. If you wish to use the Grid-A-Licious (Masonry) option, you will probably want to deactivate this option for each image.
G3 – not new, but freshly and regularly updated. You won't find a more powerful gallery in the RW or any other scene!
*Boiled, poached, scrambled, fried, coddled, 1000 year old, pickled and a myriad of culinary functions.
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!
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