Image Box

By Timothy FosterTimothy Foster

Description

Check out the Bootstrap Image Box, the new and improved version of this snippet!

One of the common desires of the typical Wikidot user is to easily add a caption or heading to an image. Furthermore, some users would like to easily fancify their image. However, the only way to truly do this is to make a grueling table every time. This CSI allows for a very simple and easy method to insert images, add captions to them, apply headings to them, apply a float, and adjust width.

Code

[[include :snippets:image
|image=
|width=
|float=
|heading=
|caption=
|link=
|alt=
|title=
]]

If you do not fill out a certain field, then a default will be applied. Therefore, it is not necessary to have all of these fields. Note that when you fill out the fields, you do NOT use quotes.

|image is the link to the image, or the image's full URL. For example, http://mashedmusings.files.wordpress.com/2009/03/galaxy_ngc_pic23941.jpg.

|width sets the width of the image. The default is 195 pixels.

|float sets the float of the image. By default, the image will center. Applicable values are right or left.

|heading sets a bold title above the image.

|caption gives the image a caption.

|link controls the window location whenever the image is clicked. By default, the link is the image's URL. If you define the link as @@, then the image will not be linked.

|alt allows you to define alternate text, in case the image becomes unavailable.

|title sets the title of the image, which is the mini text that pops up when you hover over the image

In action

Nebula
Image Unavailable
This is a test.

[[include :snippets:image
|image=http://mashedmusings.files.wordpress.com/2009/03/galaxy_ngc_pic23941.jpg
|heading=Nebula
|caption=This is a test.
|title=Nebula
]]

CSS Styling

You can modify the looks of the include via CSS. This way, you can customize the looks of the image box to match your site.

The CSI uses the following classes:

Class Modifies
.image-box The overall box of the CSI.
.image-box-heading This modifies the heading area above the picture.
.image-box-image This modifies the image area where the picture actually is.
.image-box-caption This modifies the caption area below the picture.

This page shows the CSI with custom styling.

The captions automatically come with a smaller font setting and italic styling. You can omit those by adding the following variable to your code:

|style=;

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
Bootstrap Image Box - 19 Jul 2014 01:27
Togglecheck - 17 Dec 2013 20:27
Alternative Specific Users Only - 11 Dec 2013 18:04
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!

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