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

Best approach to image uploading and display?

Thread began 1/19/2015 8:34 am by Nathon Jones Web Design | Last modified 1/21/2015 12:10 pm by Jason Byrnes | 869 views | 7 replies |

Nathon Jones Web Design

Best approach to image uploading and display?

I come across this with many clients...

They want to maintain control over uploading images (products, real estate, portfolio etc) to their websites but they have images in portrait and landscape view. On their websites, however, they want to maintain a uniformed layout so, for example, they might have thumbnails of these images displayed in landscape view on an introductory page of results, leading through to the actual image on a detail page.

Problem is, if they upload a portrait image it shunts the layout all over the place and everything looks disorganised.

Does/can the resize option in the upload behavior, or Image Resizer extension, cope with this scenario?

I understand that there is a "crop from centre" option in Image Resizer but most of our image file names are called from database, in repeat regions, or are tied into a NivoSlider, or something similar, and that usually causes problems (http://www.webassist.com/forums/posts.php?id=35640).

I'm looking for a "once and for all" solution to this because it keeps cropping (ho ho!) up.

I'd appreciate your advice. Thank you.
NJ

Sign in to reply to this post

Jason ByrnesWebAssist

There is not a crop option in the upload behavior, but there is a crop option in Image Resizer.

Image Resizer will work fine when using image paths that are called from a database and shown in a repeat region as long as you are using a standard image tag and set the width and height to use, for example:
<img src="path/to/image/<?php echo($row_recordsetName['ColumnName']); ?>" width="200" height="200" />

image resize looks at the width and height settings in the image tag to determine the settings for the resized image.

You'll need to find a different solution for the occasions when you are using the Nivo Slider, there is no "one size fits all" fix for this. you can ask in the Nivo Sliders forums for information on restricting the width and height of the thumbnails, I'm sure the has to be a way in the Nivo Sliders script, but I haven't used it before, so can't really comment.

Sign in to reply to this post

Nathon Jones Web Design

So I've applied that to an image on the page:

<?php
if(TRUE){ // Begin Cached Resized Image: ImageCacheInstance_1421688198741
ob_start();
?>
<img src="property-for-sale/<?php echo($rsProperty->getColumnVal("photo1filename")); ?>" title="<?php echo($rsProperty->getColumnVal("dev_name")); ?>" alt="<?php echo($rsProperty->getColumnVal("dev_name")); ?>" width="400" height="300">
<?php
echo(getCachedResizedImageHTML(ob_get_clean(), "property-for-sale/cache", "crop", "", false));
} // End Cached Resized Image: ImageCacheInstance_1421688198741
?>

Does the repeat region sit within the Image Resizer code like this:

<?php
if(TRUE){ // Begin Cached Resized Image: ImageCacheInstance_1421688198741
ob_start();
?>
<?php
while(!$rsProperty->atEnd()) {
?>
<img src="property-for-sale/<?php echo($rsProperty->getColumnVal("photo1filename")); ?>" title="<?php echo($rsProperty->getColumnVal("dev_name")); ?>" alt="<?php echo($rsProperty->getColumnVal("dev_name")); ?>" width="400" height="300">
<?php
$rsProperty->moveNext();
}
$rsProperty->moveFirst(); //return RS to first record
?>
<?php
echo(getCachedResizedImageHTML(ob_get_clean(), "property-for-sale/cache", "crop", "", false));
} // End Cached Resized Image: ImageCacheInstance_1421688198741
?>

Or outwith?

Not having any luck with it, in fact my page is ending up blank:
http://www.jb-graham.co.uk/newsite/index.php

Hope you can help. Thank you.
NJ

Sign in to reply to this post

Jason ByrnesWebAssist

image resize should be inside the repeat region.

a blank page means that a php error is occurring but error reporting is turned off.

to turn error reporting on, add the following code at line 1:

<?php
error_reporting(E_ALL);
ini_set('display_errors','on');
?>



once we know what the error is, we will be able to troubleshoot the cause.

Sign in to reply to this post

Nathon Jones Web Design

Does Image Resizer create a cache version of the images on EVERY view of the page?
That's going to create a HUGE directory of images, and take up a huge amount of web space, isn't it?

Sign in to reply to this post

Jason ByrnesWebAssist

no, it does not create a new copy of the image every time the image is viewed, on,y if one does not already exist for the size the page is requesting does it get created.

if you view one page where it is is requesting cropped copy of the image at 200 x 200, it looks to see if that size exists, if yes - it uses the one that has been created, if not - it creates it and uses it.

Sign in to reply to this post

Nathon Jones Web Design

That's pretty cool.

I've managed to integrate that into a database driven jQuery slider too, which is working well:
http://www.jb-graham.co.uk/newsite/index.php

Thank you Jason.
NJ

Sign in to reply to this post

Jason ByrnesWebAssist

you're welcome.

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