Clicky

RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Image Card. A Free Weavium Stack For RapidWeaver

We talked about Weavium yesterday. They are a relatively new stack developer with a few new, but really interesting stacks. Two days ago Image Card was announced as a free stack. I've taken a look at Image Card and while it is a very simple stack, it's also quite unique.

Image Card. What does it do? It displays an image with a colour overlay, a text and a link icon.
But it does the above in a unique way.
Supposing you have an image gallery, or a portfolio, or you'd like a navigation grid to other pages…
Drop Image Card into a Stacks page and add an image to it. You can add a colour overlay and a title, or a short text – link is already provided – and you have a cool link box to your new page. It is even animated – the whole card moves up, or down when hovered.
Images scale within Image Card, to fit the longest dimension. But as you are able to set the card's height, you can make adjustments to the image display.
Weavium Image Card

Stack settings

General
Fill Mode – Percent, Pixel
Percent/Pixel Width
Alignment – Left. Centre, Right
Image – Drag & Drop
Set Link

Card
Mobile/Tablet/Desktop Height – px
Margin – Vertical, Horizontal
Padding – Vertical, Horizontal
Overlay Type – Gradient, Colour
Overlay Colours/Opacity
Drop Shadow

Caption
Hide Caption
Title Font – Choice of 14 Fonts + Custom
Font Weight
Mobile/Tablet/Desktop – Font Size, Line Height
Text Shadow

More Button
Hide Button
Button Size
Icon Size
Button Radius
Border Thickness
Hover Icon Colour

Hover FX
Overlay Opacity
Shift On Hover
Shift Amount (px)

That's a pretty impressive list of settings for such a simple looking stack and just goes to show how seriously Weavium takes their work.
What's more – Image Card is free!

Flexible Grid Stack For RapidWeaver

"I'll be back…", he said. And here he is as Gridinator! You may already have heard about Weavium – they are a new stacks developer with currently four stacks in their lineup. They're so new (a couple of months), that they aren't even listed on RapidWeaverCentral yet (shame on you Marten…) and little is known about them/her/him.
Weavium announced two stacks yesterday 'Image Card' and 'Gridinator'. More about Image Card at a later date.

Gridinator is, as the name implies, 'The Simplest And Most Robust Grid Stack That You've Ever Seen' (taken directly from the developers web page). And it is great stack.
Build a grid with up to 50 (in words – fifty!) columns and fill the columns with whatever you please.
A single column can span multiple grid sections making Gridinator very adjustable. Build just about any page structure that you can imagine.

Weavium Gridinator

The page section pictured above was built in just five minutes without having previously read a manual. And that includes the addition of Image Card (left column).

When you drop a Gridnator stack onto your page, you'll see a container for the first column, into which you can drop your stacks. The + button will add a child stack for the next column. The stacks interface is rather interesting – it displays a simplified image that shows how Gridinator will display on a desktop, tablet, and mobile.

Weavium Gridnator
Stack settings

Trouble Shooting
Show Edit Helpers – Displays a frame around each column in both edit and preview mode and displays the breakpoints.
General
No Outer Gutters – Deactivated by default
Max Width
Tablet Break
Mobile Break
Columns > Desktop – Number of Columns Per Row
Gutter Width – Left, Right
Column Padding – Horzontal. Vertical
The Column settings are repeated for Tablet and Mobile.
And that's all there is to it.

Weavium has a special introductory offer with 25% off – and the offer includes Image Card. So grab it while its hot. You won't be disappointed.
And about Image Card — I'll be back…

Comments

Page Loaderz for RapidWeaver

Some years ago, I purchased ourGlass from One Little Designer. This was some time before Foundation came along with integrated page loaders. I used ourGlass exactly once. I wasn't impressed by it. 1LD obviously became dissatisfied with ourGlass too because it has just been replaced with Loaderz.

Loaderz is a completely different kettle of fish. It is simple to use, flexible, versatile and comes with 10 different animated loaders.
Flexible? A page loader appears when a page is loading and disappears when it's ready for viewing, right?
Well Loaderz is different. It can, of course, be set up to do exactly what you'd expect it to do, i.e. the above. But what if you've got a video banner on the page that takes an extra second or two to actually play the video? With Loaderz, you can set the length of time that the loading animation should be displayed.

Or let's say that you have a video on your page that's set to display when the page is scrolled down, or a stack that connects with a database and takes some time to load…
… drop Loaderz onto your page, drop your content into it and Loaderz will display an animation until the content has loaded.

1LD Loaderz
Stack settings

Testing – Load Forever (useful for the setup process)
Hide On – Page Load, After Set Time
Position – Fixed, Inline (Wraps Content)
Z-Index – Couldn't count the default number of 0s!
Background – Off, Colour, Gradient, Image
Padding
Opacity
Show Loading Text
Loader Type – 10 animation options – the screenshot above displays 'Android Material' and 'Rotating Circle With Image' You can add your own image, or logo.
Size – Loader Height in px
Max Width – Loader Width in %
Colours – 1,2 and 3
Percentage – Percentage Of Inner Circle

Loaderz is a great option for both page and content loader animations. It is highly configurable and you're likely to see it on one of my next sites.

Comments

Expanding Content in RapidWeaver

There are numerous ways of adding extensive content to RapidWeaver without disrupting a page's design. One Little Designer recently added Expanse to their lineup; a clean and efficient solution to the age-old problem.

Expanse is an animated lightbox stack that appears on your page as an info card. What said card looks like is entirely up to you.

If you drag an Expanse stack onto your page, the initial settings display containers for an image, a headline, a subhead and a Stacks container. Both the default width and height are set to 320px. Once you have dragged in an image and added your content, you can check the preview. It will display your image with a plus button which, when clicked, expands the card to fill your page.
Adjusting Expand's initial height will allow more, or less of your content to be displayed below the image – the Header and subheader, for instance, or the first few lines of text.
If we explore further, we find that there are three different card types: Template | Icon Button (default), Custom | Hover & Click and Custom | Button. The two custom cards allow you to create unique layouts for the cards.

Both Custom versions of Expanse have a Stacks container for your content, into which you may add as many stacks as you wish. The difference between the two, is that Custom | Hover & Click displays an overlay with a text – "Click To Open" for instance – when hovered, whilst Custom | Button has a button to open the lightbox.

1LD Expanse
Stack settings

The first settings are Animation [type] and Speed. There is a choice of eleven different animations for the lightbox display.
Card Layout
Card Type – As mentioned above
Card Width, Card Height, Margin T/B
Card Styles
Header Image – Drag & Drop
Card Colours – Background, Title, Subtitle, Text
Button Colours – Background, Icon, Close Background, Icon
Button Icons – Four different button options
Inherit Link Colours (active by default)
Border Radius
Shadow
Title Font – (default: Inherit)
Text Font – (default: Inherit)
Truncate Type – Ellipses, Gradient Fade, Clip

Expanded Layout (Lightbox settings)
Content Width
Margins
Padding T/B
Padding L/R
Z-Index

Expanse is very quickly and very easily set up and can display both your condensed and your expanded content just as you wish. There are a couple of sites that I'd have designed differently, had this stack been available earlier.
The demo page is well worth a look at.

Comments

Image Mapper for RapidWeaver

In June of this year, I reviewed HotSpots Pro from S4S. A few days ago Will re-released an updated version of the one-time Tsooj Media stack ImageMapper – also as a Stacks4Stacks product. Hot Spots; Image Maps — potentially the same thing, so does it make sense to have two stacks that, essentially, do the same thing housed within the same stables?

Let's do a quick recap. Hotspots allows you to overlay image areas with live rectangles, or with Fontawesome icons. The rectangles and icons can each be linked to a URL, for instance, or a lightbox.

S4S Hotspots
ImageMapper allows you to overlay an image with rectangles, triangles, hexagons and circles, but more importantly – with a mapped area…

S4S ImageMapper


… And I was astonished to find that it's easier to add a polygon form than it is to add a simple circle, or square.
So how does it work? First, obviously, you drag ImageMapper into a Stacks page and add an image to the image well. The image may be dragged and dropped, or warehoused.
Adding a polygonal area to your image is simple – Activate Show Coordinates Inspector in the stack settings panel and switch to preview. With the crosshairs that are now available, click around the area that you'd like to highlight, clicking on the starting point a second time to close the polygon, just like Photoshop etc.
Below the image, you will now see a list of your coordinates. Copy the coordinates, paste them into the ImageMapper Area child stack, deactivate Show Coordinates in the main stack and switch back to preview.
Now when you hover over the enclosed area, it will have a highlighted overlay with a tooltip. You can add a Link to the ImageMapper Area stack, which you can set to open a URL, open a lightbox, or to a link somewhere else on the page – product details, for instance.
In the screenshot above, I have superimposed four different image maps. They appear one at a time, of course.

So how do you add something as 'simple' as a circular overlay? You need three coordinates: 1 – the position from the left of the image; 2 – the position from the top; 3 – the radius of the circle – all coordinates are separated by a comma. My tip: In the ImageMapper Area child, choose your shape – Circle, or Rectangle and then adjust the size and position whilst in preview.
For more complicated shapes, such as a triangle, or an octagon, load an image of the shape to begin with; map the shape out with the crosshairs and then copy the coordinates into your final image The base stack provides a square, a triangle, a circle and a hexagon to get you started. The hexagon is already mapped out.

Stack settings

ImageMapper
Data Source – Set up your Image maps using either the child stacks, or an HTML image map
Image Source – Dragged and Dropped, or Warehoused
Show Coordinate Inspector – See above
Area Mousover Colouring – Fill Colour, Stroke Colour
Fill Opacity
Stroke Opacity
Stroke Width
Fade Speed

ImageMapper Area
Area Title – Title for the tooltip
Area Link
Area Coordinates
Custom Area Attributes – add a class to the overlay

So does it make sense to have two similar stacks in the same stables?
Absolutely! ImageMapper is ideal for those more complicated image maps.

Comments

Show more posts

  • Stacks Image 35399
  • Stacks Image 35402
  • Stacks Image 35405
  • Stacks Image 35408
  • Stacks Image 35411
  • Stacks Image 35414
  • Stacks Image 35417
  • Stacks Image 35420
  • Stacks Image 35423
  • Stacks Image 35426
  • Stacks Image 35429
  • Stacks Image 35432
  • Stacks Image 35435
  • Stacks Image 35438
  • Stacks Image 35441
  • Stacks Image 35444
  • Stacks Image 35447
  • Stacks Image 35450
  • Stacks Image 35453
  • Stacks Image 35456
  • Stacks Image 35459
  • Stacks Image 35462
  • Stacks Image 35465
  • Stacks Image 35468
  • Stacks Image 35471
  • weaverthemes
  • Stacks Image 35477
  • Stacks Image 35480
  • Stacks Image 35483

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

x

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.

* indicates required

Contact Information

My Image

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—16

This website was built with loving care on a Mac using Foundation. For more information, contact me.