magicedit on img tags [Solved]

Discussion about MagicEdit features, modules, applications, and HowTos.

magicedit on img tags [Solved]

Postby guiding » Wed Jan 16, 2013 1:59 pm

According to
Image Sizing
By default any future image the content manager uploads will be sized the same as the original image.

Here's my dilemma. I use spacer.gif as a placeholder image. The client will upload their images, but their images have different dimensions. At the moment uploaded images are inheriting the spacer.gif's 1px by 1px. This doesn't work for my needs. Are there any MagicEdit attributes or work-around so that MagicEdit will use the native dimensions of the new image?

Something like:
Code: Select all
<img magicedit me_imageautoresize="yes" src="images/spacer.gif" alt="" class="border" />

I did not include the spacer.gif's dimensions in the img tag because I do not want all the uploaded images to have the same dimensions.

I also thought MagicEdit's default HTML editor had an image editor, but it doesn't. So I'm kind of forced to use the MagicEdit image wizard.
Last edited by guiding on Wed Jan 16, 2013 7:47 pm, edited 1 time in total.
Posts: 17
Joined: Tue Jan 15, 2013 1:45 pm

Re: magicedit on img tags

Postby raw10 » Wed Jan 16, 2013 3:22 pm

MagicEdit has some ridiculously powerful image management tools that are accessible just from your HTML. Usually you'll want to size images to a maximum width or height so that the content manager doesn't load a huge image into the page. There are a three ways to have ME size images:

1. Your method. Leave width and height off and let the system size and crop new images to the size of the placeholder.

2. HTML method. Set a width, height, or both on an image, and ME will automatically size uploaded images to that dimension. If you set the width (or height), any uploaded images will be sized to fit that width (or height).

3. Advanced method. Use cl_effects to chain a number of effects together programmatically. See this page for more info. You might consider this if you want the placeholder image to be 1x1 and the uploaded image to fit the page at 300px wide. In that case you would do:

Code: Select all
<img magicedit me_name="my_image" src="images/spacer.gif" cl_effects="maxsize=300,,1" />

There is no "me_imageautoresize" attribute. And you should always use an me_name on things just to keep the edited content from being removed if you change the placeholder image or text.

Finally, you can consider an image with an me_name as an object that lives in a given scope (a scope would be either global or within a given magicrepeat region or page). You can bind to that object and automatically size/crop that image for use in several places by simply using the same me_name on images in different places. This is the same as text regions, actually. This is useful for automatically thumbnailing, etc.

Note also that ME always stores the original image, then creates and caches other versions of that image on demand. You can get the original image in a couple of ways.

1. Link to the image:

Code: Select all
<a cl_image="$myImage">My Image</a>

The part after the $ is whatever the image's me_name is.

2. Use an offsite placeholder (ME can't detect the size that way):

Code: Select all
<img magicedit me_name="myImage" src="" />
Posts: 81
Joined: Tue Apr 12, 2011 2:46 pm

Re: magicedit on img tags

Postby guiding » Wed Jan 16, 2013 7:46 pm

Thanks raw10.

Since I cannot use ME exactly the way I described, the solution I went with was to simply hardcode a width of 400 into the spacer.gif placeholder. The uploaded images look good albeit not at their native dimension.

Code: Select all
<img magicedit src="images/spacer.gif" width="400" alt="" class="border" />

Usage example

Thank you for providing a variety of solutions.
Posts: 17
Joined: Tue Jan 15, 2013 1:45 pm

Return to MagicEdit Discusson

Who is online

Users browsing this forum: No registered users and 1 guest