Captions

classic Classic list List threaded Threaded
41 messages Options
123
Reply | Threaded
Open this post in threaded view
|

Captions

Harvey
Hugo - I would like to be able to add  captions to pictures that aren't centered.  In other words the caption is centered under and image that is left or right justified.

This is something we've discussed in the past but I don't recall if there is a solution.

Can this be done?
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: Captions

GregChapman
Take a look at:
http://greg-afloat.969558.n3.nabble.com/Canal-Boat-Brokers-td2945250.html

The code for the first image looks like this:
<p class="caption750"><nabble_img src="brokerage01.jpg" border="0" class="center" 
alt="Narrowboat Eliza Jean on sale through ABNB"/>Eliza Jean was one of the boats that we 
looked over at Andy Burnett's Crick Wharf.<br>There was much to like about the boat. The 
huge paintings of a kingfisher on one side and heron on the other wouldn't be to everyone's 
taste and her fixed saloon furniture was not to mine</p>

The CSS that achieves it is this:
.nabble .caption750 {
	background-color: #ddddee;
	width: 760px;
	text-align: center;
	font-size: 0.9em;
	margin: 5px auto;
	padding: 5px 0px;
	border: 1px solid #000080;
}
Similarly, the code for the second image looks like this:
<p class="captionr500"><nabble_img src="brokerage02.jpg" border="0" alt="Whilton Marina"/>
The view of Whilton marina from outside the sales office<br>There are often 30 to 40 boats available 
to view</p>
and the CSS for that is:
.nabble .captionr500 {
	float: right;
	background-color: #ddddee;
	width: 510px;
	text-align: center;
	font-size: 0.9em;
	margin: 5px 0px 5px 5px;
	padding: 5px 0px;
	border: 1px solid #000080;
}
The CSS is simply added to the dialogue under the CSS button on the Change Appearance toolbar. Had there been a left aligned image I would simply have added a ".captionl500" and the float rule would have been changed appropriately.

If you need help editing this stuff to suit your forum, just ask.
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.
Reply | Threaded
Open this post in threaded view
|

Re: Captions

Harvey
This post was updated on .
Greg what I am trying to do is center a caption under something like this:

(IMAGE REMOVED)

I'd like it to use a different or smaller font.

(FYI I will have to delete the above image as I can't publish it without a credit - that is what the caption is for).

Can the code above suffice for images of all sizes and justifications?
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: Captions

Hugo <Nabble>
You can try adding this after that image in the snapshot:
<div style="float:right;width:500px;font-size:80%;margin: .3em 0 1em">
    Caption text caption text caption text caption text caption text.
</div>
You should adjust the width in each case. Please try that and let me know how it works.
Reply | Threaded
Open this post in threaded view
|

Re: Captions

Harvey
This post was updated on .
This:



gave me this:

(IMAGE REMOVED)

Image is 400 px wide plus the border I think.
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: Captions

Hugo <Nabble>
You can give me the link to that post and I will try to fix the caption. Then you can use my code to add new ones.
Reply | Threaded
Open this post in threaded view
|

Re: Captions

GregChapman
Hi Hugo,

Hope I'm not showing my ignorance but if I was being an HTML pedant I'd say that you shouldn't put a <div> (a block element) inside a <p> which is only allowed to contain inline elements. It could be that Harvey's browser doesn't like such illegalities.
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.
Reply | Threaded
Open this post in threaded view
|

Re: Captions

Hugo <Nabble>
I made the change directly in the article, see:
http://directory.nyskiblog.com/Whiteface-Mountain-History-td4646997.html

The code looks like this:
<p> ... </p>

<div style="clear:both;float:right;width:410px;font-size:80%;margin:-.8em 90px 1em 2.3em">
    Caption text caption text caption text caption text caption text.
</div>

<p> ... </p>
As Greg explained, it was important to move the DIV out of the paragraph tag. So now it is placed after the paragraph where the image is located.
Reply | Threaded
Open this post in threaded view
|

Re: Captions

Harvey
Hugo - Is it possible to center the caption under the photo?

On Fri, Mar 30, 2012 at 2:10 PM, Hugo <Nabble> [via Nabble Support] <[hidden email]> wrote:
I made the change directly in the article, see:
http://directory.nyskiblog.com/Whiteface-Mountain-History-td4646997.html

The code looks like this:
<p> ... </p>

<div style="clear:both;float:right;width:410px;font-size:80%;margin:-.8em 90px 1em 2.3em">
    Caption text caption text caption text caption text caption text.
</div>

<p> ... </p>
As Greg explained, it was important to move the DIV out of the paragraph tag. So now it is placed after the paragraph where the image is located.
Official Nabble Administrator - we never ask for passwords.



If you reply to this email, your message will be added to the discussion below:
http://nabble-support.1.n2.nabble.com/Captions-tp7418606p7422484.html
To unsubscribe from Captions, click here.
NAML



--
"Like" us on Facebook: www.facebook.com/NYSkiBlog
Follow us on Twitter: http://twitter.com/nyskiblog
----------
Harvey Road: www.NYSkiBlog.com
NY Ski Forum: forum.NYSkiBlog.com
NY Ski Magazine: mag.NYSkiBlog.com
NY Ski Directory: directory.NYSkiBlog.com

HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: Captions

Hugo <Nabble>
You can add "text-align:center" to the style property of the DIV.
Reply | Threaded
Open this post in threaded view
|

Re: Captions

Harvey
Thanks Hugo that  looks great.

I still don't totally understand how it's working but I will study it.

As I said before I need to eliminate the image above, because I don't have rights to post it without credit.
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: Captions

Harvey
I've tried to figure this out:

<div style="clear:both; float:right; width:410px; font-size:80%; text-align:center; margin:-.8em 90px 1em 2.3em">(caption text)</div>

I really can't. Is it possible to tell me what each parameter does?

In addition I am trying to do something much simpler, which I've done often out magazine and I can;t make it work.

Should be much easier to center a caption beneath a centered image but this just doesn't seem to work either:

<nabble_img src="image.jpg" width="500" class="center single" />
<span style="text-align:center; font-size:80%">(caption text)</span><br/>

^that should be simple!
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: Captions

GregChapman
Hi Harvey,

Harvey44 wrote
I've tried to figure this out:

<div style="clear:both; float:right; width:410px; font-size:80%; text-align:center; margin:-.8em 90px 1em 2.3em">(caption text)</div>
Ideally, you need to understand "The Box Model" before reading further. See the page on my GregTutor site which explains about boxes in web page construction, and the terms, "block", "in-line" and "normal flow" which all impact on the concepts behind these styling rules.)

div - a generic containing block. (It's just an HTML tag, like a paragraph, table or list, on which you can hang styling instructions).

Style="..." - an attribute of the div element. In this case defining how the div should be rendered by the browser.

float:right: - This box is to be taken out of "normal flow" (See that Box Model page again) and made to move to the right of the box on the page in which it is contained.

clear:both; - By default, when a box is taken out of normal flow, any following boxes are permitted to move up the page and fill any space alongside a floated box. This instruction over-rides that and demands that the content of this box sits below any floated items. ("both", because it is also possible to be specific about boxes that have been floated left or right.)

width:410px; - This box is to be 410px wide!

font-size:80%; - By default, most styling instructions are inherited from those specified for the parent box (i.e. the box in which this one is contained) . In this case the text is to be 80% of that size.

text-align:center; - The text in this box, a "block", is to be centred.

margin:-.8em 90px 1em 2.3em: Specifies in clockwise order, starting from the top, the margins around the box:

-.8em : Top margin. An "em" is a "logical" unit. These are useful because, for example, if the visitor chooses to magnify text the relationship of text to margin size will stay constant. The default margin would be 1em, so this has the effect of making it 80% of the normal 1 line space that it would otherwise have.

90px : Left margin. Pixels are an "absolute" unit. Specifying this ensures the distance stays constant, even if the visitor chooses to magnify the text in his browser.

1em : Bottom Margin. This is the default margin around most boxes. As with the top margin value, because it is a logical unit, it's actual size on screen can vary, depending on the size inherited from the styling intructions of the boxes in which this element is contained.

2.3em : Left Margin. Another margin that will very according to the magnification that the visitor may apply to the  text in his browser.
In addition I am trying to do something much simpler, which I've done often out magazine and I can;t make it work.

Should be much easier to center a caption beneath a centered image but this just doesn't seem to work either:

<img src="http://nabble-support.1.n2.nabble.com/file/n7425909/image.jpg" width="500" class="center single" />
<span style="text-align:center; font-size:80%">(caption text)</span><br/>
For this one you do need a grasp  the box concept and the differences between "inline" and "block". Although an image is, by default, treated as an inline element, the styling rules, for the class "center" say this:

display: block;
margin-left: auto;
margin-right: auto;

which say that when rendering this box, treat it as a block and auto-equalise the margins to either side (i.e. centre it!). Because it is displayed as a block it starts on a new line and fills the space of the block in which it is contained.

(I haven't investigated what effect the class "single" my additionally have on the styling of the image.)

In contrast line:
<span style="text-align:center; font-size:80%">(caption text)</span><br/>
uses the span tag, which is an inline element, centring the text in the middle of a box which may itself be within a line of text has no meaning (You wouldn't think it odd if WORD refused to centre a few words in the middle of a line of text would you? You can only centre blocks of text that end in a carriage return in WORD - and so it is on a web page! You can only centre blocks, not boxes that are in line.)

Try replacing the < span > tag with any tag that is defined as a block and it should work, e.g. a <div>, or <p>. As a block it will start on a new line and will fill  the width of the block in which it is contained - subject to any styling rules you impose on that block.
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.
Reply | Threaded
Open this post in threaded view
|

Re: Captions

Harvey
Is it possible to handle the way Google (Blogger) handles captions?

Here is the code:

<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;">

(IMAGE CODE GOES HERE)

</td></tr>
<tr><td class="tr-caption" style="text-align: center;">(Caption Text)</td></tr>
</tbody></table>

I guess we'd have to set up a class for it?
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: Captions

GregChapman
You could, but not only is that code is significantly more complex - there are many more tags that are not needed for any styling purpose - and, as you point out, there is further unseen class code to be added, but also the code is technically inappropriate, as an image and caption isn't tabular in nature. It's just an image followed by some text.

(Many web authors show their word processing origins by using tables for page layout.  There's no need to copy them! In HTML the  tag should only be used for tabular data. The techniques Hugo and I are suggesting are distinctly better, making documents more accessible for the visually impaired and blind, for example.)

I thought my solution, offered earlier,  was pretty straight forward:

<p class="caption">< img here >caption text</p>

Why make things complicated? It could be done without a class, if it is that that scares you, in the way Hugo suggests. You just replace 'class="caption"' with 'style="listofrules:here;"'.

Hugo's suggestion is equally valid. The only difference being that he places the caption in a separate tag rather than within the paragraph that holds the image. Both work and offer a simple solution to the provision of a caption. Why look further?
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.
Reply | Threaded
Open this post in threaded view
|

Re: Captions

Harvey
I think you are right that a class/CSS solution makes the most sense.

Do you need a class for every image size and alignment?

Is there a way to write ONE piece of CSS where you simply set the l/r or image size?
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: Captions

Hugo <Nabble>
Harvey44 wrote
Do you need a class for every image size and alignment?
You could create them, but I think it is better to keep the variable configurations in the "style" property of each caption.
Harvey44 wrote
Is there a way to write ONE piece of CSS where you simply set the l/r or image size?
It should be possible, but you should provide more examples so that we can identify the parts that don't change. You may post a link to another image that needs a caption and I will take a look.
Reply | Threaded
Open this post in threaded view
|

Re: Captions

Harvey
Center images shouldn't need css right?

So I would need a left aligned image, and a right aligned image. In each case I'd want the caption centered underneath.

Do I have to decide on image size? That would be difficult to do as all images are different.

On Sun, Apr 1, 2012 at 10:50 PM, Hugo <Nabble> [via Nabble Support] <[hidden email]> wrote:
Harvey44 wrote
Do you need a class for every image size and alignment?
You could create them, but I think it is better to keep the variable configurations in the "style" property of each caption.
Harvey44 wrote
Is there a way to write ONE piece of CSS where you simply set the l/r or image size?
It should be possible, but you should provide more examples so that we can identify the parts that don't change. You may post a link to another image that needs a caption and I will take a look.
Official Nabble Administrator - we never ask for passwords.



If you reply to this email, your message will be added to the discussion below:
http://nabble-support.1.n2.nabble.com/Captions-tp7418606p7427955.html
To unsubscribe from Captions, click here.
NAML



--
"Like" us on Facebook: www.facebook.com/NYSkiBlog
Follow us on Twitter: http://twitter.com/nyskiblog
----------
Harvey Road: www.NYSkiBlog.com
NY Ski Forum: forum.NYSkiBlog.com
NY Ski Magazine: mag.NYSkiBlog.com
NY Ski Directory: directory.NYSkiBlog.com

HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: Captions

GregChapman
Harvey44 wrote
Center images shouldn't need css right?
Depends what you mean!

When you ask Nabble to center an image it add the code:
class="center"
 to the image code. This is the equivalent of adding:
style="display: block; margin-left: auto; margin-right: auto;"
It is CSS that determines the image is centred, by telling the browser to treat it as a block, rather than inline and automatically equalise the left and right margins. The width available in which to place the image is known.  The width of the image is known. The calculation of the margins is easy.

If you wish to add a centred caption under the image then there is a problem. Unlike an image, text has no predetermined width. It fills the space available before wrapping to the next line. HTML and CSS has no mechanism for determining the width of text based on some nearby image. It might be possible to call a script to determine the width of an image and insert the appropriate width into the code that determines the width available for the following text, but it would mean particular coding techniques would be needed when it came to inserting an image with caption into a page.
Do I have to decide on image size? That would be difficult to do as all
images are different.
The kind of scripting I mention above is beyond my skills, which is why I stuck to the standard images sizes suggested by Nabble's existing facilities. 750, 500 and 250px width images. It's flexible enough for most circumstances and easy to implement, as shown in my post above (where you'll see that apart from width, margin dimensions and how the imaged is to be aligned, all the styling code is common between centred and left and right aligned and captioned images.).
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.
Reply | Threaded
Open this post in threaded view
|

Re: Captions

Harvey
GregChapman wrote
Harvey44 wrote
Center images shouldn't need css right?
Depends what you mean!
This is how I handle a  centered image and caption:

<nabble_img src="image.jpg" width="500" class="single center"/><span style="text-align:center"><h4><i>Caption</i></h4></span>

Seems to work ok.

I'll pick one standard to start with:

400px image
aligned right
border: 8px solid white;

do we need to know about text padding?

I do think we need a solution for captions.
HTTPS Please!
123