i use wikidot wikis in my courses, and i always require students to attribute graphics. they try to create captions but have trouble keeping the graphic and caption aligned if the graphic is not centered. has anyone figured out how to deal with this? is there a way to create an attached caption that moves with the graphic? i've tried creating cells, but that seems to create more trouble.
Yes, there is a way:
![]() |
|
CAPTION |
[[table style="margin: 0 auto;"]][[row]][[cell style="text-align: center;"]]
[[image IMAGE_NAME]]
[[/cell]][[/row]][[row]][[cell style="text-align: center;"]]
CAPTION
[[/cell]][[/row]][[/table]]Or, to float left/right, just encase the code in a floating div block:
![]() |
|
CAPTION |
[[div style="float: left"]]
[[table style="margin: 0 auto;"]][[row]][[cell style="text-align: center;"]]
[[image IMAGE_NAME]]
[[/cell]][[/row]][[row]][[cell style="text-align: center;"]]
CAPTION
[[/cell]][[/row]][[/table]]
[[/div]]Or there's a much simpler way, but it forces a border around the image and caption (which may or may not be what you want, Wolaap)
Example 1
This code:
|| [[image IMAGE_NAME]] ||
|| Caption Here ||Will produce something like this:
![]() |
| Caption Here |
Example 2
Whilst this code, with = for centre-aligned cell contents, and ^^ for superscript text:
||= [[image IMAGE_NAME]] ||
||= ^^Caption Here^^ ||Leads to a much better version of the same thing (that is still simple to remember)
![]() |
| Caption Here |
Example 3
And, led by James' example, you can also float the image left or right if you want:
[[div style="float:left"]]
||= [[image IMAGE_NAME]] ||
||= ^^Caption Here^^ ||
[[/div]]Leads to this:
![]() |
| Caption Here |
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
Thanks =)
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
Shane
Does this fix provide for multi-line (or formatted multi-line) captions?
Many thanks.
david
Have you seen this? It allows for the very simple creation of images with captions and titles.
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
David Lilienfeld wrote:
Shane
Does this fix provide for multi-line (or formatted multi-line) captions?
Many thanks.
david
Timothy's link might be worth following as that's probably a better way of doing it. It looks just as simple, but there's a lot of code hidden in the background which you never see which makes it easier for people to use.
I'll answer your question any way, as you might find it interesting (like me) to learn more about how the Wikidot syntax works for future reference:
In Wikidot, you can force a html <br /> (a line break) using a space followed by an underscore at the end of a line.
For example,
* test test test _
underneath
* test 2Usually adding "underneath" there would break the list, but with the underscore there it doesn't:
- test test test
underneath - test 2
And without the underscore:
- test test test
underneath
- test 2
The same thing can be used in my example, but the ^^ and ^^ characters should be done individually for each line. Like this:
||= [[image IMAGE_NAME]] ||
||= ^^Caption Here^^ _
^^Second line of caption here^^ ||![]() |
| Caption Here Second line of caption here |
And yes, of course formatting works :) The ^^ and ^^ is actually formatting the text already… but you can do other things, for example, making the first line bold and the word "caption" in the second line underlined:
||= [[image IMAGE_NAME]] ||
||= ^^**Caption Here**^^ _
^^Second line of __caption__ here^^ ||I'm assuming you know that **bold** results in bold and __underline__ results in underline.
The result of that code is this:
![]() |
| Caption Here Second line of caption here |
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
Shane
(I thought I'd posted this reply already, but apparently not.) After trying your fix, I finally figured out how a complex table might get me to where I was hoping to get to. There are two remaining problems, though. First, on my wiki (http://pharmacoepidemiology.wikidot.com/harry-a-guess-1940-2006), the figure is aligned right, but it doesn't float at all. The second problem is trying to get the box to include the caption. I tried a separate [[div]] and [[/div]], but that got me nowhere. I couldn't find an attribute for length, but then again, I thought the code I had would suffice. What am I missing here?
david
Hey,
Could you post the source code that you're using here (in [[code]] and [[/code]] tags) and I'll mess around with it a bit and try to get it working how you'd like it to.
I just need the source code for the image and "caption", not "Harry A. Guess, MD, PhD (24 December 1940 …" or anything below that.
- Shane
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
Sure thing:
| Harry Guess To refer to an image attached to a page, use pagename/filename |
|---|
| Born | 24 December 1940 |
| New York, NY, USA | |
| Died | 1 January 2010 |
| Philadelphia, PA, USA | |
| Occupation | Pharmacoepidemiologist |
| Years active | 1985-2006 |
| Organizations | Merck Research Laboratories; University of North Carolina at Chapel Hill; National Institutes of Health |
(And I know it's klugey, but I'm still learning…)
david
Let's try that again (taking out the comment demarcation):
[[div style="float: right; margin: 0 2em 15em 2em; width:200px; border: 0;"]]
||||~ ^^[[size 165%]]**Harry Guess**[[/size]]^^ [[image harry_guess.jpg width="200px"]] ||
[[table style="align: center; margin 1em 1em 1em 1em ; border:0;"]]
[[row]]
[[cell style="text-align: left; border: none; border-collapse: collapse;"]]
[[size 80%]] **Born**[[/size]]
[[/cell]]
[[cell style="text-align: left; border: none; border-collapse: collapse;"]]
[[size 80%]]24 December 1940[[/size]]
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align: left; border: none; border-collapse: collapse;"]]
[[size 80%]] @@ @@[[/size]]
[[/cell]]
[[cell style="text-align: left; border: none; border-collapse: collapse;"]]
[[size 80%]] New York, NY, USA[[/size]]
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align: left; border: none; border-collapse: collapse;"]]
[[size 80%]]**Died**[[/size]]
[[/cell]]
[[cell style="text-align: left; border: none; border-collapse: collapse;"]]
[[size 80%]]1 January 2010[[/size]]
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align: left; border: none; border-collapse: collapse;"]]
[[size 80%]] @@ @@[[/size]]
[[/cell]]
[[cell style="text-align: left; border: none; border-collapse: collapse;"]]
[[size 80%]]Philadelphia, PA, USA[[/size]]
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align: left; align: top; border: none; border-collapse: collapse;"]]
[[size 80%]]**Occupation**[[/size]]
[[/cell]]
[[cell style="text-align: left; border: none; border-collapse: collapse;"]]
[[size 80%]]Pharmacoepidemiologist[[/size]]
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align: left; border: none; border-collapse: collapse;"]]
[[size 80%]]**Years active**[[/size]]
[[/cell]]
[[cell style="text-align: left; border: none; border-collapse: collapse;"]]
[[size 80%]]1985-2006[[/size]]
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align: left; vertical-align :top; border: none; border-collapse: collapse;"]]
[[size 80%]]**Organizations**[[/size]]
[[/cell]]
[[cell style="text-align: left; border: none; border-collapse: collapse;"]]
[[size 80%]]Merck Research Laboratories; University of North Carolina at Chapel Hill; National Institutes of Health[[/size]]
[[/cell]]
[[/row]]
[[/table]]
[[/div]]
~~~~





