We use cookies to improve your experience. No personal information is gathered and we don't serve ads. Cookies Policy.

ExpressionEngine Logo ExpressionEngine
Features Pricing Support Find A Developer
Partners Upgrades
Blog Add-Ons Learn
Docs Forums University
Log In or Sign Up
Log In Sign Up
ExpressionEngine Logo
Features Pro new Support Find A Developer
Partners Upgrades
Blog Add-Ons Learn
Docs Forums University Blog
  • Home
  • Forums

New plugin : IMG Tag Modifier - to modify inline image tags

Development and Programming

sambo's avatar
sambo
80 posts
17 years ago
sambo's avatar sambo

Hi,

I thought I would share this plugin I made. Use it to modify inline <img> tags in entries.

The plugin can be very useful for an example when you want to: - Modify existing img tags to use phpThumb. - Override width and height of inserted images. - Override or add parameters like align, class, alt, title - Enable lightbox on the image.

Documentation and download here:

IMG Tag Modifier

Best, Sammi

       
Mark Bowen's avatar
Mark Bowen
12,637 posts
17 years ago
Mark Bowen's avatar Mark Bowen

Hi Sammi,

Looks to be a really nice neat addition to all the other EE plugins going around. Will try this out at some point.

Well done on what looks to be a really great idea.

Best wishes,

Mark

       
bsjosten's avatar
bsjosten
100 posts
17 years ago
bsjosten's avatar bsjosten

Sambo,

Is it possible to use phpThumb in a weblog entry? Or does it only work in templates?

If it works, can you briefly describe how to set it up?

Thanks,

/Bo

       
PXLated's avatar
PXLated
1,800 posts
17 years ago
PXLated's avatar PXLated

This looks like it could be handy. Will be giving it a whirl later this weekend.

       
sambo's avatar
sambo
80 posts
17 years ago
sambo's avatar sambo

bsjosten,

If you want to know if this plugin can be used in blog entries then the answer is yes.

The following code would make all images in {body} 100 by 100 square thumbnails of quality 50, and enable lightbox to view the original image.

{exp:weblog ....}
{exp:shj_imgmodifier phpthumb="true" phpthumb_path="/phpThumb.php" phpthumb_attributes="q=50&zc=1" width="100" height="100" lightbox="true"}
{body}
{/exp:shj_imgmodifier}
{/exp:weblog}

Best, Sammi

       
bsjosten's avatar
bsjosten
100 posts
17 years ago
bsjosten's avatar bsjosten

Thanks Sammi,

This will probably work for me most of the time.

However, sometimes I will have a weblog post that contains multiple images, where some should be bigger than others. Is there a way to control that from inside the post as opposed to in the template?

Thanks again,

/Bo

       
sambo's avatar
sambo
80 posts
17 years ago
sambo's avatar sambo

Sorry - it is not possible to act only on some of the images.

However, if you do not specify to override height and width, then the plugin will use the values from the img tag. So if one img was inserted with width=150 and another one with width=200 then the plugin should create thumbnails accordingly.

Actually the initial version of the plugin was only created to make images that where “scaled” inside TinyMCE or something look better by creating a new image that matched the size attributes in the img tag.

So you can have the users insert the original image into a WYSIWYG and scale to whatever size they want, then use this plugin to create a new image that matches the that size, and enable lightbox to allow the visitor to view the original image.

Best, Sammi

       
bsjosten's avatar
bsjosten
100 posts
17 years ago
bsjosten's avatar bsjosten

Thanks Sammi,

Works great!

Will take me a while to play with all the option, but so far it seems like it will (together with phpThumb) do everything I need and more.

One additional question: What is the lightbox plugin, and how do I use it?

Thanks,

/Bo

       
bsjosten's avatar
bsjosten
100 posts
17 years ago
bsjosten's avatar bsjosten

Sammi,

It seems that if I don’t specify a height argument, it is output with height=”0”.

This seems counterintuitive, shouldn’t it output without a height parameter at all?

In other words, I know what width I want, but I don’t know the aspect ratio of the source image, so I cannot specify a height without potentially distorting the image.

/Bo

       
sambo's avatar
sambo
80 posts
17 years ago
sambo's avatar sambo

Hi,

yes that is correct. It should not include height at all. Or maybe height=”“.

This looks like a bug and I will look into it as soon as I can. I am quite busy at the moment.

Thank you for pointing this out.

Info on Lightbox here.

Best, Sammi

       
bsjosten's avatar
bsjosten
100 posts
17 years ago
bsjosten's avatar bsjosten

Sammi,

A quick fix appears to be to set the width and height to “” on lines:

117: $attributeList[“height”] = “”; 124: $attributeList[“width”] = “”;

This fixes the problem for my purposes, at least as far as I can tell right now.

Hope this helps you.

Thanks,

/Bo

       
Dan Lovejoy's avatar
Dan Lovejoy
115 posts
17 years ago
Dan Lovejoy's avatar Dan Lovejoy

Hi Sammi - if I’m reading this right, I could relatively easily modify this to catch inline anchor tags and prepend/append them. Is there any reason such a modification should be especially difficult?

       
sambo's avatar
sambo
80 posts
17 years ago
sambo's avatar sambo

You are right. It should be very easy to make such a modification.

Sammi

       
bsjosten's avatar
bsjosten
100 posts
17 years ago
bsjosten's avatar bsjosten

Sammi,

I have solved my problem by writing a new plugin, based on yours, that does the image resizing, but also pulls urls from the gallery database to fill some additional needs I have to include gallery images in posts.

I decided to use a new parameter “size” instead of width and height, since what I really wanted was for the longer side of each resized picture to be the same. In other words, portrait pictures should have the same height as the landscape pictures are wide. This works nice in my layout.

So everything now works the way I need.

Thanks for a very good plugin start with!

/Bo

       
sambo's avatar
sambo
80 posts
17 years ago
sambo's avatar sambo

Great,

I am glad you have been able to use the code as a starting point for your solution. Sharing my plugin with the community felt nice - knowing that someone could use it feels even better.

Sammi

       
1 2 3

Reply

Sign In To Reply

ExpressionEngine Home Features Pro Contact Version Support
Learn Docs University Forums
Resources Support Add-Ons Partners Blog
Privacy Terms Trademark Use License

Packet Tide owns and develops ExpressionEngine. © Packet Tide, All Rights Reserved.