Is there a way to include a caption when inserting an image into a bio?

+8 votes
I am inserting several images into a biography.  I would like to add captions.  Is there any way to do this?


in WikiTree Tech by Patricia Hickin G2G6 Mach 8 (84.2k points)
Hey Pat,

Would you post the profile(s) you are referring to so we can see what you are talking about?

2 Answers

+3 votes
Best answer
Hi Patricia,

Yes. You can add captions to your images. It takes a  little CSS coding to  make it happen but it is not hard to do at all. You can experiment with font size and color of font as well. Essentially, if it's a CSS tag you can use it.

Here's some sample code with notes to include a caption

This is the opening div statement. It includes many things. Postition to the left or right or even center display. Change colors and font styling. Pad the image for space around it.

<div style="float:right; border:0px #ccc solid; color:red; font-size:10px;  background-color: #fff; width:200px; text-align: center; height:auto; margin: auto; padding:3px;">

Here's where you put your text if you want it above the image.... you can use normal HTML tags here as well.

<br> ( include the <br> tag so the text is above the image...)

Here's your image .... you can set the size...

You can place text below image.. be sure to include the <br> just after the image line..


And closing div tag...   don't forget it!!

Here it is without the notes...

<div style="float:right; border:0px #ccc solid; color:red; font-size:10px;  background-color: #fff; width:200px; text-align: center; height:auto; margin: auto; padding:3px;">
Power Of Attorney<br>Stephen Jones to Richard Wilburn<br>January 28, 1828 - Harlan County, KY.<br>
[[Image:YOUR IMAGE ID.jpg|200px]]

You can see this on the Jones-22397 profile.

Good luck!

by Anonymous Jones G2G4 (4.5k points)
selected by Doug Lockwood

Thanks, Chap, but I'm a little dense.

What, exactly do I need to say?  Where , exactly, do I need to put it?

Let's say I want to add the words "Lawrence Washington, 1718-1752" in black 13 pt Calibri italics below the image of him.

Let's say this is the image info, which appears in the middle of a paragraph of text:

<span style="float:right; margin-left:10px;">[[Image:Prickett-2-8.jpg|200px]]/span> 



Hi Patricia,


In your image code as you posted, you can place it anywhere you like in the profile editor. In between a paragraph or what have you.

To add a caption, simply add it like this ..


<span style="float:right; margin-left:10px;">I CAN ADD A CAPTION HERE <br> [[Image:Prickett-2-8.jpg|200px]]/span>

The <br> (line break) tag is used to place the text on top and image below the text.

Or if you prefer the caption below the  image,

<span style="float:right; margin-left:10px;">[[Image:Prickett-2-8.jpg|200px]] <br> I'LL JUST ADD SOME TEXT HERE  </span>



Patricia ...  clicked to quick  ;)

<span style="float:right; margin-left:10px;">[[Image:Prickett-2-8.jpg|200px]]<br><div style="font-family:calibri; font-size:13pt; font-style:italic; color:#000000;">Lawrence Washington, 1718 - 1752</div></span>

And that should do it. :)


Chap, is an incredible profile! Nice work and thanks for sharing your expertise with other WikiTreers.

Thanks, Chap -- that's very helpful!  And I agree with Chris, you do have a great profile for Jones-22397.

And now another question.  How do you add those little information boxes??

(Or just direct me to the Wikitree website that explains them.)  They are neat.




Thank you very much, Chris!


Patricia, thank you for the kind words.

The Info Box ... yes indeed. At this time there is no InfoBox template or tool in wikitree, as far as I know. So I built one. :) It's based on the mediawiki Ambox Template. The mediawiki template is not portable to wikitree. I have, however, been in touch with Rob Ton @ about making something up with info boxes that would be compatible with wikitree.

Until then, I have mimicked the Ambox templates on the mediawiki link above. I am sure my code can be made more efficient and am working to do so.

1) You need an image, such as the blue "!" dot Notice image. It must be uploaded to the profile you wish to display it on. For now, you can right click and save the one I used @ Of course, it will load with your own profile image ID.

2) the info box is CSS coding but with an HTML table inside.

3) You can add the <br> tag above and/or below the following code to give it breathing room between elements.

This info box is meant for short notes or only several lines of text. CUTTING and PASTING text in the box, in some cases, will result in word-wrap failure and send text over flowing the HTML table boundaries. (I'm trying to figure out a fix)

WORK-AROUND: Hand type your text into the profile editor. It will word-wrap as normal.   :)

Here's the code....

<div style="float:center; border-top:1px #aaa solid; border-bottom:1px #aaa solid;  border-right:1px #aaa solid; border-left:8px #1E90FF solid;background-color: #fff; width:90%; height:auto; margin: auto; padding:3px;">
<table style="width:100%; border:0px;">
<tr><td width="52px" align="center">
<div style="float:left;">[[Image:YOUR IMAGE_ID HERE.png|40px]]</div>
<div style="float:left;color:#4E6472; font-size:12px;">


<div style="clear:both;"></div>


Let me know if you have any issues with the info box :)



+5 votes
Another simple way to add text to a picture is to use your image-editing software on your computer.... whatever program you are comfortable with already such as paint, photo house, photo shop, etc.  Of course it's on there for good; one difference from usual captions, but you can place the text as obviously or as subtly as you wish.  Once you save the image as a jpg you should have no trouble uploading it with your "caption".  Good luck!
by Keith Hathaway G2G6 Pilot (601k points)

Related questions

+12 votes
1 answer
+6 votes
2 answers
+4 votes
2 answers
+6 votes
1 answer
+8 votes
1 answer
+5 votes
2 answers
110 views asked Dec 13, 2017 in WikiTree Help by Gil Davis G2G6 Mach 1 (12.2k points)
+6 votes
1 answer

WikiTree  ~  About  ~  Help Help  ~  Search Person Search  ~  Surname:

disclaimer - terms - copyright