close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Resize by max width & height

Thread began 10/13/2010 4:42 am by neilo | Last modified 10/14/2010 8:32 pm by neilo | 2151 views | 10 replies |

neilo

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.

Sign in to reply to this post

Neil Beadle

Proportion to box

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

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

neilo

Cheers Neil & Ray,

Looks even better now!

Thanks

Sign in to reply to this post

neilo

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.

Attached Files
image_resizer-index.php.txt
Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

neilo

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.

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

neilo

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.

So, I want a div in my page to resize any images placed in it to set width and height. The div on the live page will have no content in it initially. No text, no images.

If I highlight the div (as per GSG) and launch the Image Resizer, the div gets deleted, and is replaced by an image placeholder.

If I place the cursor inside the div, launch the IR (set to Proportion to box) it applies some code - along with an image placeholder.

From the GSG:

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 assume that that means I apply the size and width to the image placeholder, as it is the only way I can bring up width/height in the properties panel, so I do.

NOW:

As the div will be empty of images and text when uploaded to the live server, do I just leave the (source-less) image placeholder there? If I delete it, there is nowhere in any of the pages that has recorded the required 200px x 300px dimensions. I searched the webassist/caching/CachedResize_Image.php page to see if it had been recorded there, but it hasn't. So I leave the placeholder there.

Still, I upload this with another image in it (not resized) - according to the GSG and the promo, this should be resized by the resizer. It isn't.

SO:

How do I place an empty div, table or table cell online that will resize any images placed within it?

Are you saying that the div must have one (random) image in it set to the desired max width/height in order for the IR to work for that whole div/table cell?

What happens when my client deletes that random image for newsletters that have no images? How does the div/table cell retain the ability to resize the images when there are no images pre-existing with the given dimensions?

Also, how do I apply the behaviour to the div or table without IR deleting it?

Sorry to be so thick!

Thanks

[Please also see my response to the ticket]

Sign in to reply to this post

Ray BorduinWebAssist

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);

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...