Thumbnail resizing issue
6 posts by 3 authors in: Forums > CMS Builder
Last Post: March 24, 2014 (RSS)
By willydoit - March 17, 2014
Hi all,
Due to a rewrite of a site I have the need to use different sized thumbnails for client image display. Unfortunately as I am sure you have all experienced clients have a tendency to upload images of all shapes and sizes.
I have set a thumbnail 4 option to create thumbnails at 600x450 pixels and have recreated images within the control panel option. unfortunately though I seem to be getting images which are taller than the specified 450 pixels tall. I assumed that if a client uploaded an image in portrait mode it would ensure that the displayed image was no taller than 450 pixels high.
As this doesn't seem to be happening I can only assume that I have misunderstood how the thumbnail creator works, could someone throw some light on this for me. For example will it only create thumbnails of this size when the original image exceeds the required dimensions, do both dimensions have to be exceeded for the thumbnail to be created with the maximum required dimensions.
Also while I can see that there is a maximum file size that we can limit to when images are uploaded, is there a simple way of ensuring a minimum size. ie if we are to display images at 600x450 I would like to ensure that all images uploaded by clients are at least those dimensions in order to generate a more uniform and better quality display of their images.
Finally with cameras nowadays able to take images in standard dimensions and also widescreen let alone the ease at which users can crop images to all sorts of dimensions, what tends to be the preferred image dimensions set by cmsb users in respect of resizing images and creating thumbnails.
Thanks in advance for any help provided.
By rconring - March 17, 2014
I have also been fighting this problem for years. Some clients understand the situation, learn and adapt and others are simply clueless and incapable of understanding image sizing and aspect ratio.
The image is downsized on upload without regard to aspect ratio. Maintaining the proper aspect ratio would require cropping which requires human intervention to acquire the proper area. It is downsized using the height or width which is most exceeded.
My best solution to date is to do a little education and, if they do not have an image editor, I put a link in the section editor or on the CMSB menu to a free online image editor like Pixlr. Cropping to a fixed aspect is a simple task.
Conring Automation Services
----------------------------------------
Software for Business and Industry Since 1987
By willydoit - March 17, 2014
Hi Ron,
Thanks for that info, know what you mean regarding tose who dont have a clue about image size, will take a look at the website and look to incorporating into the site.
Thanks again.
By gregThomas - March 19, 2014
Hi willydoit,
The dimensions you enter for a thumbnail should never be exceeded, and an image will always keep its current ratio. For example if you set the thumbnail size to 100px by 100px, then uploaded an image that was 200px by 100px. It would be resized to be 100px by 50px. If this isn't happening, you can fill out a second level support request here, and I can take a look into the issue for you:
https://www.interactivetools.com/support/email_support_form.php
Adding functionality to allow the cropping of images to the right ratio/dimensions is something we're looking at adding to the CMS in the future.
It is possible to use CSS to "crop" an image for you, this is how facebook often creates some of its square images:
.thumb {
display: inline-block;
width: 200px;
height: 200px;
margin: 5px;
border: 3px solid #c99;
background-position: center center;
background-size: cover;
}
then you're html would need to be:
<div class="thumb" style="background-image: url('/path/to/image');" ></div>
You can also use the method below to display images in there correct dimensions inside of a div:
img{
width: auto;
max-width: 150px;
height: auto;
max-height: 100px;
}
Then your html would be:
<div style="width:200px;height:200px" ><img src="/path/to/image.png" alt="image keeps correct dimensions" /></div>
Thanks!
Greg
PHP Programmer - interactivetools.com
By willydoit - March 21, 2014 - edited: March 21, 2014
Hi Greg,
Thats really helpful thanks, it will be next week before I can play around with this fully but am I correct in assuming that if I add the initial css to one of my stylesheets and then include the following, (everything in bold works at the moment) is that all I need to do to ensure a maximum image height to prevent text underneath from jumping around each time an image displays with a height different to the previous image.? will the ul class="rslides" overide the settings in the class="thumb"? if so would I need to add your css code to the slider 1 element in the css which contains the rslides css?
Also, you have included a background image, is this needed and if so I assume it should be to the same dimensions as the required image display size. and finaly athough I should find out when I am able to test it when back in the office, will adding this code still allow the image display to be responsive and will I need to add similar code into my responsive.css file with different dimensions suited to a mobile display?
Thanks again for your help though as it seems on the face of it to be just what I need. I will let you know how I get on.
<div class="thumb" style="background-image: url('/path/to/image');" >
<ul class="rslides" id="slider1">
<?php foreach ($self_cateringRecord['uploads'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<li><img src="<?php echo $upload['thumbUrlPath3'] ?>" alt="Accommodation in Bridlington"></li>
<?php endif ?>
<?php endforeach ?>
</ul>
</div>.
Thanks again.
By gregThomas - March 24, 2014
Hi,
If you wanted to make the images crop automatically to the right size, you'd replace the img tag with the div tag, and make the thumbnail display as a background image. I've attached an image of an example I made using my car test section. Here is the code I used to create it:
<?php
// load records from 'cars'
list($cars, $carsMetaData) = getRecords(array(
'tableName' => 'cars',
'loadUploads' => true,
'allowSearch' => false,
));
?>
<html>
<head>
<!-- create thumb style that uses a backbround image to center an image -->
<style>
.thumb {
display: block;
width: 200px;
height: 200px;
margin: 5px;
border: 3px solid #c99;
background-position: center center;
background-size: cover;
}
</style>
</head>
<body>
<ul>
<!-- Cycle through the cars -->
<?php foreach($cars as $car): ?>
<?php if($image = @$car['picture'][0]): ?>
<li>
<!-- We add the background image to the div, and it will be centered correctly -->
<a href="<?php echo $image['urlPath']; ?>"><div class="thumb" style="background-image: url('<?php echo $image['thumbUrlPath2']; ?>')"></div></a>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</body>
</html>
So we're using a div tag, and using each images thumbnail as the background image to each div as we cycle through them. The thumb styles will ensure that the image crops and centres for each.
So with your code in the previous post, you just need to replace the image with the div system I've used in my example code, and include the thumb styles in your style sheet.
Thanks!
Greg
PHP Programmer - interactivetools.com
