Public Forums 71,145 posts

[kayz Friend kayzJoin date: October 2009Posts: 127Downloads:0Uploads:10 Thanks: 11 Thanked: 7 times in 1 posts]

#158961

Hi guys i am using caption class for my images but i want to use a different class for my images in another section.

I have tried replicating the original method for image captioning and have recreated a similar class but it dosent seem to work?

Any tips or pointers would be appreciated on how i can acheive more than 1 caption style for my images.

I look forward to your replies.

Thank you in advance.

🙂

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#372500

You have to manually edit the class in your editor. Use the html option in your editor or use no editor and apply the class manually.

[kayz Friend kayzJoin date: October 2009Posts: 127Downloads:0Uploads:10 Thanks: 11 Thanked: 7 times in 1 posts]

#372523

Yes i have done this.

My default joomla caption is this

.img_caption {
float: left;
background-color: #ff00ff;
color: #000;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 5px;
border-bottom: 5px solid #ffff00;
height: 100%;
}

For example i will create a new class and place this in my template css just like the above

.img_caption_articles {
float: left;
background-color: #ede2e2;
color: #000;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 5px;
border-bottom: 5px solid #cb0000;
height: 100%;
}

After applying this manually editor source code only the changes dont apply? Im under the assumption that the default caption class which already exists has more attributes else where and by merely applying a new caption this wont work? I’d really appreciate your help solving this.

Cheers

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#372528

How are you applying the class in your articles? Simply ticking the caption box will not do it. You either have to manually edit the articles or use template overrides to apply that class to all images in whichever view you are applying it to.

[kayz Friend kayzJoin date: October 2009Posts: 127Downloads:0Uploads:10 Thanks: 11 Thanked: 7 times in 1 posts]

#372530

<em>@phill luckhurst 215910 wrote:</em><blockquote>How are you applying the class in your articles? Simply ticking the caption box will not do it. You either have to manually edit the articles or use template overrides to apply that class to all images in whichever view you are applying it to.</blockquote>

Yes that is what i am doing, i am not applying it from the drop down. I am very familiar with HTML and CSS however getting this caption to work like the default ‘caption style’ is not working.

This is my html

<img class="caption_articles" src="images/article_images/articles/photo.jpg" border="0" alt="Testing photo" title="testing caption" width="250" height="284" />

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#372532

Please can you give me a link to the page you are having this trouble on.

[kayz Friend kayzJoin date: October 2009Posts: 127Downloads:0Uploads:10 Thanks: 11 Thanked: 7 times in 1 posts]

#372536

<em>@phill luckhurst 215914 wrote:</em><blockquote>Please can you give me a link to the page you are having this trouble on.</blockquote>

Thanks, pm sent.

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#372538

Please in your code below


<img class="caption_articles" src="images/article_images/articles/photo.jpg" border="0" alt="Testing photo" title="testing caption" width="250" height="284" />

Change to


<img class="img_caption_articles" src="images/article_images/articles/photo.jpg" border="0" alt="Testing photo" title="testing caption" width="250" height="284" />

Or remove the img_ from your css.

Your new class looks nice but you will need a little padding around it.

Adding the blow improves it substantially

margin: 0 5px 0 0;

Please, as per your other post, enable developement mode and disable the css compression as it makes it a lot easier to use firebug to find issues like this.

[kayz Friend kayzJoin date: October 2009Posts: 127Downloads:0Uploads:10 Thanks: 11 Thanked: 7 times in 1 posts]

#372542

<em>@phill luckhurst 215920 wrote:</em><blockquote>Please in your code below


<img class="caption_articles" src="images/article_images/articles/photo.jpg" border="0" alt="Testing photo" title="testing caption" width="250" height="284" />

Change to


<img class="img_caption_articles" src="images/article_images/articles/photo.jpg" border="0" alt="Testing photo" title="testing caption" width="250" height="284" />

Or remove the img_ from your css.

Your new class looks nice but you will need a little padding around it.

Adding the blow improves it substantially

margin: 0 5px 0 0;

Please, as per your other post, enable developement mode and disable the css compression as it makes it a lot easier to use firebug to find issues like this.</blockquote>

Hi Phill thanks heaps, we’re almost there!

.img_caption_articles worked just fine in terms of style but the actuall caption text is missing? See attachment,

I have also tried just caption_articles both in css and html but this yields no change at all. See original link i had sent you.

I have enabled development mode and turned css and js off.

Thanks.

---

Attachments:

1. 

[kayz Friend kayzJoin date: October 2009Posts: 127Downloads:0Uploads:10 Thanks: 11 Thanked: 7 times in 1 posts]

#372554

Hi Phill

Just to let you know i have resolved it 🙂 the css stays standard as it is and whatever the css class it needs to correlate with the caption.js script.

So what i did was i copied the entire caption.js and pasted it beneath the original js. But you will notice the variables are different, this is what got my two captions to work 🙂

Now if i was to have a few more custom styles then i would need to repeat the js below, i dont think this is good practice and can be simplified? One thing i lack is programming!

The variable for my caption is caption_articles.

See below for the code.

/**
* @version $Id: modal.js 5263 2006-10-02 01:25:24Z webImagery $
* @copyright Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/

/**
* JCaption javascript behavior
*
* Used for displaying image captions
*
* @package Joomla
* @since 1.5
* @version 1.0
*/
var JCaption = new Class({
initialize: function(selector)
{
this.selector = selector;

var images = $$(selector);
images.each(function(image){ this.createCaption(image); }, this);
},

createCaption: function(element)
{
var caption = document.createTextNode(element.title);
var container = document.createElement("div");
var text = document.createElement("p");
var width = element.getAttribute("width");
var align = element.getAttribute("align");

if(!width) {
width = element.width;
}

text.appendChild(caption);
element.parentNode.insertBefore(container, element);
container.appendChild(element);
if ( element.title != "" ) {
container.appendChild(text);
}
container.className = this.selector.replace('.', '_');
container.className = container.className + " " + align;
container.setAttribute("style","float:"+align);
container.style.width = width + "px";

}
});

document.caption = null
window.addEvent('load', function() {
var caption = new JCaption('img.caption')
document.caption = caption
});

/****** My caption below ******/

var JCaption_articles = new Class({
initialize: function(selector)
{
this.selector = selector;

var images = $$(selector);
images.each(function(image){ this.createCaption_articles(image); }, this);
},

createCaption_articles: function(element)
{
var caption_articles = document.createTextNode(element.title);
var container = document.createElement("div");
var text = document.createElement("p");
var width = element.getAttribute("width");
var align = element.getAttribute("align");

if(!width) {
width = element.width;
}

text.appendChild(caption_articles);
element.parentNode.insertBefore(container, element);
container.appendChild(element);
if ( element.title != "" ) {
container.appendChild(text);
}
container.className = this.selector.replace('.', '_');
container.className = container.className + " " + align;
container.setAttribute("style","float:"+align);
container.style.width = width + "px";

}
});

document.caption_articles = null
window.addEvent('load', function() {
var caption_articles = new JCaption_articles('img.caption_articles')
document.caption_articles = caption_articles
});

[louis2609 Friend louis2609Join date: June 2011Posts: 4Downloads:0Uploads:0]

#394048

<em>@kayz 215948 wrote:</em><blockquote>Hi Phill

Just to let you know i have resolved it 🙂 the css stays standard as it is and whatever the css class it needs to correlate with the caption.js script.

So what i did was i copied the entire caption.js and pasted it beneath the original js. But you will notice the variables are different, this is what got my two captions to work 🙂

Now if i was to have a few more custom styles then i would need to repeat the js below, i dont think this is good practice and can be simplified? One thing i lack is programming!

The variable for my caption is caption_articles.

See below for the code.

/**
* @version $Id: modal.js 5263 2006-10-02 01:25:24Z webImagery $
* @copyright Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/

/**
* JCaption javascript behavior
*
* Used for displaying image captions
*
* @package Joomla
* @since 1.5
* @version 1.0
*/
var JCaption = new Class({
initialize: function(selector)
{
this.selector = selector;

var images = $$(selector);
images.each(function(image){ this.createCaption(image); }, this);
},

createCaption: function(element)
{
var caption = document.createTextNode(element.title);
var container = document.createElement("div");
var text = document.createElement("p");
var width = element.getAttribute("width");
var align = element.getAttribute("align");

if(!width) {
width = element.width;
}

text.appendChild(caption);
element.parentNode.insertBefore(container, element);
container.appendChild(element);
if ( element.title != "" ) {
container.appendChild(text);
}
container.className = this.selector.replace('.', '_');
container.className = container.className + " " + align;
container.setAttribute("style","float:"+align);
container.style.width = width + "px";

}
});

document.caption = null
window.addEvent('load', function() {
var caption = new JCaption('img.caption')
document.caption = caption
});

/****** My caption below ******/

var JCaption_articles = new Class({
initialize: function(selector)
{
this.selector = selector;

var images = $$(selector);
images.each(function(image){ this.createCaption_articles(image); }, this);
},

createCaption_articles: function(element)
{
var caption_articles = document.createTextNode(element.title);
var container = document.createElement("div");
var text = document.createElement("p");
var width = element.getAttribute("width");
var align = element.getAttribute("align");

if(!width) {
width = element.width;
}

text.appendChild(caption_articles);
element.parentNode.insertBefore(container, element);
container.appendChild(element);
if ( element.title != "" ) {
container.appendChild(text);
}
container.className = this.selector.replace('.', '_');
container.className = container.className + " " + align;
container.setAttribute("style","float:"+align);
container.style.width = width + "px";

}
});

document.caption_articles = null
window.addEvent('load', function() {
var caption_articles = new JCaption_articles('img.caption_articles')
document.caption_articles = caption_articles
});

</blockquote>

Thanks for your code here, it is very clear and useful for me !!!

[Author]

Posts