Thread

Hello all,

We released a new plugin (CE Image extension) that can re-size multiple images.

Devot-ee Link: http://devot-ee.com/add-ons/ez-image-resize

EZ Image Resize brings the best features of CE Image into your text, text-areas and WYSIWYG field types. Allowing you to control image size, quality and much more inside of a multi-image field like WYGWAM.

Docs: http://viminteractive.com/ee_addons/docs/ez_image_resize/

Hi, this could be a game changer for how I place images in content!

How does placement work? Is it based on where you have the EZ Image template tags, or based on where the original image is within the wygwam field?

Do you wrap the EZ tag around the wygwam field output?

Twobelowzero,

Take a look at the below code. I think this answers your question.

<h2>This is just a normal image tag</h2>

<p><a href="http://domain.com/images/site/logo.png">http://domain.com/images/site/logo.png</a></p>

<p><hr ></p>

<h2>This is the same image with CE image applied</h2>

<p>{exp:ce_img:single src="http://domain.com/images/site/logo.png" quality="50" width="160"}</p>

<p><hr ></p>

<h2>This is multiples images (really the same in this instance) with ez_image_resize</h2>

<p>{exp:ez_image_resize max_width="100" filter="opacity,30"}</p>

<p><a href="http://domain.com/images/site/logo.png">http://domain.com/images/site/logo.png</a><br />
<a href="http://domain.com/images/site/logo.png">http://domain.com/images/site/logo.png</a><br />
<a href="http://domain.com/images/site/logo.png">http://domain.com/images/site/logo.png</a><br />
<a href="http://domain.com/images/site/logo.png">http://domain.com/images/site/logo.png</a></p>

<p><a href="http://domain.com/images/site/logo.png">http://domain.com/images/site/logo.png</a></p>

<p>{/exp:ez_image_resize}</p>

<p><hr ></p>

<h2>This would be the tag set for something like Wygwam</h2>

<p><br />
{exp:ez_image_resize max_width="100" filter="opacity,30"}</p>

<p> {content}</p>

<p>{/exp:ez_image_resize}

Hello!

Does this work on images from a remote server?  I have a client moving over from Blogger, did a big data import into EE - so all the images are still hosted at Blogger.  The “body” field is a Wygwam field, and I have the resize tag around the Wygwam body field, and it doesn’t look like it’s working - is it something I’m doing wrong, or a limitation of the plugin?

Thanks!

Hello again padstow,

I just posted this new testing sample code in devot-ee but will put here as well.

Since its using CE image make sure that is working on a remote image first. It uses a remote folder to be sure to set permissions to that folder as well. Let me know if you have any issues.

<h2>This is just a normal image tag</h2>

<p><a href="https://www.google.com/intl/en_com/images/srpr/logo3w.png">https://www.google.com/intl/en_com/images/srpr/logo3w.png</a></p>

<p><hr ></p>

<h2>This is the same image with CE image applied</h2>

<p>{exp:ce_img:single src="https://www.google.com/intl/en_com/images/srpr/logo3w.png" quality="50" width="160"}</p>

<p><hr ></p>

<h2>This is multiples images (really the same in this instance) with ez_image_resize</h2>

<p>{exp:ez_image_resize:run max_width="100" cache_dir="/resize/" filter="opacity,30"}</p>

<p><a href="https://www.google.com/intl/en_com/images/srpr/logo3w.png">https://www.google.com/intl/en_com/images/srpr/logo3w.png</a><br />
<a href="https://www.google.com/intl/en_com/images/srpr/logo3w.png">https://www.google.com/intl/en_com/images/srpr/logo3w.png</a><br />
<a href="https://www.google.com/intl/en_com/images/srpr/logo3w.png">https://www.google.com/intl/en_com/images/srpr/logo3w.png</a><br />
<a href="https://www.google.com/intl/en_com/images/srpr/logo3w.png">https://www.google.com/intl/en_com/images/srpr/logo3w.png</a></p>

<p><a href="https://www.google.com/intl/en_com/images/srpr/logo3w.png">https://www.google.com/intl/en_com/images/srpr/logo3w.png</a></p>

<p>{/exp:ez_image_resize:run}</p>

<p><hr ></p>

<h2>This would be the tag set for something like Wygwam</h2>

<p><br />
{exp:ez_image_resize:run max_width="100" filter="opacity,30"}</p>

<p> {content}</p>

<p>{/exp:ez_image_resize:run}</p>

<p> </p>

<p>* I have no entries loop therefor {content} does not exist *

that cache_dir=”” is actually changing the location of the save location. You can remove that!

Can anyone answer how you would use this in a Wgywam field?

Using the example above, {content} could be a Wgywam field:

{exp:ez_image_resize:run max_width="100" filter="opacity,30"}

 {content}

{/exp:ez_image_resize:run}

Sorry thats not what I meant.

If I am creating a channel entry and my body of the entry is a WYGWAM field and in that field I want to have an inline image… ya know an image in the middle of the post.  Can I use this to format the size of the image inside the post?

Please use WYGWAM as normal. WYGWAM will create inline styles to set the size of the image. After that has been set it will run through this plugin and resize the image to the size set in the inline style and the web server will serve the smaller image.

Please use WYGWAM as normal. WYGWAM will create inline styles to set the size of the image. After that has been set it will run through this plugin and resize the image to the size set in the inline style and the web server will serve the smaller image.

So do I still wrap the field with this code?

{exp:ez_image_resize:run max_width="100" filter="opacity,30"}

 {content}

{/exp:ez_image_resize:run}

When you re-size an image with wygwam it adds inline styles to the image to make it the size that you wanted to be. What our plugin does is looks at these inline styles and creates an optimized image with the same dimensions that was set in wygwam. Make sense?

Sort of… but how does this KNOW to process the image?  I assume I would have to wrap the whole WYGWAM field in the template (as above) .... or something like that.

Yes just wrap any html code / EE tags inside of our plugin code and this will check for image tags and convert them.

Just purchased this… very cool…. easy to implement.

Thanks for helping me understand how this works!!  I’ve been searching for something that would allow me to use within posts… very cool. 

Now I assume that this would work with Assets as well, right?

Joe