Captioning images

  • I’ve been digging around, including searching the WP doc to add caption to photos in a simple way, and either what I want is too complicated, or I’m just not looking at it the right way.

    On a collaborative blog, I’m trying to find a simple way for contributors to add photos simply. The photos will:

    a) be aligned either left, right or center;
    b) be in various sizes,
    c) have captions that include photo credit, descriptive text (with styling, mostly italic) and, at times, hyperlinks.

    From that, you know I cannot use the couple of existing plugins that either pull the alt tag text (it’s not it’s purpose to be a caption anyways) or the title text from the img tag. So I tackled this from the CSS side of things. I have managed to create a couple of CSS div tags and formatting that ‘almost’ achieves what I’m looking for, but not quite. Here’s how it goes so far:

    /* Begin Images */

.posttext .imagecenter { display: block; padding: 0px 5px 5px 5px; display: inline; }

img.aligncenter { display: block; margin-left: auto; margin-right: auto; margin-top: 15px; margin-bottom: 2px; }

.captioncenter { margin-left: auto; margin-right: auto; padding: 4px 3px 0px 3px; font-size:0.7em; line-height: 1em; color: black; width: 250px; }

.posttext .imageright { float: right; padding: 15px 10px 5px 10px; display: inline;  }

.posttext .imageright { float: right; padding: 15px 10px 5px 10px;  }

img.alignright { display: inline; padding: 4px; margin: 0 0 2px 7px;  }

.captionright { margin: 0 0 2px 7px; padding: 4px 3px 0px 6px; font-size:0.7em; line-height: 1em; color: black; width: 250px; }

.posttext .imageleft { float: left; padding: 4px; margin: 15px 10px 2px 10px; display: inline; }

img.alignleft { display: inline;padding: 4px; margin: 0 7px 2px 0; }

.captionleft { margin: 0px 7px 2px 0px; padding: 4px 3px 0px 3px; font-size:0.7em; line-height: 1em; color: black; width: 250px; }

/* End Images */

    Using that, posters only need to use the uploading tool of WP 2.5 and select the positioning they want from the tool. Then, they simply add the imageleft, imageright or imagecenter div, as well as another div within for the caption. So, within the text editing window, it looks something like this:

    <div class="imageleft"><img src="https://blahblah.com/wp-content/uploads/2008/03/image.jpg" alt="Image" title="The Image" width="250" height="173" class="alignleft" /><br /><div class="captionleft"><strong>Photo:</strong> Photographer<br />Whatever caption text you want, including hyperlinks if needed.</div></div>And then the regular text...

    It seems to work just fine, with one limitation: it always ends up putting the image aligned with a new paragraph (or between them for the center alignment) because the div automatically causes a paragraph break.

    Does anyone have ideas or suggestions to improve/fix/change this to have more flexibility?

Viewing 3 replies - 1 through 3 (of 3 total)

  • I’ve been doing the same thing ie. hunting around for ways to add captions to images and especially to hyper link them. Unfortunately my knowledge of CSS is limited.

    I’m sure you are hoping that your ‘almost’ will change to a ‘yes that’s what I want,’ with a little input from members?

    Help me out in the meantime with a little on the CSS rules you mentioned above; where do you actually put that CSS? Does it become a seperate CSS file in wp-admin-css and then call it something like ‘captions.css, or is it added into the CSS script of the theme in use?

    I’m sure there are loads of other bloggers out there like myself trying to do what seem simple but not knowing quite how to go about it, so thanks on all our behalf for any help offered

    Kevin

    Thread Starter Benoit

    (@benoit)

    Sorry Kevin, I was out of town and didn’t think about connecting here. The CSS above is in my theme CSS. I changed it around some and am pretty satisfied with the results I got. Even though it’s not perfect, it covers my needs, although I’ll admit it does get tedious to copy/paste the various div within each posts.

    First, here’s the CSS I added to the theme stylesheet:

    /* Begin Images */

div.aligncenter { width: 300px; border: none; margin: 0.3em 145px 0.3em auto; padding: 0.3em 40px 0.3em 0.3em; }

.aligncenter p { text-align: center; font-size: 0.7em; text-indent: 5px; margin-right: -45px; }

div.figureright { float: right; width: 300px; border: none; margin: 0.3em; padding: 0.3em; }

.figureright p { text-align: center; font-size: 0.7em; text-indent: 0; }

div.figureleft { float: left; width: 300px; border: none; margin: 0px 10px 0px 5px; padding: 0px 10px 0px 0px; }

.figureleft p { text-align: center; font-size: 0.7em; text-indent: 0; }

img.alignleft { float: left; margin: 0.3em; padding: 0.2em; }

img.alignright { float: right; margin: 0.3em; padding: 0.2em; }

/* End Images */

    Now, that covers the following presentation styles:

    – Image aligned left with caption and text-wrapping
    – Image aligned right with caption and text-wrapping
    – Image aligned in the center with caption and no text-wrapping

    I also added two options for an image (either left or right) without caption.

    https://azaozz.wordpress.com/2008/07/15/wordpress-26-quick-tips

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Captioning images’ is closed to new replies.