web counter
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.
By clicking 'Submit', you are giving your consent to having rjh-webdesign collect your name and email.
These details are used exclusively for the newsletter and will not be passed on to third parties!

As soon as I've added you to the mailing list, you'll receive a mail asking you to confirm your subscription.

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 to hear 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.

  • Stacks Image 76789
  • Stacks Image 76774
  • Stacks Image 76776
  • Stacks Image 76783
  • Stacks Image 76791
  • Stacks Image 76787

Looking for Inspiration?

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

The Latest & Greatest

Panels for RapidWeaver
Panels is Weavium's latest contribution to the Stacks scene. Full page animated panels that expand, ...
Album for RapidWeaver
Weavium builds stacks that are highly configurable. Album is one of those stacks. The Album settings ...
1LD Mega Menu for RapidWeaver
Over the last twelve months, One Little Designer has produced a number of menu stacks for ...
  • 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?

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.

By clicking 'Submit', you are agreeing to receive emails from Ninja News

Our newsletter is distributed via MailChimp, who is also responsible for maintaining our mailing list. You can read their privacy policy here.

Subscribe to the Ninja Newsletter

* indicates required

Subscribe to the Ninja Newsletter

You've reached the bottom of the page, thanks for reading.

If you enjoyed what you read, you can subscribe to the Ninja Newsletter and receive a review summary once a month.

Thanks for your subscription

We shall send you a summary of the Ninja News reviews once a month.
We do not send out any other mails and we shall not, under any circumstances, share your email address with third parties.