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

Get help with installation and running phpwcms here. Please do not post bug reports or feature requests here.
Post Reply
achilehero
Posts: 69
Joined: Sun 4. Jan 2009, 13:30

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

Post 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
User avatar
juergen
Moderator
Posts: 4556
Joined: Mon 10. Jan 2005, 18:10
Location: Weinheim
Contact:

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

Post 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
achilehero
Posts: 69
Joined: Sun 4. Jan 2009, 13:30

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

Post 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! :)
User avatar
juergen
Moderator
Posts: 4556
Joined: Mon 10. Jan 2005, 18:10
Location: Weinheim
Contact:

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

Post by juergen »

Hmmm .. you are using this as well in your template, btw ;)
achilehero
Posts: 69
Joined: Sun 4. Jan 2009, 13:30

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

Post 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!
Old Boy
Posts: 1203
Joined: Fri 23. Nov 2012, 13:52

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

Post 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" :D
achilehero
Posts: 69
Joined: Sun 4. Jan 2009, 13:30

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

Post 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?
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

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

Post 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.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
achilehero
Posts: 69
Joined: Sun 4. Jan 2009, 13:30

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

Post by achilehero »

Thanks Oliver,

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