Resize by max width & height

Hi,

This looks good. The options for resizing the image suggest that it is necessary to have a 'box' (div, span) to resize the images to.

Is it possible to just resize images by specifying max width and max height, (no 'box') so that the text wraps up to the image (with specifiable spacing) as would normally be required?

If you choose an option where the image is portrait (as opposed to landscape) all of the options seem to suggest that you are going to have disproportionate (an unwanted) white space on either side.

Am I misunderstanding the options?

Thanks.

Neilo,

I believe the option you are looking for is 'Proportion to box'.

This will resize the image to your desired width and height while maintaining the aspect ratio, but does not use a fill color for any empty space.

Hope this helps!

-Neil

No actual "box" is necessary. It is a virtual box that you set up by setting the image width and hieght, no div or other element is necessary.

Cheers Neil & Ray,

Looks even better now!

Thanks

Hi,

I bought the Image Resizer, but already have a problem.

I have built a newsletter creator on two websites, using DataAssist , HTML Editor and UniversalEmail4. The entire contents of the Newsletter Template sits in a div (600px wide), so Image resizer will be great to ensure that all images placed in the div have a maximum width of 200px.

Before applying the IR to a working page, I made a test page containing just one div, in which I would like any images to be resized (proportionally) to width 200, height 300.

According to the GSG:

  Before launching Image Resizer, highlight the area, or section of code on your page that will contain the images you are resizing.

The Image Resizer functionality will be applied to all images that are inserted within this area.  

I highlight the div, and apply Image resizer. The process deletes the div and all its contents when it adds the code, replacing the div with an image placeholder.

I undo this, and instead highlight the content of the div (text borrowed from your site!) and re-apply the image resizer. The IR then deletes all the content and replaces it with an image placeholder.

Lastly, I re-copy and paste the text back in to the div, and add an image (again, borrowed from your site!).

I upload all the necessary files and folders, and browse to it.

The image placed in the div has not been resized. Although the image_cache folder has been created, a smaller (200px width) image has not been created.

The image is still 470px × 292px.

How does this work?

The uploaded page is at www.yeractual.com/

Thanks.

The code in the attached file is very odd... it has some tags that simply shouldn't be there (</MM:DECORATION></MM_REPEATEDREGION>) We may have an isssue in our sample, or really I'm not sure what happened.

In your code the image height and width aren't specified as a different size, but there is a blank image tag (no source) with the smaller height, so something odd is going on. I see this:

<img src="" width="200" height="300" alt="" />

which has the new proportions you talked about but no source, and I see this:

<img src="images/ir-00.png" alt="Image Resizer" width="470" height="292" align="absmiddle" />

Which is the image that is visible, and you can see the width and height haven't been updated. I'd like to investigate the cause of this and what you are doing to get to this point.

I've opened a support ticket. I'd love to give you a call tomorrow and debug this with you directly in order to determine the cause and find a solution.

Cheers Ray,

The image with no source is the image place-holder inserted by the IR extension, the GSG said to give it the dimensions you wanted all images in the selected area to comply with. Should I have deleted this? (If so, why bother specifying the required dimensions?)

I didn't see the point of manually giving the larger image the new dimensions, as that is what I bought the extension to do, and what this page was made to test/demonstrate.

The </MM:DECORATION></MM_REPEATEDREGION> is a mystery, the page was started clean with just a single div, no DW behaviours, nothing else added.

I will respond to the ticket.

---------------------------

Also - looking ahead a bit:

My ultimate aim is to apply Image Resizer to this page: newsletter_template.php

so that any image placed in the table cell that contains the text "Content Goes Here' :

<td align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#CCCCCC;">Content Goes Here</td>

is resized to a max width of 200px.

The content is added via a DataAssist/HTMLEditor instance.

That template will then be re-coverted to the Universal Email template. The cell will not contain any images initially unless my client chooses to add them to the newsletter content.

Thanks Ray. It's bound to be something dumb that I've done.

That is how the extension works.... you are supposed to update the actual image dimensions in the IMG tag, and it will go in and use those as your base settings and adjust them as necessary.

I'll give you a call and we can work through it.

Thanks Ray,

But the div that will eventually be on the live page will have no content in it initially (text or images), until my client uploads some.

My difficulty in understanding the extension boils down to this:

The GSG says:

Before launching Image Resizer, highlight the area, or section of code on your page that will contain the images you are resizing.
The Image Resizer functionality will be applied to all images that are inserted within this area.

Now that the Image Resizer functionality has been applied to your page, you can define the desired width and height for the image in the Dreamweaver Properties inspector.

I think we may not have thought of the scenario you are trying to use it in, so no standard implementation will work as you are intending.

I may be able to come up with a solution, but I need to understand it a little better.

How will the client be adding images after you have finished creating the page? Through HTML editor and then stored in the database in a column?

This isn't actually directly supported, since we never thought of this use case, but I can probably find a solution for you with a little hand coding.

So you are placing a database column reference in that "content goes here" area?

I think what you could do is add an image resizer image into the content area... Then delete the image placeholder and put your database column reference using "proportion to box" with "resize smaller images" unchecked.

Then add this function to the page:

function setImgWidths($imageContent,$width)  {
  preg_match_all("/(<img\s*[^>]*?".">)/" , $imageContent, $imageMatches);
  foreach($imageMatches[1] as $imgTag){
	$origImg = $imgTag;
	if(preg_match("/width\s*=\s*(['\"])([^'\"]*)\\1/i", $imgTag)){
		$imgTag = preg_replace("/width\s*=\s*(['\"])([^'\"]*)\\1/i", "width=\"$width\"", $imgTag);
	} else {
		$imgTag = "<img width=\"$width\"" . substr($imgTag,4);
	}
	$imageContent = str_replace($origImg, $imgTag, $imageContent);
  }	
  return $imageContent;
}

and use it to change all of the widths of the images by wrapping it around your recordset column reference like:

setImgWidths($row_Recordset['contentColumn'],200);