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

Player 2 for RapidWeaver Update

Guest Post from Will Woodgate

There has been a major update to the ever-popular Player stack. Player remains the single-most sophisticated audio and video player available for Stacks. Nothing else compares. If you are serious about getting audio or video content into your website professionally, then this is absolutely the stack you need for the job! Its light codebase, attractive styling and broad feature set make it a must-have. Superbly engineered and the perfect stack to broadcast yourself with! Watch the tutorial video and download your free demo version today.
What's new in this update?
  • Rearranged, merged, regrouped and renamed some settings, to make Player even quicker and easier to setup
  • New options to choose how audio or video content is preloaded; to promote faster loading webpages
  • The download button now works on Safari 10 and automatically links to your MP3 or MP4 file
  • Totally rewritten support for iPhone and iPad. Where supported, video content now plays within the webpage instead of opening in a separate window. iPhone retains support for standard iOS media controls
  • Added support for optional OGV and WAV media types
  • Much easier (code-free) setup of player controls. You now have full control over which buttons are shown on mobile and the ability to easily change the order of controls (from left to right) using sliders in the stack settings. Font Awesome button markup is still editable
  • Added the option to play and pause video, by simply clicking on it
  • You can now Chromecast a video directly to a Google Chromecast dongle or compatible smart TV, from an Android phone or tablet
  • Conditional loading of jQuery 2 and Font Awesome 4.7 icons
  • New option to have audio or video content pause when it is scrolled outside of the viewport (a.k.a Facebook style)
  • Progress bars can now be animated with optional stripes
  • Added support for DOGs (digital onscreen graphics) so you can brand your video content with custom logo images or icons
  • Any empty audio and video sources are now removed from the source code, to prevent HTML validation errors
  • Refreshed the default appearance of the toolbar. Now using CSS flexbox to equally-space the controls on all screen widths
  • Support for optional title tooltips, on the player controls. This can improve accessibility of your completed player interface
  • When you send a video to full screen, it will now continue playing from the point it was in the webpage
  • New horizontal spacing options for the media duration and current time clocks
  • Got rid of some settings (like shadow effects) which are accomplishable with other free stacks (e.g. Shady)
  • Added a new optional setting, to apply basic copy protection to the playing media (this suppresses right-clicking when enabled)
  • Brand new animated user interface for the volume controls on desktop web browsers
  • Custom controls are now displayed within fullscreen mode
  • The full screen button toggles automatically between new expand and minimise icons
  • Support for realtime Google Analytics tracking, so you can easily and accurately record user interactions with your players
  • Captions and subtitles can now be toggled from within fullscreen mode
  • A new option to pause the audio or video when a user clicks anywhere outside of the Player stack
  • New RGBa colour picker for icon shadows, within the toolbar
  • We can now and fetch the audio or video duration time via decoded metadata, without needing to begin download of the media file
  • A large quantity of other minor fixes, tweaks and various 'under the hood' improvements

Player 2

Important: Player 2 now requires a minimum of RapidWeaver 6 and Stacks 3. This stack will no longer function with older versions of stacks or RapidWeaver.

Comments

Zoom, Zoom – Magnify images in RapidWeaver

Many online stores have a useful feature – if you hover over an image of the article you're viewing, the image will enlarge underneath your mouse so that you can view details.
Image Zoom from RWextras used to do exactly that, however, it disappeared for a while. Now it's back – freshly updated and free of charge!
RWextras Zoomy

Zoomy is the new name for a simple stack that enables an attractive magnification effect for RapidWeaver images. Magnification can take place on mouseover, grab, or click. There are also a couple of other settings built in to change aspects such as the zoom amount, animation speed and mouse cursor.

Zoomy will work either with images you drag and drop into RapidWeaver or images stored in a warehouse location. Compatibility is offered with all major web browsers. And Zoomy is responsive.


Stack settings.
Image source allows you to add either Dragged and Dropped Images, or Warehoused Images.
Mouse Cursor gives you the option of seven different cursor styles.
Zoom Trigger has the options Click, Grab, Mousover, or Toggle – Grab is my favourite.
Duration sets the fadeout time once the cursor leaves the image.
Magnification is a percentage of the original size for the enlargement.

Looking for further settings? You'll be hard pressed to find any, the above are all that's needed.

Zoomy is a neat little stack that does exactly as it says on the tin and has the advantage of being both responsive and free.

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

HotSpotsPro 3 For RapidWeaver

HotSpots from Stacks4Stacks has been around for a while now – since 2014 to be precise. At that time, I didn't review HotSpots myself, but published a guest post from Will Woodgate. Will has just given the stack a spring clean and released it as version 3. It has been greatly improved over previous versions.

HotSpots began life as a free stack. The free version is still available, but if you're going to use hot spots more than once, you'll find the pro version much easier to use!

What are hotspots, I hear you ask. Hotspots are active areas positioned over an image. They can be activated to display information, when the mouse hovers over them, or they can contain an external link that is activated on mouse click. The external link may, of course, be a lightbox or a gallery that opens on the same page.
A word of warning – If you have a previous version of HotSpots installed, uninstall it before you install the new version to avoid conflicts.

HotSpotsPro
Stack Settings.
The stack settings have been greatly simplified since the original version – in part, of course, due to the release of Stacks3.
When you drop HotSpots onto a Stacks page, you'll see a container with an 'add child' + button.
I recommend that you first add an image to the image well in the settings panel. The image may be local, or warehoused.

Once you have an image loaded, you can begin to add your hotspots by clicking the + button.
The main stack's settings will allow you to set up the general appearance of the hotspots. The very first setting is Edit Highlight. This is the highlight colour of the hotspot that you are currently editing – it makes it more obvious in edit mode, which of your 50 spots is currently active.
Lightbox – when activated, will enable the following lightbox settings:
Gallery adds next and previous arrows to the lightbox, enabling users to move to the next, or previous image.
Content Type is set to Auto[detect] by default. The options are AJAX, iFrame, Images, Inline, or Video. The lightbox function is demonstrated on the HotSpots product page.
Effect offers seven options for the image changes.
Next follow the colour options for the Window Shade, Title Fill and Title text.
Toggle will allow your visitor to toggle the annotations on and off to view the main image undisturbed.
Toggle Button and Toggle Fill let you set the colours for said toggle. The instruction text may be freely defined.
Tooltips – the hotspot info that is displayed on hover – may be deactivated.
The hotspots may display an icon which may be an image, or a font awesome icon. Place Icon Bottom Centre does just as it says.
The next eight settings are for the tooltip appearance.
Then finally, you will find the settings for the HotsSpot Global Styling and Mouse Cursor.

Once you have activated your first hotspot, you can click it (a great advantage over previous versions) and check the settings panel again.
The first settings are for the positioning, in percent, from the Left and from the Top of the image.
Then you have the Width, the Height and the Tooltip Position, the HotSpot Link settings, the Title Text and the Content Or Icon.
These settings are all best made in preview mode.

Each of the hotspots can be set to Custom Settings – an override that allows you to set the Background Fill, Borders and the Content settings individually for each HotSpot.

HotSpotsPro 3 is a great improvement over previous versions and well worth taking a look at.

Comments

Your Facebook Page Live In RapidWeaver

The rules that govern SEO state that a social presence will heighten your rating on the search engines. As such, most businesses have a facebook page. I hate Facebook, but I have a page all the same. Some time ago, RWtuts introduced a Facebook stack for RapidWeaver. Marvin just sent me a copy of the new version – Facebook Pages 2. I just took a look at it and I think a lot of you will like it.

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.

facebook pages
Stack settings.
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.

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.

My Image

Looking for Inspiration?

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

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