Clicky

Rule Of The Thumb
My Image

All the latest RapidWeaver Stacks reviewed,
plus the most important community news …

Stay up to date with current RapidWeaver developments

Rule Of The Thumb

A grid stack can be utilised to display a group of related images. Let's say a photographer wants to showcase a photoset; a web designer wants to display his portfolio, or a group of social icons. Thumb Grid from RWExtras makes it easily possible.

Thumb Grid is a versatile stack that will display a simple grid of images. The images should all have the same proportions, but if you have a portfolio of landscape images or websites, or a bunch of icons, this will usually be the case.

Thumb Grid can display either local, or warehoused images (the default setting is warehoused) at just about any size you please and has a plethora of settings to make sure that your images are presented just as you want them.

If we take a look at the Thumb Grid settings panel, the first settings are for the Image Width and the Image Height. Below these values, you'll find the Item Margin and the Item Padding, the Border Width and the Border Colours for the Static and Hovered states.

Item Radius will add rounded corners to your Thumb Grid grid items and Thumbnail Radius will round off the corners of the thumbnail content.

The Shadow may also be set for both Static and Hovered states, the settings are given as CSS values, e.g. box-shadow: 0 5px 5px 0 rgba(0,0,0,.25); – this might look unusual for the novice, but it's easy enough to set up. The 'box shadow:' is the name of the container and should remain unaltered. The first value (the default is '0') is the offset and if you wish to alter it, you can add a + or - value in px, where + offsets the shadow to the right and - to the left. The second and third values are the shadow spread and the fourth value is the shadow size. This should ideally be left at 0. The next four values are for CSS RGBa colour values. A dark teal with 60% opacity, for instance, would like like this: rgba(37,94,92,.60);

Thumb Grid's next two settings target the image opacity for the hovered and static states. 1.00 is the maximum. In the screenshot below, the static images are set to 0.50, whilst the hovered value remains at 1.00.

As you can see in the second screenshot, you can also add tooltips to the images. When you drop an image into the image well, you have an option to add a link to the image. If you add a Title to the URL panel too, the title will appear when the next setting, Tooltips, is activated. The Tooltips can be displayed with, or without the Tooltip Arrow. Max Width sets the maximum width of the tip. The next three settings are identical to the RWE Super Tooltip stack – Tooltip Animation; Tooltip Side and Tooltip Theme.

Thumb Grid will, as already stated, allow you to link its contents to external pages, or popups such as Pop Drop or Expose. It is therefore ideal for building your very own lightbox.

blog comments powered by Disqus

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