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.
Type Book - Soft Pages, Book - Stiff Pages, Magazine
Page Width / Page Height
Cover Size+ (%)
Navigation Page Click, Buttons, Page Click & Buttons
Page Shading (enable/disble shadowing)
Enable Page Numbers
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.
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 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.
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!
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.
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.
So let's get print products out of the way first. Lets take an image of 500px X 375px. If you set it to 3dpi and print it, the print will have 3 X 3 dots spaced across each inch. The physical size of the print will be a whopping 168 X 125 inches, but you'll need to stand around 100 yards away to recognise it.
If we set the resolution of the exact same image to 300dpi the physical size of the image (kb) remains exactly the same, but when printed it will have 300 dots spread across an inch. The print size will be 1.67 X 1.25 inches – little better than a thumbnail.
A comparison of 3dpi and 30 dpi in print
To Scale, but not actual size
Depending, of course, on your screen resolution (ppi)
Now let's take a look at video screens. Video screens only display pixels and are set to a screen resolution in ppi (Pixels Per Inch) a common setting today is, for instance 1920px X 1080px.
Any dpi information contained within an image is disregarded. An image with a pixel size of 500px X 375px will always display at 500px X 375px – on your monitor, on my monitor, or on Joe Blogs' monitor regardless of the dpi settings. It will never change either its pixel size, or its appearance. The physically displayed size will depend on your monitor's ppi settings.
Here's Proof That Video Systems don't use dpi
Don't believe me? Then take a closer look at the two images below. The first is set to 3dpi, the second is set to 300dpi. Both are 500px X 375px.
Do you see any difference? I don't. And yes, I have my glasses on.
Image set to 3dpi
Image set to 300dpi
Still don't believe me? Then drag the images to your desktop (or right-click and save.)
Don't use the clipboard function. The copy function won't copy any dpi information and Windows image editors will automatically set the resolution to 96dpi, whilst Mac editors will set the resolution to 72dpi.
Now open both images in your favourite editor and check the size and resolution for yourself.
Believe me now?
In the end, it's all just pixels.
There is now a new answer to question two. PDF Viewer 2 from RWtuts.
Marvin has just completely rewritten PDF Viewer – it is now fully Stacks 3 compatible and includes Sparkle updating.
I have a client (a charity) that publishes a regular newsletter. The staff members responsible for the publication are completely computer illiterate, but they can save a text document to PDF.
With MountainDuck, they can upload the PDF to the server (overwriting the old version) and Voila! the newsletter is instantly displayed on their website.
And, thanks to PDF Viewer, the PDF is displayed blazingly fast – my 57 page test was instantly viewable; much faster than accessing it directly via the browser – and it's also fully responsive.
PDF Viewer is not a complicated stack, in fact there are just three settings:
At the bottom of the published stack there is an indication of the page you are viewing (5 / 57) and magnification controls. In the top right hand corner there is a Pop-Out button that will open the PDF in a new window and allow your visitor to download and save the PDF.
If you need PDFs to be displayed in Rapidweaver, PDF Viewer is the address to visit!
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