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.
Will Woodgate's new Comments stack is 100% GDPR compliant, it doesn't collect any personal data and a user can't post a comment until she/he has confirmed their awareness that the comment will be displayed publicly.
Comments doesn't require any server side setup, simply a single line of PHP in your page's Prefix. On-page setup is simple, but that doesn't mean to say that you can't spend time pondering the correct translation to localise field names and error messages, adding custom icons to your rating system, or adding a ist of objectionable words so that you don't have to ban Steve C from your site. And I haven't even mentioned the colour setup yet…
Spammers? No. A maths question is generated for each new comment. The question may be set to simple by choosing a range e.g. between 1 and ten, or complicated by setting a range between 100 and ∞.
Disadvantages? Yes, of course there are disadvantages to not collecting personal data, or using a system such as Disqus…
… your comments are saved to a flat text file in your page's subdirectory. If you wish to reply to the comment, you either need to compose a new post, or open the .txt file with a text editor and add your reply there.
And – due to the fact that you're not asking users to supply a mail address, they can't be notified when you write a reply.
Name Field – Checkbox
Name Error – When Name exceeds max length
Pre Populate – None (default), SiteLok Email, SiteLok First Name, SiteLok Name, SiteLok User Name
Rating Field – Ceckbox
Title Field – Settings as for Name Field
Comment Field – Settings as for Name Field
Reset Button [Label]
Submit Button [Label]
Write Button [Label]
No Comments [Label]
Cards – Checkbox
Card Background; Borders; Padding; Margin; Radius
Colour Settings for all the above fields and buttons
Email Notifications – Checkbox
Markup Ratings CSS
Maths Challenge – Min, Max
Bad Words List – Ask Steve C for a comprehensive list
Convert URLs to Hyperlink
Hide Write Button on Open
Facebook Pages displays a live facebook page on your RapidWeaver Stacks page, which is great because instead of having to search for your facebook page, your visitor can see your latest posts directly on your homepage without getting distracted by all the cute kittens and clever dog posts. And, he/she can like your page directly from the homepage and/or access the Facebook page directly by clicking the link provided.
I know that a lot of clients are going to like Facebook Pages and the great thing is – it's simple to set up; there are only a few settings, but some of great options. And it updates instantaneously.
The only setting that you need is the name of your facebook page. Finished.
However, you do have some options. You might, for instance, wish to set the Width, Height and Alignment of the stack. A word of warning – don't set the width wider than the container it is in, Facebook Pages is not fully responsive and it can overflow.
Enable Small Header will reduce the height of the page header (active in the screenshot above).
Hide/Cover Header image deactivates the header image and leaves just the page logo visible.
Hide Call To Action Button will hide a CTA button, if you have on your fb page.
Show Facepiles will activate/deactivate the images of those that have liked your page.
Finally, you can decide which page tabs you would like visible within the stack – Timeline, Messages, or Events, or different combinations of each.
Facebook Pages will only display, well, facebook pages. It will not display personal pages or timelines, so if you want your visitors to see your cute cat, or how intelligent your goldfish is, you'll need to create a page to do so.
I can see this stack becoming very popular – even without those cute pets.
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