close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Understanding Fit to Box, Fit to Width etc

Thread began 10/09/2014 5:05 am by Nathon Jones Web Design | Last modified 10/09/2014 12:15 pm by Jason Byrnes | 336 views | 5 replies |

Nathon Jones Web Design

Understanding Fit to Box, Fit to Width etc

I have implemented the File Manipulation > Upload Files behaviour in a CMS I've built but I'm having trouble understanding how best to deal with Portrait and Landscape images.

I have set the Upload Files behaviour to create thumbnails at a specific size (400x300) and I understand that if the image is portrait, or the dimensions aren't 4:3, that the behaviour is filling in a background colour to compensate.

This looks ugly though:
http://www.stranraermusictown.org.uk/gallery-photographs.php?cat=2

Is there a way to simply fill out the thumbnail with the entire image or, at least, make sure it fits width ways? I'm aware there are other settings within the behaviour but I just don't have the time to spend hours trial-and-error'ing all the options.

In the help section it states...
Fit to box - will resize the image to fit within a specified height and width.
Fit width - will resize the image to fit within a specified width.
Fit height - will resize the image to fit within a specified height.
Fixed width and height - will resize all images to a specified width and height while maintaining the width-to-height ratio. If the resized image does not completely match the specified width and height, a fill color is applied.

Fit to box - won't work because portrait images will look squashed.
Fit width - won't work because the height will remain in ratio and therefore all the thumbnails will be of a different size
Fit height - as above but width will remain in ratio
Fixed width and height - leaves ugly spaces around the images

What is the best solution to this?
Thank you
NJ

Sign in to reply to this post

Jason ByrnesWebAssist

I wouldn't use the resize option in the upload behavior for creating the thumbnail in this case.

Use Image Resizer and the crop form center option for the thumbnail.

Sign in to reply to this post

Nathon Jones Web Design

Where is Image Resizer?
Can it be integrated with an INSERT/UPDATE form?

Sign in to reply to this post

Jason ByrnesWebAssist

WebAssist -> Image Resizer


No it cannot be integrated with the insert update form.

The idea behind image resizer is that you upload only one large image to the server and use that image on your pages and specify a desired width and height.

at run time, if one does not exist already, it will create a new copy of the image using the image resizer settings.

This allows you to have one image, but create multiple copies of it throughout the site. maybe on one page it shows at 50% width and height, on another at 25% width and height.

This becomes beneficial if you later decide to change the dimensions, you don't need to reupload the image, just edit the width and height of the image tag and the new size is generated automatically.

Sign in to reply to this post

Nathon Jones Web Design

The thumbnail images are held in a MySQLi repeat region AND they integrated with a slider:

<?php
while(!$rsGALLERY->atEnd()) {
?>
<img id="IMAGEID<?php echo($rsGALLERY->getColumnVal("SMTgalleryID")); ?>" src="photographs/gallery/<?php echo($rsGALLERY->getColumnVal("SMTgalleryimg")); ?>" alt="<?php echo($rsGALLERY->getColumnVal("SMTgalleryimgtitle")); ?>" title="#IMAGEID<?php echo($rsGALLERY->getColumnVal("SMTgalleryID")); ?>_caption" data-thumb="photographs/gallery/tmb/<?php echo($rsGALLERY->getColumnVal("SMTgalleryimg")); ?>" />
<?php
$rsGALLERY->moveNext();
}
$rsGALLERY->moveFirst(); //return RS to first record
?>

In the above code the thumbnail is specified here:
data-thumb="photographs/gallery/tmb/<?php echo($rsGALLERY->getColumnVal("SMTgalleryimg")); ?>"

How would I implement image resizer in this instance?

More generally though, say I have a thumbnail image on a page:
<img src="image.jpg"/>

How am I applying Image Resizer to this? In the help it states..

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

Does this mean highlight the image tag? Or can it be applied to a div tag for example?

Thank you
NJ

Sign in to reply to this post

Jason ByrnesWebAssist

image resizer wont work for this, the thumbnail would need to be a separate image tag for image resizer to be able to resize the iamge.


if you use this method, the only work around will be to resize the iamges manully in photo shop to crop them.

otherwise use a gallery script that allows for separate large and thumbnail images

in your image tag:
<img src="image.jpg"/>

you need to set width and height:
<img src="image.jpg" width="200" height="300" />

that width and height is used by image resizer when creating the new image

you can apply image resizer to the image tag, or the surrounding div, either will work as long as the image has a width and height specified.

Sign in to reply to this post

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...