What's the best way to resize media images on the front end?

Frontend
1

Hey everyone! I’m stuck trying to make my uploaded images smaller when they show up on my website. I’ve been messing with some code but it’s not doing what I want. Here’s what I tried:

foreach($this->getBannerImages() as $banner) {
    $imagePath = Mage::getBaseUrl('media') . 'Banners/uploads/' . $banner['filename'];
    $imageObj = new Varien_Image($imagePath);
    echo '<img src="' . $imageObj->resize(100, 100) . '" alt="Banner" />';
}

This doesn’t show anything at all. Then I tried this:

foreach($this->getBannerImages() as $banner) {
    $imagePath = Mage::getBaseUrl('media') . 'Banners/uploads/' . $banner['filename'];
    echo '<img src="' . $imagePath . '" alt="Banner" />';
}

Now the images show up, but they’re still full size. How can I make them smaller? Any tips would be awesome!

2

hey there! have you thought about using javascript for resizing? it can be super handy! maybe something like this:

img.onload = function() {
  let canvas = document.createElement('canvas');
  canvas.width = 100;
  canvas.height = 100;
  canvas.getContext('2d').drawImage(img, 0, 0, 100, 100);
  img.src = canvas.toDataURL();
}

what do you think? it might solve your problem without needing to mess with php. curious to hear your thoughts!

3

I’ve encountered similar challenges with image resizing on the front end. Instead of using PHP for this task, I’d recommend leveraging CSS to handle the resizing. You can achieve this by setting specific dimensions or using max-width and max-height properties on your img tags. For example:

img {
    max-width: 100px;
    max-height: 100px;
    object-fit: cover;
}

This approach maintains the original aspect ratio while constraining the image to the specified dimensions. It’s more performant than server-side resizing and allows for responsive design. If you need different sizes for various screen sizes, consider using CSS media queries. Remember, this method doesn’t actually reduce the file size, so it’s best combined with server-side optimization for larger images.

4

hey man, have u tried using the html width and height attributes? its super simple:

<img src="<?php echo $imagePath; ?>" width="100" height="100" alt="Banner">

this’ll make ur images show up at 100x100 pixels. easy peasy! let me kno if it works for ya