Clicky

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

Just In Time – Advanced Publishing for RapidWeaver

Back in February, 2015, I compared five sets of stacks that allowed time-based publishing with RapidWeaver. One of the best of those stacks was Advanced Publisher from Tsooj Media. Advanced Publisher is now even better than before. It has been rewritten and improved by Will Woodgate and has been housed within the S4S stables.

You've prepared an article that you don't wish to appear until August 25th, or you have a special promotion that is only available between September and November and only during business hours. Or maybe you have student's examination results, or study material that should only be available to a specific student, or group of students…

Advanced Publisher from Stacks4Stacks is a suite of five PHP based stacks which will allow you to publish time sensitive content at specific times, or when a URL query is fulfilled.
Because AP is PHP based your content will never be loaded unnecessarily. It will never appear within your code until it is requested. This means that advanced users and hackers can not view your unpublished content until the defined time range has been reached, or the specific URL query has been requested.
The inclusion of the AP Secret stack gives you the option of supplying unique content to unique visitors. You can also create your own tabbed content using AP Secret, to ensure that your pages load faster.

Advanced Publisher

Stack settings

A single Advanced Publisher Base stack must be present on the page containing your AP content, preferably above the other AP stacks. The AP Base stack allows you to set the time zone that your scheduled data will appear in. The time zone can be set to 'Webserver', 'Predefined' or 'Custom'. Predefined gives you a choice of locations from each time zone around the world – including the half and quarter hour steps of some locations. If you choose custom, you can enter the zone manually, e.g. Asia/Kathmandu.

The AP Base Stack can refresh the pages content every n minutes and also has options to display or hide the preview in RapidWeaver and to display the publishing details so that there will be no surprises if you'd forgotten that a previous promotion, or article was on your page. It's interesting to note that the publishing details also include the server's PHP version.

The AP Days Stack is for stacks that you wish to be displayed on Mondays, Wednesdays and Fridays; Mondays to Fridays, or Fridays to Mondays, for instance. The settings panel contains checkboxes for the days of the week that content is to be published on.

AP Days also has a choice of settings to publish content on Even Days, Odd Days, the First Day of the Month, Last Day of the Month, Month Days (with settings for up to four separate days), Particular Month Days (with settings for the range of days) and, as with all of the Advanced Publisher Content stacks, an option to display alternative content outside of the publishing dates.

The AP Time Stack supplies the options for your publishing timeframe. This can be set to
Full Date. Full Date can be set to Display: Not Until (Start Date), Between and Only Before, With a Date and Time Range for each of those settings.
Repeatable Date has the same settings.
Hours and Minutes also has the above settings, but is restricted to a Time Range
Months also shares the above settings, but is restricted to months.

The AP Weeks Stack will allow you to publish content during different weeks. You may choose Odd Weeks, Even Weeks, Week(s) with options for up to four different weeks, Weeks (Not Until), Weeks (Between) and Weeks (Not Before).

The AP Secret Stack will allow you to publish stacks that are only accessible when a URL query is fulfilled. This means that you may either add a specific link to your page to display your hidden content, or you could give your user a page link to access specific content within your page.
The stack settings allow you to define a Secret Key and a Secret Value. Only when both are contained within the URL e.g. ["?secret_key=secret_value"], will your content be revealed.

Note: AP stacks can be nested to further refine your publishing dates. Hence, if you wish your content to appear during weeks 32 and 33, but only between the hours of 9–5, you can carefully nest your AP stacks to fulfil this wish.

Advanced Publisher 4 has been greatly improved over the previous version. Everything that was missing in version 3 has now been added. As Will himself says: It's like having a personal assistant for your website!

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

Press The Right Buttons In RapidWeaver

Already a month old, I've just been able to test Press from 1LD. Press is a button stack that works with any RW theme. 'But there are dozens of button stacks for RW', I hear you say and you are correct. Press, though, is probably the biggest hit since ButtonMaker graced us with its presence a few years ago.

Press is an extremely versatile button stack that will allow you to create just about any button that you can imagine. Flat buttons are currently the mode (don't worry, fashions change and flat will be replaced by something else soon – and we'll find the new 'modern look' just as cool). 1LD acknowledges the current trend, so obviously, when you drag your first Press stack into a project, your new button will be flat and black.

Want flat with a very subtle gradient, or pill formed with a less subtle gradient, perhaps a patterned background? Not to forget Ghost buttons, of course – they're still semi fashionable; Press can do them all and more.

1LD - Press
And Press doesn't stop at simple buttons, it can build button groups too. If you need to build a menu bar of your own, design the basic button that you'd like, drag a Press Group stack to the page, drag your button into it and duplicate it inside the Group as often as you need it.

1LD Press Group
Stack settings
If I go through all of the settings available in the two Press stacks, you'll still be reading next week.
Press has similar settings to previous 1LD stacks recently reviewed here. The settings groups are:

General
Button Text
Button Icon
Button Initial State
Button Hover State
Button Active State
Animations
Advanced (Custom Classes)
Each of the above groups contains extensive settings.

Press Group contains settings for the Shared Button Styles – Group Radius, Button Margin and Button Padding.
Press group and the contained buttons are responsive, adjusting to all screen sizes. The only thing I miss is an option to display a hamburger on mobile devices.
You can read the full instructions for Press here.

1LD Press Group

Comments

Flexible Columns in RapidWeaver With Blueprint

A blueprint is a reproduction of a technical drawing, documenting an architectural or an engineering design, using a contact print process on light-sensitive sheets. The process was developed in the 19th century.
Fast-forward to 2017 and a blueprint is an extremely flexible system of columns in RapidWeaver developed by BWD.

Andrew Tavernor has done it again! If Andrew excels at one thing, it is extending the possibilities available in RapidWeaver (his support is also second to none). Blueprint is another set of stacks to prove the point.

If you need a column that has 45% page width within a Foundation project (or any other project), instead of adhering to the strict 12-column layout, Blueprint will come to your aid. Two columns with 85%, divided into 60/40% columns – no problem for Blueprint. Tired of not being able to view your SVG's in RW preview…
…read on.

Blueprint is currently a set of three stacks. ONE, Sidebar and Blueprint SVG.
ONE is a single column stack. O.K. there are dozens of those available for RapidWeaver, but it isn't until you investigate further that you realise just how incredible ONE is.
Blueprint will free you from the constraints of Foundation and Bootstrap (better known to Weavers as Foundry), by allowing you to define column widths in % instead of 1, 2, 3, etc. columns of a twelve column layout grid. But Blueprint doesn't stop there.
Let's say, you'd like to float an image caption over an image within a text block, whilst indenting the text. A simple undertaking with just three ONE stacks: Starting at the top – position your text and image within a ONE stack and go to Add Spacer in the settings panel and define the Width and Height of the space. This will move your content to the left or the right within the ONE stack, depending on the setting you chose.
Next add your image caption to a ONE stack and set the stack width to say, 10%. If your first stack contains more than a couple of lines of text and a larger image,drop the 'caption' stack into a third ONE stack (for the runaround). Just like Sections Pro, this third stack will automatically adapt to its content width.
Now go to the Overlap settings of the 'caption' stack, set it to Move Up and set the overlap in pixels.


Blueprint ONE


The Screenshot above is made entirely with the standard Stacks elements and Blueprint ONE. A setup such as the one above will, of course, require some tweaking for the mobile layout.Blueprint

Sidebar – the christening was perhaps made before the full potential of the stack was realised – is a two column stack that is, of course, ideal for sidebars, but is also flexible enough to build complex column layouts that would otherwise be impossible – especially with Foundation, or Bootstrap.


Blueprint Sidebar

The screenshot above demonstrates a possible use as the name states – a sidebar – a container for a menu. No more messing around with various column settings, trying to get approximately the width you'd like, but not quite because of those damned invisible columns in the background.
Set the Aside Position to Left. Set the Width to 5%. Define a Maximum Width and you're good to go! Take a closer look at http://bit.ly/vertitab

But Sidebar feels perfectly at home when functioning as a normal two column stack. A contact form, for instance. 70% of the page width, with 45/55% columns:

Blueprint Sidebar
Childsplay with Sidebar, but an hour's work with standard Foundation stacks – and then still not perfect. Not that I'm dissing Foundation, it's the only theme that I currently use, but with the addition of Blueprint, life suddenly gets so much easier. And – Sidebar stacks can be nested to create extremely responsive three, or four, (or five…) column stacks.

Annoyed that you can never see, or exactly position your SVG's in RW edit mode? Blueprint SVG to the rescue!
Open your SVG in a text editor, copy the content between (and including) the <svg> tags and drop the text into Blueprint SVG. The result: Not only can you suddenly see your SVG, you can also edit the stroke and fill colours from within the stack settings – apart from being able to just set the size and alignment.

A tip: if you're having problems with your SVGs, take a look at this page. You can drop in your SVG files and it will convert them to 'clean' SVGs without the added data that some illustration apps add.

I could probably write a book about Blueprint. Instead, I advise that you RTFM i.e. that you download and dismantle the demo project and take a look at the instruction videos that Andrew has kindly put online.

Blueprint is another game changing set of stacks from BWD.
Whilst the stacks are free to download, please don't forget to make a donation. Andrew spends up to 18 hours a day and more developing and supporting BWD stacks. He also pays ever rising annual fees to host them.

Comments

Smoothly Scrolling RapidWeaver Pages

Just two days ago there was a question on the Weaver's Space "How do I get a page to smoothly scroll to an anchor from a text link?"
The question was answered immediately – "SmoothScroll". Now this is strange, as I'd only received Jeroen's newsletter (Marathia's Stacks) just ten minutes before! Some people, you see, do open newsletters when they flatter into their mailbox!

SmoothScroll is a stack (or rather – a set of three stacks) that does exactly as it says on the tin – once it's placed on your page, the page will smoothly scroll to its position when a link is clicked.
Three stacks. SmoothScroll is the central stack, but it is accompanied by Anchor To TopBottom and Menu ToAnchor. Now, if I'd had these stacks three days ago, I'd have known exactly where to utilise them. As it is, I settled for a more complicated option.

SmoothScroll itself is a very simple stack. Drop it on your page and set an Anchor Name – a unique ID (you'll have more than one on your page – right?). Then all you need to do is add a link '#[Anchor Name]' to a text, image, or button. As simple as that. When the link is clicked, your page will smoothly scroll to where SmoothScroll is positioned.

SmoothScroll
Now it's difficult to make a screenshot of a smoothly scrolling webpage – just believe me – it works perfectly! I spent a couple of hours testing the various possibilities.

So what are the other two stacks?
Anchor To TopBottom is an anchor stack that can be placed at the top and/or bottom of a page. It has just two settings Set Anchor (top/bottom) and an ID. Once again, a link with '#[ID]' will send you to whichever position you have defined.

Menu ToAnchor is slightly more complicated and I needed Jeroen's demo project to get my head around it. But then, I'm thick sometimes.
Let's say you have a single page website and you want the menu bar to display the SmoothScroll sections on your page.
Define the sections using SmoothScroll and then drop Menu ToAnchor onto your page. Now add an Offsite Page for each of the sections to your project, give the pages the same name as your sections ID (just so that they are easily identifiable, then simply set '#' as the URL and activate Use Redirect Page.

Menu ToAnchor already displays a link – give this link the same Anchor Name as your first section, in the stack's settings and then go to Set Link and link to your Offsite Page.
You can now click the + button to add a child stack and repeat the process for as many SmoothScroll sections as you have on your page.

The result – your menu bar is now populated with the SmoothScroll sections on your page! When you click a menu entry, your page will smoothly scroll down (up, if you have a sticky menu) to the appropriate section.
You can, of course, combine all three linking methods as displayed in the screenshot above. I.E. in the menu bar, you'll see the chapter names then, underneath the chapters, you'll see links to each of the other chapters, plus links to the top and bottom of the page.

At first glance, SmoothScroll would seem to be a simple stack, but lot of thought has gone into it and I can highly recommend it.

Comments

Show more posts

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. 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 tohear 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.

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.

Subscribe to the Ninja Newsletter

* indicates required