Thumbnail resizing issue

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.

http://pixlr.com/editor/

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.

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

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.

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