Page 1 of 1
Class added to an Image via replacement tag (RT) or else
Posted: Fri 31. Jan 2014, 10:43
by achilehero
Hi everyone!
I am trying to use Twitter Bootstrap with phpwcms. While using the images <div> CP, I came to a use case where I would need to add classes like "img-responsive" or "img-content" to the actual <img> tag coming in from a template used with that CP. Is this possible via an RT or anything else by that matter?
Right now inside the template I use the {IMAGE} RT. When that is processed, in cases like mine (where I also use Lightbox) that gets replaced by <a ref ... lightbox><img .../></a>. So basically I need to ad some classes to the <img> tag inside that.
Thanks,
Cristian
Re: Class added to an Image via replacement tag (RT) or else
Posted: Fri 31. Jan 2014, 12:43
by juergen
While using jquery this one might be possible to solve :
Code: Select all
jQuery('.element img').each(function() {
jQuery(this).attr('src', jQuery(this).attr('src').replace("find_", "replace_"));
})
Never tested, but good hope that will work
comes from here:
http://stackoverflow.com/questions/1113 ... ith-jquery
Re: Class added to an Image via replacement tag (RT) or else
Posted: Fri 31. Jan 2014, 13:28
by achilehero
Something like that should work, yes, but it would add unnecessary processing. I am looking for a more straightforward solution. The jQuery based solution would need to be a script to run when the ContentPart loads, after the page renders, while using an RT would add the classes while rendering the page.
Thanks anyway!
Re: Class added to an Image via replacement tag (RT) or else
Posted: Fri 31. Jan 2014, 13:30
by juergen
Hmmm .. you are using this as well in your template, btw
Re: Class added to an Image via replacement tag (RT) or else
Posted: Fri 31. Jan 2014, 14:20
by achilehero
What is it that I am using in my template? And as a clarification, I am talking about the ContentPart template, not the whole website's template.
Thanks!
Re: Class added to an Image via replacement tag (RT) or else
Posted: Fri 31. Jan 2014, 16:15
by Old Boy
Do some experiments and put the following code into your
image < div> template:
Code: Select all
<!--IMAGES_ENTRY_START//-->
<div class="imageEntry" id="img{IMGID}">
<!-- original phpwcms replacementTAG commented! -->
<!-- { IMAGE } -->
<!-- Old Boys tricky image-TEST -->
[ZOOM]
<a href="{IMAGE_REL}"
rel="lightbox[xyz-{CPID}]"
title="[CAPTION]{CAPTION}[/CAPTION]"
class="image-lightbox">
[/ZOOM]
<img src="{THUMB_REL}"
data-image-id="{IMAGE_ID}"
data-image-hash="{IMAGE_HASH}"
width="{THUMB_WIDTH}"
height="{THUMB_HEIGHT}"
alt="{THUMB_NAME}"
border="0"
class="image-thumb" />
[ZOOM]</a>[/ZOOM]
[CAPTION]<p>{CAPTION}</p>[/CAPTION][CAPTION_ELSE]<p>{IMGNAME}</p>[/CAPTION_ELSE]
</div>
<!--IMAGES_ENTRY_END//-->
Maybe, it's a little test to understand, how it works and finde an own solution for your "problem"
Re: Class added to an Image via replacement tag (RT) or else
Posted: Fri 31. Jan 2014, 16:36
by achilehero
Thanks Old Boy. I'll try a bit what you suggested. I was looking for something like that. I tried to play with a few things like those, but since I don't have a list of valid RT's, it wasn't successful. Is there a list of all the RT's somewhere? Where could I find that?
Re: Class added to an Image via replacement tag (RT) or else
Posted: Sat 1. Feb 2014, 08:25
by Oliver Georgi
You can build your <img> Tag completely custom:
Code: Select all
<!-- Fixed 500x500px, cropped -->
<img src="img/cmsimage.php/500x500x1/{IMAGE_HASH}.{IMAGE_EXT}" class="img-responsive">
Check the Settings (INI-Style) block too in your template. Use it with fixed definitions or based on replacement tags. See the default template — there everything's usable is.
Re: Class added to an Image via replacement tag (RT) or else
Posted: Sat 1. Feb 2014, 22:52
by achilehero
Thanks Oliver,
I'll try some things. I think I got the idea!