Class added to an Image via replacement tag (RT) or else

[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

[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

[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!

[juergen]

Hmmm .. you are using this as well in your template, btw

[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!

[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"

[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?

[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.

[achilehero]

Thanks Oliver,

I'll try some things. I think I got the idea!