web counter
RapidWeaver Stacks, PlugIns, Themes ...
My Image

All the latest RapidWeaver Stacks reviewed,
plus the most important community news …

Stay up to date with current RapidWeaver developments

Instagram Vista for RapidWeaver

When you mention CMS to prospective clients, they devote their whole attention to what you're saying. But when you mention that it costs money, some of them wave their hands in shock. "Not necessary" they say, "I just need to be able to swap out images regularly in an image gallery…"

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.

Instagram Vista – Weavium
Stack settings
Access Token
# Of Images
Use Dummy Content For Editing

General
Autoplay
Max Width – px
Radius – px
Avatar – px
User Name – px
Controls – Button, Icon – px
Control Radius – px
Control Breakpoint – px

Posts
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 Radius
Detail Padding – Vertical, Horizontal
Detail Heart – px
View More
Caption Text
Tag Text
Tag Radius
Tag Padding

Colours & Fonts

Instagram Vista, a great way to add Instagram to a RapidWeaver project.

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
Comments

Album for RapidWeaver

Weavium builds stacks that are highly configurable. Album is one of those stacks. The Album settings panel is so long that it took me an hour to go through each setting and even then, I may have missed one or two.

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.

Album – Weavium

Album – Weavium

Album – Weavium

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!

Comments

Kick-Ass Gallery For RapidWeaver

Gallery 3.4 for InStacks isn't a new product, but it is an extremely powerful gallery that is constantly being updated. Jannis just updated Gallery again – for Stacks 3.5 and is currently working on a new feature, revising the documentation and working on instruction videos. I just went through the documentation and don't find it lacking in any way, but Jannis obviously has other thoughts.

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*!

Gallery 3
Stack settings

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.

If you wish to add G3 to one of the CMS solutions available, you'll find detailed instruction on how to do so on the Tutorial Page.

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.

Comments

ProGallery – A Masterful Gallery For RapidWeaver

Pro Gallery, one of Stacks4Stacks' most popular products, has just been updated to version 2. One of the performance saving enhancements is lazy loading, which results in much larger galleries being feasible. If you have a large portfolio of images, or videos, you may wish to take a closer look…

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.

ProGallery

Stack settings.

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.

Comments

New RapidWeaver Blog Concept

For many years, I used the RapidWeaver blog plugin. It only took a while, before I wished it was more flexible. There isn't a lot that you can do with it – except write blog posts, of course. Jannis at InStacks has a new stack online that changes that. Now you can turn your blog page into whatever you please – FAQs; Product Page; Photo Gallery…
Poster's possibilities are almost endless.

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
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!

Comments

Show more posts

Please note that the forum is operated by DISQUS.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

Subscribe to Ninja News
or ask a question

Hi, I’m the Ninja Bot. What’s your name?
image/svg+xml
Nice to meet you, [1-1]. Could you tell me your mail address?
image/svg+xml
[1-1], would you like to subscribe to the monthly Ninja Newsletter?

Yes, I would like to receive your monthly newsletter.

No thanks, I’m good for now. I have a different issue.

image/svg+xml
Thanks for your support, [1-1]. Is there anything else I can do for you?
image/svg+xml

[1-1], thanks for subscribing.
By clicking 'Submit', you are giving your consent to having rjh-webdesign collect your name and email.
These details are used exclusively for the newsletter and will not be passed on to third parties!

As soon as I've added you to the mailing list, you'll receive a mail asking you to confirm your subscription.

If you made a further request, I’ll get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I would like to subscribe to the Ninja Newsletter

Message

[4]
I’m sorry to hear that, [1-1]. How may I help you then today?
image/svg+xml

[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I don’t want to subscribe to the Ninja Newsletter right now.

Message

[6]

Thanks again for contacting us. Your request was successfully submitted.

  • Stacks Image 76789
  • Stacks Image 76774
  • Stacks Image 76776
  • Stacks Image 76783
  • Stacks Image 76791
  • Stacks Image 76787

Looking for Inspiration?

Looking for Inspiration for a new site, or need a CTA
really quickly?

The Latest & Greatest

Soundboard for RapidWeaver
If Weavers wish to add a series of audio clips to their pages, they could obviously use a ...
Kalendar for RapidWeaver
Websites that display calendars have two core functions: They show upcoming events and they ...
Filter Grid for RapidWeaver
There are a couple of stacks available that will filter RapidWeaver content; some more, some less ...
  • 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?

Contact Information

rjh logo

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—17

Powered by rjh-design

This website was built with loving care on a Mac using Foundation. For more information, contact me.

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.

View previous campaigns.

By clicking 'Submit', you are agreeing to receive emails from Ninja News

Our newsletter is distributed via MailChimp, who is also responsible for maintaining our mailing list. You can read their privacy policy here.

Subscribe to the Ninja Newsletter

* indicates required

Subscribe to the Ninja Newsletter

You've reached the bottom of the page, thanks for reading.

If you enjoyed what you read, you can subscribe to the Ninja Newsletter and receive a review summary once a month.

Thanks for your subscription

We shall send you a summary of the Ninja News reviews once a month.
We do not send out any other mails and we shall not, under any circumstances, share your email address with third parties.