Skip navigation.

I Fell from the Moon

Don't worry ma'am. I'm from cyberspace.

Really simple image caption

Tuesday, 7. July 2009, 21:04:03

, , ,

Caption text
Caption text
Caption text

Regular My Opera blog posts don't support captions under the images, even though it would be easy as pie to implement. So I finally got around to making my own codes.

<span class="rightcaption"> [IMG=http://files.myopera.com/drlaunch/thelaunchsite/banner.gif] Caption text </span>
<span class="leftcaption"> [IMG=http://files.myopera.com/drlaunch/thelaunchsite/banner.gif] Caption text </span>
<span class="centercaption"> [IMG=http://files.myopera.com/drlaunch/thelaunchsite/banner.gif] Caption text </span>


Basically, you add a couple of span tags like those above, around the image and caption to have a caption under the image. This is useful for things like image texts, attribution of authors and image information.

In order to make them work, you'll need to add the following code to your account's custom CSS ( Account --> Design --> Custom style sheet).

.rightcaption {
    float: right;
    display:block;
}

.leftcaption {
    float: left;
    display:block;
}

.centercaption {
     clear: both;
    display: block;
    text-align: center;
}


Oh, and the new Neo RC2 needs your feedback.

Sorry Mik FurieMy Omnia HD arrived

Comments

SouthernCross 7. July 2009, 21:06

:yes:

Nerak 7. July 2009, 22:01

Flippin' sweet! Thanks for sharing. :happy:

Furie 8. July 2009, 00:00

The way I've been doing them works, but not in Mini, meaning my mobile bloggers were left out. This however... Nice one.

I haven't used spans for much apart from dropcaps before. Presumably they support seperate backgrounds, text shadowing, fonts, etc. Everything a div can have yeah?

Class10a1 8. July 2009, 02:45

Cool! :cool:

bugscout 8. July 2009, 06:36

:yes: thanks

drlaunch 8. July 2009, 09:45

A span groups text together and is a inline element. Span borders and backgrounds will wrap around text.

A div creates a rectangle of elements and is a block element. Borders and backgrounds will follow a rectangle shape around elements in the div.

Any html tag, its class and id can be styled with any CSS. Spans, lists, tables, headings, paragraphs, you name it.

Jurgi 8. July 2009, 10:17

Great! That is, what i was looking for.

Jurgi 8. July 2009, 10:46

After some tries, some notes,

1) I suggest addind "text-align: center;" also to left and righ captions, looks much better.

2) Im using html instead of bbcode to put images, to achieve custom alt and totle attributes, like this:
<span ><img alt="Me" title="Jurgi's photo" src="http://static.myopera.com/upic/pool1/7C/xuP/mGUsO1rJu79bGPf2FuZfJM/134250_l.jpg"></span>


But inserting "img" into your span code does not work correctly:
<span > <img alt="Me" title="Jurgi's phpto" src="http://static.myopera.com/upic/pool1/7C/xuP/mGUsO1rJu79bGPf2FuZfJM/134250_l.jpg"> Caption text </span>

Any ideas?

3) I've achieved the same effect with no user CSS:
<span > [IMG=http://files.myopera.com/drlaunch/thelaunchsite/banner.gif] Caption text </span>

So no additional CSS is needed! It works axactly the same way, as yours! (but I've discovered thos thank to you).
But, again, using html instead of bbcode inside span does not work correctly. The caption tekst is placed next to image instead of under it. I have no idea how to fix it to have both caption text and alt+title atributes.

Furie 8. July 2009, 13:17

A simple manual line break should fix that, using 
<br>
between the image and caption text. If it's all within the span it should only affect the things in there. Again, haven't tried using this with spans before so no guarantees, but it should work.

Furie 8. July 2009, 13:21

@Doc, so any background I apply will only affect the text itself, not block itself out under the whole area, yeah? :sherlock: Oh well, I rarely apply backgrounds to images anyway, but borders are useful for captioned images, especially in a post with a lot of text. Either that or changing the colour of the text.

SqueakeyCat 8. July 2009, 13:22

:cool: thanks, DrL

Jurgi 8. July 2009, 15:15

Originally posted by Furie:

simple manual line break should fix that


For 99,9% you are right (btw, should it be br or /br?).
From my previous experiences, there is another way: to put caption in bbcode, which makes br at final html code. Align or quote should work.

ellinidata 8. July 2009, 17:40

thanks for sharing!!!!! :heart:

PS
great new picture of you too! :yes:

Suntana 9. July 2009, 03:01

Awesome! This should at some point come in handy, DrLaunch.
So MyOpera doesn't support captions normally? Maybe that would explain why I couldn't get it to work properly when I experimented with some HTML tutorials sometime back.

Up to now, I would :left: :right: Cheat! Shhhhh! I'd make the caption text part of the image in MS Word and Paint. I take it you can change the Font and Font Size?

drlaunch 9. July 2009, 05:48

It's CSS man. If there was a CSS for life, you could make your feet twice as large as you'd like. You could change your car's top speed and acceleration. You name which value you want to change and there's a CSS code for it.

Furie 9. July 2009, 11:32

Unfortunately you wouldn't be able to add money, just make it look like you had more. :irked:

ellinidata 9. July 2009, 15:44

can also reduce weight without diet ? :lol:

Thanks Doc !

drlaunch 9. July 2009, 16:08

Seems like the user CSS is necessary to make the captions appear correctly. Or you could copy the CSS code inside the curly brackets {} (except the brackets themselves), remove line breaks, and paste the code between the quotes in a style="" attribute, instead of the class="" attribute.

If you'd like the text to be centered, just add text-align: center; between the curly brackets in the CSS code you want to change.

53north 9. July 2009, 23:19

In mini I make the image linked, then include the link as title to my post paragraph, usually coloured to highlight it.
It would be nice if opera got html to work well on the page, but even tabulation doesn't get around the 3 column page default background.
Can anyone get a marquee to run?
Even the simplest forum post page has easier html capability.

Write a comment

You must be logged in to write a comment. If you're not a registered member, please sign up.

Download Opera, the fastest and most secure browser

Photos

deepsnow3.JPGdeepsnow2.JPGDSC00130.JPGtrack_revisited.JPGDSC00010.JPGDSC00003.JPGDSC00006.JPGsnowy.JPGDSC00008.JPGDSC00001.JPG

My network

  • Remi

    My norwegian website

Friend sites

My Diggs