Captions in Images for Music Template

Is there a way to use captions in images on the Music template? Other templates have this ability (ex, PixelLove http://demo.gavick.com/joomla25/pixello ... t-new-dawn) and I'd like to have it for articles on my Music templated site, also.

HI,
yes it's possible but you have to add some additional CSS code from selected template, and each time remember to add

class="img_caption left" etc.

ok, from which template you want captions style ?
and for what kind of content - Joomla articles or K2 items?


p.s.
for Joomla 2.5 - yes?

Yes, it's for Joomla 2.5.
The image caption style I've been looking at is from PixelLove.

Yes, it's for Joomla 2.5.
The image caption style I've been looking at is from PixelLove.

Also, it would be for K2 posts.

For standard articles add : class="caption" and title="image description", for example, for each image inside article

Code: Select all

<img width="128" height="128" border="0" title="description" alt="" src="/images/admin.jpg" class="caption">

Now CSS style

Code: Select all

.img_caption.none {
    margin: 0 auto 10px;
}
div.img_caption {
    background: none repeat scroll 0 0 #101010;
    border-color: #222222;
}
div.img_caption {
    border: 1px solid #FFFFFF;
    font-size: 90%;
    padding: 3px;
}

p.img_caption {
    clear: both;
    font-size: 90%;
    margin: 0;
    padding: 5px 0 3px;
    text-align: center;
    color:#eee;
}

For K2 items:

You can add captions using this same method or using K2 <Image> tab

k2-img-caption.png

For caption CSS style use

Code: Select all

span.itemImageCaption, span.itemImageCredits {
    color: white; background:grey;
}

Of course use your own colors

Custom CSS:
http://www.gavick.com/documentation/joo ... -template/

Hi Pawel,
I'm trying to do something similar in the GameNews template (i.e. add image captions) standard articles (not using K2).

I added your CSS to my override.css file and added 'caption' to the image class, but my caption doesn't appear. Should the class be img_caption instead?

I'm building the site on my localhost, so I'm not able to provide a link – but do you have any suggestions?

Thanks!
Craig

Forgot to mention - I'm using Joomla 3.x

Hi Pawel,
I'm trying to do something similar in the GameNews template (i.e. add image captions) standard articles (not using K2).

I added your CSS to my override.css file and added 'caption' to the image class, but my caption doesn't appear. Should the class be img_caption instead?

I'm building the site on my localhost, so I'm not able to provide a link – but do you have any suggestions?

Thanks!
Craig

K2 also can be installed on J3.1.

Check using firebug how your image class is called. Then change name in css.

Thanks, but for this site, I'm just using standard Joomla articles.

I added this to my my override.css

Code: Select all

.img_caption.none {
    margin: 0 auto 10px;
}
div.img_caption {
    background: none repeat scroll 0 0 #101010;
    border-color: #222222;
}
div.img_caption {
    border: 1px solid #FFFFFF;
    font-size: 80%;
    padding: 3px;
}

p.img_caption {
    clear: both;
    font-size: 80%;
    margin: 0;
    padding: 5px 0 3px;
    text-align: left;
    color:#eee;
}


I added

Code: Select all

class=caption

to the image and added my text into the title field.

When I check Firebug it says

Code: Select all

img class="caption"

Any ideas?

Thx

If you have : img class="caption"
its mean use:

Code: Select all

img.caption { ... }

Second, there could be a BIG problem.
Because default Joomla don't generate separate caption line.There are only title and alt.

Hi Pawel,
Neither

I insert the cursor where I want the image to appear inside the editor window and click the joomla image button (the one below the editor window).

I insert the image, change 'caption' drop-down to 'yes' and type the caption in the title field.

I like the idea of the full article image, but my client inserts 2-3 images per article.

Changing my override.css to

Code: Select all

img.caption p

didn't work.

Any other suggestions?

Thanks for your help,
Craig

So you can not do this same trick like with K2.

code.png

but there is a hope.
Because you can add image using, for example, JCE and add your own caption with your own style.

p.s.
I can give you only few tips not ready solution.

HTML

Code: Select all

<div>
<img alt="foto1" src="/images/foto1.jpg">
<h3 class="caption_h3"><a href="#">Image Caption</a></h3>
</div>

CSS

Code: Select all

.caption_h3 {
    background: none repeat scroll 0 0 rgba(18, 47, 91, 0.77);
    color: #FFFFFF;
    display: block;
    float: left;
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size: 1.3em;
    font-weight: normal;
    height: 60px;
    line-height: 1.5em;
    margin-top: -70px;
    max-height: 60px;
    opacity: 1;
    padding-left: 5px;
    position: absolute;
    text-align: left;
    text-rendering: optimizelegibility;
    transition: background-color 0.4s ease-in 0s;
    width: 100%;
    z-index: 100;
}

Or use gallery script which allows you to insert gallery inside article with captions like Simple Image Gallery Pro 3 etc.

Yep, I think I'm going to go the JCE route. Was hoping to just use native joomla tools, but oh well.

Thanks for all of your help!

Craig

Whoa...I got this working...ALMOST!

There's some conflict between the joomla.css file and the style1.css files, so I commented out the p.img_caption styling in joomla.css.

Now my override.css changes are appearing - sort of. But only on blog category view - not in the actual article.

I'm attaching an image of how it looks when viewed in blog category view.

Screen Shot 2013-08-26 at 7.56.01 PM.png