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.
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.
|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.|
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.
|caption=On the Periodic Table of Elements
Like its predecessor, the Bootstrap Image Box may be easily customized for your site via CSS. Use the following classes for customization:
|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):
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!