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.
[[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
Fancy HR Dividers - 07 Apr 2021 06:23
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
Rate this solution
If you think this solution is useful — rate it up!
[[include :snippets:bs-image
|image=https://cdn.vox-cdn.com/thumbor/op7DSI_UdWcXSbVGqA4wKYc2v3E=/0x0:1800x1179/1200x800/filters:focal(676x269:964x557)/cdn.vox-cdn.com/uploads/chorus_image/image/66741310/3zlqxf_copy.0.png
|heading=meme
|caption=a funny meme
|max-width=375px
|link=none
Hi folks!
I'm very new here, and have a couple of questions. Is there a way to make this image block wrapped by text (like it's done in a standard image wizard with floating positon. And another question - where do i put CSS customization to? Is it a separate field under this block or something "global"?
I changed my site to a Bootstrap-enabled one, and am using this snippet now; but the "clear,left" solution you gave me for making images float without the text wrapping doesn't work with this. Is there a way to do it?
Edit: Nevermind, it does work. It just wasn't showing in the preview.
Images still can't be stacked side-by-side though. ><
They can be stacked, but it is done using a table and putting the images in the cells. With Bootstrap, it can be conveniently done using their grid system, as I have it on this page. General syntax is as follows:
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
Oooh, I'll try this out, thank you!
Edit: Works fairly well, though it's tedious to make images float where you want them to, and it doesn't seem to be compatible with making text wrap. ><
How do you make a site Bootstrap-enabled?
?