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

Embedded YouTube Video in RapidWeaver

Marvin at RWtuts recently released an updated version of TubeWeaver. TubeWeaver is now fully responsive and takes advantage of the new YouTube API.

TubeWeaver is now at version 3. If you have version 2, you'll definitely want to update.
Version 2 from 2015 had no customisation options, version 3 changes that.

There's not a lot to explain about embedding a video on your RW stacks page.
Drag in TubeWeaver, insert the YouTube ID and that's it. There are, however, one or two settings that you might want to change.

Stack settings

First off, you'll want to set the YouTube Video ID. This is the code that appears at the end of the URL.
Player Colour – The new API allows you to choose between a Red, or a White progress bar.
Autoplay – is set to No by default.
Loop – is set to No by default.
Controls? – Is set to Display by default, but the controls may be hidden for a cleaner display.
Fullscreen? – When Deny is set, the video will not display any wider than the container that it is within.
Start At (s) – Set the starting point of the video, i.e. skip an intro sequence; get straight to the nitty-gritty.

TubeWeaver is quickly and simply set up. No bells and no whistles, but I personally find the Deny Fullscreen setting to be a useful feature.

Comments

Perfect Warehousing With RapidWeaver

Warehoused content keeps your RapidWeaver projects compact and reduces page loading times. We've all heard that, but uploading sites using the RW publishing controls doesn't allow us to freely access the resources folder and not everyone is comfortable using FTP software.
A perfect solution would be a secure file manager that allows you to upload your files via a browser and then to link to said files in RW.

Using Jannis of InStacks' own words Repository is the perfect solution! Judge for yourself.

Setting up Repository is a breeze. Drag the new stack into a Stacks page (it needs to reside on its own page), set a user name and password and publish.
Open up your repository directory in the browser and drag files into it, or download the files that it contains. There's nothing else to it.
Or is there?

First step – setting the user and password – Repository doesn't save passwords as plaintext, but uses a hash code which you'll first need to generate. That's simple enough – got to the Repository instruction page, scroll down to Generating your own password hash, click the link and enter the password you'd like to use. Click 'Generate Hash' and copy the result into the Password Hash field in the stack settings. Only a single user is allowed.
As a further safety precaution, Repository also has a Blacklist and a Whitelist. Lists of file extension that may, or may not be uploaded. This means that potentially harmful files will never land on your server. I tried to upload an .exe file and received an error message. Something tells me that someone is taking security very seriously here.

InStacks Repository

There is, of course, more to the setup than just entering the password hash. If you want your clients to be able to access the folder, there are a few options available in the Repository stack settings that will help improve security.

"But why would you want your clients to be able to access the repository?" I hear you ask.
Because if your images are warehoused and your client has access to them, he/she can replace them at will. And, if you've added text blocks to your project using a stack such as Embed from S4S, he/she could change the text content too!

Repository currently offers two flavours. Bootstrap, or Material Design. Both look quite attractive when loaded in your browser (you don't see a lot in edit, or preview mode), but more importantly, the user interface is functional. The menu at the top of the page includes Refresh; Search; Upload; New Document; New Folder and Logout.
It's not immediately obvious, but you can just drag files into the browser window to upload them to the server.

Text files can be edited directly by clicking the Edit button, but the most distinctive feature is a built in lightbox for images.

Stack Settings

Theme - Bootstrap Design, Material Design
Nav Back Colour
Nav Text Colour
Check Authentication - can be deactivated
Username
Password Hash
Language
Timezone
Open Files In New Window

Then follow a flurry of additional options to allow, or disallow: File Download, Copy To Clipboard, Copy/Move Files/Directories, Create Directories, Create Files, Edit Files, Delete Files/Directories, Extract Archives, Upload, Rename, Create Archives.
Show: Last Modified Date, File Size, Image Dimensions, Owner, Group Htdocs, Hidden Files.

If you need a secure File Manager, Media Browser, and Online Text Editor for RapidWeaver, Repository is most certainly a very good choice.

Comments

Pagelit Is The New Booklit For RapidWeaver

1LD just announced that the popular Booklit stack has been replaced by Pagelit. Pagelit has been rebuilt from the ground up with a focus on performance and realism using the latest web development techniques.

I used Booklit a number of times for online menus and catalogues, When I downloaded Pagelit, I didn't know what improvements to expect, but there are quite a few.
But let's start at the beginning – you may not have seen Booklit.

What is Pagelit?
Pagelit is a stack that will allow you to build an online book(let) with pages that turn when either the page, or the navigation is clicked.
Yes, there is software available that will transform a PDF into a flip book, but Pagelit lets you build your books, or magazines directly within RapidWeaver – using stacks to build the pages.

Booklit was, in my opinion, hampered by the fact that it only allow preset page ratio formats e.g. 16:9, or 4:3 etc. This limitation has now disappeared and you can build your books at any size you please – full page, if you wish – so, with the fact that you are using stack functions, you can just imagine the possibilities…

One important restriction has remained – as with most lightboxes, you can not use stacks within Pagelit that must load in an opened state when the page is parsed. Otherwise, almost anything is possible. The iFrame above displays a very simple example with images, or a single text box on each page. The page size is deliberately small at 400px x 400px. The images have not been optimised and are quite large. I have made no attempt at designing a complicated layout. The settings are otherwise the basic settings.
However, I may just publish my next book as a Pagelit book.

Due to the page ratio restrictions, Booklit's layout options were somewhat restricted and a page could appear disrupted at some screen sizes.
Pagelit has displayed no such problems in my tests – it is fully responsive – but you may wish to hide your book from view on mobile phones if you have a lot of text content.

The new page turning options in Pagelit are Book with hard cover and 'soft' pages as demonstrated above. Book with 'stiff' pages, similar to children's books and the previously available option with 'soft' Title page and content – Magazine.

Whereas Booklit could display an online option to show your books with a fullscreen overlay, with Pagelit, you will need to decide before publishing whether to display your book, or magazine inline, or as an overlay.

One useful new feature is the option to automatically add page numbers to your publication. The pagination may then be used as a navigation help, resulting in three methods of navigation – Simply by clicking on the next/previous page; clicking on the forward/back buttons, or by entering the page number.

1LD PagelitStack settings
General Settings
Type Book - Soft Pages, Book - Stiff Pages, Magazine
Page Width / Page Height
Margin Top/Bottom
Cover Size+ (%)
Navigation Page Click, Buttons, Page Click & Buttons

Page Settings
Page Rounding
Page Padding
Page Shading (enable/disble shadowing)
Enable Page Numbers
Font Size
Animation Speed/Quality
Pop Out (enable page overlay)
Loader Size / Loader Colour

The Page Child stacks also display settings when active – they will allow you to add full sized images, or a background colour to each page. Images may be local, or warehoused.

Pagelit is a unique stack for creating booklets within RapidWeaver. I can't imagine writing a 500 page book with it, but for an restaurant's interactive menu, or a product catalogue Pagelit is ideal. I'm sure that it will be even more popular than Booklit.

For further demos and a full list of new and optimised functions, list the Pagelit homepage.

Comments

It's Curtains For RapidWeaver, eeh by gum!

No, no, don't get me wrong; RapidWeaver isn't finished – not by a long shot. I mean the S4S stack, Curtains. Originally developed as Fancy Image by Tsooj Media, Curtains has now been rewritten by Will Woodgate and released as a free stack.
However, that is not to say that Fancy Intro is going away; it will be appearing on the S4S site soon with many new features.
LorumUtility is also a Tsooj Media stack that has been reworked and is now clothed as an S4S stack. Read more below.

Curtains is an animated splash screen for your more informal site. As you can see below, upon loading the site an overlay appears which will slide out of view to reveal the page below.

Curtains
Curtains is simple to use, but first you'll need a suitable image – so off you trot to Photoshop, or your favourite image editor and divide your image into two halves.
In Photoshop this is simple – drag a vertical guide into your image and you'll find that it will magnetically anchor itself to the centre of the image when it arrives there.
Hit 'C' for crop and crop the either the left, or the right half with the help of the guide. Save the cropped half and undo the last action – repeat the process for the second half.
When saving, set the jpg compression to around 4, or 5, then drag the images onto ImageOptim, JPEGmini etc, to further reduce the size.

You are now ready to drag Curtains into your Stacks page. Drop it at the top of your page so that it can load as the first stack. Now drag the left and right 'drapes' that you just created into the image wells and you're finished. Or not quite…
… In the stack's container, you'll see an intro text. Replace the text with your own greeting.

Stack settings
Start Delay sets the time that the splash screen will be displayed before the Headline fades and the curtains open.|
Fade Speed and Slide Speed can be set independently.
Cookie Expiration. It's often annoying to see the same animation every time you return to a website. Cookie Expiration can be set to n days (default), or changed to hours, preventing Curtains from reappearing during the defined period of time.
Asynchronous Mode. If async is set, the Curtains script is executed asynchronously with the rest of the page, i.e. the script will be executed while the page continues the parsing. If async is not set, the Curtains script will be executed when the page has finished parsing.
Overlay Style. The default setting is CSS Gradient. The Options are Dragged and Dropped, or Warehoused images.
Tile Images to Fill Drape. If your images are smaller than the page, they may be tiled.
Text Colour, Text Shadow Text Size, Bold Curtain Text and Italicised Curtain Text are all self explanatory.
Curtain Shadow is activated by default.

Now you're set to go!
Why the Curtains Icon is a shower head, I can't say, but Curtains is a free stack and you don't look gift horses in the mouth!
You can watch the animation above again by reloading the page.

Now for something entirely different…
You may (or may not) have wondered about the dummy text in the animation above. I'm going to tell you about it anyway!

LorumUtility
When building a new website, whether for yourself, or for a client, it's an advantage to be able to see what the layout will look like when filled with various text formatting and images. LorumUtility will assist you by quickly adding dummy content to your page.
Now, as every standard text, or paragraph stack already contains some form of Ipsum text, I asked myself why on earth I would need a stack that does exactly the same, but is otherwise useless?

Because LorumUtility is extremely versatile.
When you drag LorumUtility onto a Stacks page, you will simply see the word 'Paragraphs' in edit mode and when you switch to preview, you will find five paragraphs of the standard and complete Lorum Ipsum text (seldom beginning with 'Lorum Ipsum').
You can choose between 14 Ipsum Dictionaries, ranging from Bacon Ipsum to Yorkshire Ipsum. Cockney Ipsum is sadly missing, but here's Cupcake Ipsum:

Marzipan halvah caramels carrot cake sugar plum bear claw chocolate bar jujubes croissant pie liquorice macaroon sweet roll brownie dessert tootsie roll icing pastry muffin fruitcake tart donut cheesecake candy canes oat cake gummies soufflé dragée tiramisu gummi bears topping sweet cookie lemon drops caramel corn pudding apple pie powder biscuit danish chocolate cake candy ice cream toffee jelly wafer jelly-o cake chupa chups jelly beans gingerbread sesame snaps cotton candy lollipop cupcake applecake chocolate bonbon marshmallow soufflé apple pie sweet caramels brownie sugar plum biscuit bear claw cupcake danish applecake cake caramel corn tart lollipop marzipan!

But LorumUtility doesn't stop here. It doesn't just allow you to add n number of Paragraphs, but also Blockquotes, Headers, Images (CSS and Photos), Ordered and Unordered Lists, a Paragraph with n words, a Sentence with n words, or n number of words without punctuation.

LorumUtility Formatting will allow you to set the Colour Definition, Font Definition – Inherited, or Custom, Font Size, Paragraphing – Size; Inherited, or Custom and the Text Alignment.

If you are pressed for time and need to demonstrate a new website layout, LorumUtility will allow you to do so speedily and efficiently. You can effortlessly generate a variety of different content elements, with the option to either use the styling inherited from your RapidWeaver theme, or experiment with custom styling applied to the written content. There is no limit to the number of LoremUtility stacks that can be used on the same webpage.
The Javascript that generates the text will load a different wording from your chosen dictionary every time the page is reloaded.

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

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