Jump to content
TNG Community
KmBdev

Adding caption to image in histories

Recommended Posts

KmBdev

I seem to be having a coding problem.  I'm trying to add a caption to an image in my history page.  I would like the caption to be beneath the image and would like to image to be all the way to the left.  code.PNGpage.PNGCan anyone help me with the correct code to move the image to the left margin and the caption centered beneath it?

Thank you,

Kate

Share this post


Link to post
Share on other sites
bhemph

Kate,
     According to https://www.w3.org/Style/Examples/007/figures.en.html it looks like you need your figure to have the float style instead of the img in order to get the caption to go with the figure and not think that it is part of the paragraph.  It also indicates that you will need a width style in the figure as well.  When they are showing the example source on that page, they are missing the close on the paragraph that exists when you look at the source for the page.  Hopefully this helps you get it to appear the way you want it.

Brent

Share this post


Link to post
Share on other sites
Newfloridian

Hi Kate

 

Are you using historytemplate.php or directly into an area in admin.

Sent you a PM with a suggestion.

 

Alan

Share this post


Link to post
Share on other sites
KmBdev

I'm using the history template.php.  Should I be using the <figure> or <div> code?  And do I need a css file to get the style, and if so how do I link the two files?

Share this post


Link to post
Share on other sites
bhemph
<h1>King Philip's War</h1>

<figure style="width:195px; float:left; margin-bottom:5px; margin-right:10px;">
<img src="<?php echo $cms['tngpath'] . $templatepath; ?>img/kingphilip.jpg" alt="King Philip"
style="width:195px; height:240px; border:2px solid #e2c2a9;">
<figcaption>
<i><small>King Philip - Wood engraving, mid-1800's<br>based on an engraving by Paul Revere</small></i>
</figcaption>
</figure>

This should do what you were intending.

Share this post


Link to post
Share on other sites
KmBdev

Thank you all for the help.  Got it to work.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×