Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1
  • 2

TOPIC: Square thumbnails with cropped images

Square thumbnails with cropped images 3 weeks 4 days ago #26093

I would love to see an option for square thumbnails!

Has anyone had any luck with this?

Please Log in or Create an account to join the conversation.

Square thumbnails with cropped images 3 weeks 3 days ago #26096

This might help in the meantime, if you want to extend your Zebra class: stackoverflow.com/questions/6891352/crop-image-from-center-php
Another option would be to specify height and width in your CSS to force square thumbnail image. Can even go step further and create rounded corners or circle image.
The following user(s) said Thank You: mrcraige

Please Log in or Create an account to join the conversation.

Square thumbnails with cropped images 3 weeks 3 days ago #26099

  • stevent
  • stevent's Avatar Topic Author
  • Offline
  • Expert Boarder
  • Expert Boarder
  • Posts: 105
  • Thank you received: 24
There is no need to use an external library like Zebra. PHP can resize and crop.
www.php.net/manual/en/function.imagecrop.php

I haven't writen code yet, but I think this is beter than Zebra, since cropping to a square without distorting the image requires extra lines of code with Zebra library. Or rather: you need to crop the image twice to create a square.

Please Log in or Create an account to join the conversation.

Last edit: by stevent.

Square thumbnails with cropped images 3 weeks 2 days ago #26100

  • jojo12
  • jojo12's Avatar
  • Offline
  • Moderator
  • Moderator
  • Posts: 3039
  • Karma: 45
  • Thank you received: 310
JEM uses zebra in classes/image_class.php! version 2.2.6
But meanwhile there's version 2.2.7 (a fix thanks to Hoffi!), which should be updated in JEM.
5.5.5-10.0.30-MariaDB-0+deb8u1
PHP 7.2.9 on different sites
Apache
JEM 2.3.0dev 2.0M and specials with Joomla! 3.9.3 stable on livesites
ja_simply, ja_purity_iii, multilingual DE EN IT FR

Please Log in or Create an account to join the conversation.

Last edit: by jojo12.

Square thumbnails with cropped images 3 weeks 1 day ago #26106

Thanks for your suggestions.

Using transform in css seems to work. I added this to the css file to make square thumbnails in the eventslist.
.jem-list-img {	
    position: relative;
    width: 100px;
    border: 0;
    overflow: hidden;
    height: 100px;
}
.jem-list-img img {
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto
}

I got the idea from here:
https://stackoverflow.com/questions/25261198/css-cropping-landscape-to-square

An even easier option would simply be
object-fit: cover;
However, it's not supported by older browsers.

Please Log in or Create an account to join the conversation.

Last edit: by mrcraige.
  • Page:
  • 1
  • 2
Time to create page: 0.214 seconds

Donate

If you find JEM useful and if you use it on your site, please consider a donation to the project.

Private Messages

You are not logged in.

Follow us......