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 |
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!
Doesn't the SCP wiki have its own version of this, too? i think it was this:
I'm not sure if it works or not, or at least, works as well as this does, but I would assume that it does, since it seems to work for most people, though i honestly prefer your version of the image box.
It would be nice to have the option of using divs instead of a table to display this code.
Better than the new one. That one did not allow me to remove the link.
They both default to a page, which doesnt have the image.
http://rokonuxa-blog.wikidot.com/castlevania-44-12617-jpg
that is an issue, which you may want to look into. Otherwise, great!
Where have you found this "That one" ?
On which page ?
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
I found on your page http://rokonuxa-blog.wikidot.com/main:gallery this image.
http://rokonuxa-blog.wdfiles.com/local--files/main%3Agallery/Castlevania_44_12617.jpg
What does not work ?
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
I found on your page the line:
That is really new for me after 9 years with wikidot :)
( I never used Flickr )
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
On "the new one", you remove the link with "link=none": http://tarm.wikidot.com/bs:image-box-remove-link
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
Caption -style: as it is written and explained in the page above:
Standard ( default ) is style=font-size: 80%; font-style: italic;
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
How does one force a line break between images, so that the page doesn't try to bunch them all up on one line? And is there a way to make it so the text doesn't wrap?
You have to play with the float= parameters.. float=left means the page renderer tries to "wrap" the image on the eft side with the following text ( or images or other "div" 's ).. UNTIL there is a "float=clear,left" or "float=clear,both"
or with "float=right" and to close it with "float=clear,right"
The general line ~~~~~ has the same result as a
[[div style="float:clear,both"]] followed by the end line
[[/div]]
but this shifts in most cases the following content under the nav.side end…
Easiest way is to use the tables like in the http://try.wikidot.com/foster:image-csi example - but without all the CSS codings.. with such tables you can decide manually where the images land on the page … and the text around it or where ever..
edit:
Forgot to notice - there is also a standard float=auto behind all the codings available.. no idea what this renders than.. I used it in my example..
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
Thanks! Getting rid of the wrapping also solved the problem of all the images trying to smoosh on one line…but now I don't know how to put two or three on one line and have it look relatively neat without making a gallery…I miss Wikispaces and its WYSIWYG editor. :< This is so complicated just for some captions and side-by-side images! XD
OH. I keep thinking of questions. XD Any way to have the image automatically display at its original width, rather than setting your own or defaulting to 195? Or will I just have to enter their original widths manually? XD And is it possible to use a height parameter with or instead of the width one?
3 Pictures:
1. float=right
2. float=right,
3. float=clear,right
should put it in this way ( theoretically )
I have no idea … but think you have to create your "own" include for such kind of "snippet" - without the width parameter ( and the default of 195px )
With this original snippet there is no other chance.. but you can copy the 2 snippets (includes) codes to your site and use it as a personal variant wthout the widthm but with hight instead… ( or build a 3. include wihtout both arguments..
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
Yeah, I tried that, it doesn't work, if the first image is the same or greater height than the next one, then the next image wraps too… XD That's why I asked. But no matter. For now, I'll just keep them unwrapped and on their own lines. I have no idea how to do that other stuff I'm afraid. XD
One last thing (for now) — I've noticed that if I set my own width for an image, instead of leaving it blank, the caption will insist on displaying in one line (however much that may widen the box past the image) instead of line breaking when it gets to the edges the way it does if I leave width blank. :/
Try for image - original settings:
| width=;
try for high settings:
| width=;" height="100px;" ( but the image bx is wider because f the text..
try for width + high settings:
| width=200px;" height="100px;" ( but the image bx is wider because f the text..
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
The reason why the caption - text is "centered" lies in the code of the CELL styling:
try to change the | style=text-align: left; … could be the new style overwrites the forst one
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
if you want it more like a gallery than there are different solutions if there are more images available and to show:
http://community.wikidot.com/forum/t-1056180?from=activities ( slideshow)
http://community-playground.wikidot.com/ Community Playground with
http://community-playground.wikidot.com/gallery-central-storage-area-for-graphics-pictures
http://community-playground.wikidot.com/gallery-with-external-images Gallery with external images
http://community-playground.wikidot.com/pictures-with-footnotes Pictures with footnotes.
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
Thanks again! Putting a semicolon for width worked for making it original size. :) Changing the style didn't fix the captions though. :( Oh well, I'll live. I don't want to bug you anymore. XD
Is there a way to format the captions, and if so, how? (Things like making certain parts italic or non-italic, or bold, or links, etc.)
Have a look on one of my pages: http://mc-stories.wikidot.com/wiki:jeremys-cave , where I have changed the headings on
And a "link" inside the** caption** plus
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
I don't know how to do anything with CSS. >.> Thanks for showing me these examples though!
I love this snippet. It's incredibly useful.
Is there a way to use it without the image being a link at all?
Now there is ;)
Putting |link=@@ in the code will do the trick.
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
You are awesome. Thank you.
When I click on a local image, I get taken to a "page not found" error. I see above that you can work around the issue by manually specifying a link to the image's address under the local—files namespace, but really, shouldn't that be automatic anyways?
You may now use the title attribute. I don't know why I didn't set it before…
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
There is no such thing, they are either .svg or .png images. I suspect the problem is the .svg file. This came up a while back I'll see what I can find.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Thanks Rob, I meant to write back earlier to say that your comment put me on the right track with the image selection and I was able to find and use .svg images instead that didn't have both the .png and .svg in their file name as can be found with some WIkimedia Commons images (for some reason)
Regards
Ye Olde
Ye Olde - Creator and Chief Admin of www.music-industrapedia.com (Global Music Industry Directory & Encyclopedia) hosted on Wikidot.