Bootstrap Image Box

By Timothy FosterTimothy Foster

Description

If you ever wanted a clean and simple way to add a caption or title to an image, this is the way to do it. The Image Box snippet allows you to decorate the display of an image and fit it to the theme of your website with code that is incredibly easy to remember.

In particular, the Bootstrap Image Box is a renovation over the old one. This snippet has been tailored to account for the power of the Twitter Bootstrap interface. Your images will now scale with differing screen widths so that users on all devices can have an excellent web experience.

Code

[[include :snippets:bs-image
|image=
|heading=
|caption=
|link=
|title=
|alt=
|max-width=
|width=
|float=
|force-float=
|kind=
]]

If you leave a field blank, then a default value will be applied. Therefore, it is not necessary to fill out all of the fields.

Note: Do not use quotes when filling out the fields.

Attribute Default Value Description
image Required! The URL of the image to be displayed.
heading Hidden The title of the image, displayed over the image itself.
caption Hidden Description of the image or its context, displayed under the image itself.
link The Image URL Web location that the user is directed to when the image is clicked. When supplied with a value of none, the link will be deactivated.
title Hidden Text that appears when the user hovers over the image long enough.
alt Image Unavailable Text that appears when the image at the specified URL does not exist.
max-width auto The maximum width the image should be. Scales when the screen width becomes small enough.
width auto Forces the image to always be at this width.
float middle Aligns the image to either the left or right.
force-float false When true, the image will always float regardless of screen size.
kind default Can be one of the Bootstrap predefined color schemes: primary, warning, danger, info, or success. Changes the scheme of the image box to that specified.

In action

Note: Your site must be Bootstrap-enabled to exhibit the full potential of this snippet!

You may see this snippet in action on the Bootstrap Playground. Try adjusting the screen width to observe how the image adapts!

Below is a quick snapshot of what the Bootstrap Image Box looks like along with the code that generates it.

wikidot_bs-image.png

[[include :snippets:bs-image
|image=http://timothyfoster.wdfiles.com/local--files/filestore:testimage/testImage.png
|heading=Sulphur
|caption=On the Periodic Table of Elements
|max-width=375px
|link=none
]]

CSS Customization

Like its predecessor, the Bootstrap Image Box may be easily customized for your site via CSS. Use the following classes for customization:

Class Description
image-box The overall Image Box
image-box-heading The heading area above the image
image-box-image The image area where the image itself resides
image-box-caption The caption area below the image

You may also use the following Bootstrap-specific classes that correspond to the kind field (see above):

Class
image-box-warning
image-box-danger
image-box-info
image-box-success

Thanks to tsangk for this great snippet: conditional-blocks


text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]



Other snippets posted by Timothy Foster

Carousel - 24 May 2015 01:18
Modal Image - 01 May 2015 17:20
Togglecheck - 17 Dec 2013 20:27
Alternative Specific Users Only - 11 Dec 2013 18:04
Image Box - 10 Dec 2013 03:14
Toggle Tag - 19 Jul 2013 11:13
Hide Tags - 14 Feb 2013 21:35
Plurality Checker - 16 Jul 2012 03:21
Mini Chat Area - 15 May 2012 12:04
Table Alterations - 16 Feb 2012 01:45
Fancy <hr> Dividers - 15 Feb 2012 00:51


Rate this solution

If you think this solution is useful — rate it up!

rating: +7+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License