Author Topic: Making thumbnails of photos appear equally square  (Read 3832 times)

maverick

  • Administrator
  • Veteran Member
  • *****
  • Posts: 2878
  • Karma: +210/-7
    • Maverick Webworks
Making thumbnails of photos appear equally square
« on: January 24, 2011, 05:02:57 PM »
I occasionally get asked if it's possible to make the thumbnails of photos always appear equally square.

Some sites use complex methods which require the ability to crop images during the uploaded process. However, cropping methods are complex to implement, they also can pose issues with images that are extremely horizontal or vertical as it typically just grabs the largest square portion from the center of the image, which could land up cropping out an important part of a photo, such as someone's head.

The easiest method is an aesthetic modification which changes the background canvas to black instead of the default white. Since the page color is already white, photos which aren't already perfectly square when uploaded by the user, the resulting thumbs will have white space either on the top and bottom, or on the left and right sides, making multiple thumbs appear aesthetically uneven when viewed all in a row. Having a black background canvas provides an overall esthetically even appearance when multiple thumbs are viewed all in row, such as in member widget boxes.



If you're interested in this aesthetic modification you can get the instructions from here ... http://www.maverickwebworks.com/free.html

 

Fusion Responsive Template & Free Mods
http://www.maverickwebworks.com
DO NOT PM me asking for personal help. Post your problem or request in the forums so the entire community can contribute and benefit.

Johnboy

  • Global Moderator
  • Veteran Member
  • *****
  • Posts: 566
  • Karma: +40/-2
Re: Making thumbnails of photos appear equally square
« Reply #1 on: January 25, 2011, 06:25:29 PM »
I just tried it out, and it WORKS!!!!!
Looks much better.
Thanks Maverick  ;)
I LOVE these forums!!! So helpful...

qflame

  • Confirmed Member
  • **
  • Posts: 3
  • Karma: +0/-0
Re: Making thumbnails of photos appear equally square
« Reply #2 on: January 29, 2011, 03:03:24 PM »
Ok is there a way to remove the margin around the image all together? So when the thumbnails are generated it is the image only? Or where is the location to the actual image uploaded?

maverick

  • Administrator
  • Veteran Member
  • *****
  • Posts: 2878
  • Karma: +210/-7
    • Maverick Webworks
Re: Making thumbnails of photos appear equally square
« Reply #3 on: January 29, 2011, 04:05:36 PM »
Quote
Ok is there a way to remove the margin around the image all together? So when the thumbnails are generated it is the image only?
No, if you set the smallest thumb to be 100px, it's going to create thumbs that are 100px by 100px square, photos that aren't absolutely square when uploaded will be centered within the 100px square thumbnail box being created during the upload process, and if the photo happens to be horizontal in nature the excess showing on the top and bottom of the photo will be that of the background canvas set for thumb.

And, no the background color of the thumbs can't be set to be transparent, if the original photo is in jpeg format (which most will be) so will the thumbs be in a jpeg format, and the jpeg format doesn't support transparencies.

You basically have 3 choices, you can have the thumbs with the rounded corner border, or simply uncheck the rounded corners in the admin and just have a blank white background, or use my aesthetic modification to make the background black so the images all appear to be square.

The only true way of not having any background color show for thumbnail images would be by implementing a cropping method which I mentioned in my original post above.


Quote
Or where is the location to the actual image uploaded?
All photos and thumbs are uploaded to various folders located in the "media" folder.

Fusion Responsive Template & Free Mods
http://www.maverickwebworks.com
DO NOT PM me asking for personal help. Post your problem or request in the forums so the entire community can contribute and benefit.

qflame

  • Confirmed Member
  • **
  • Posts: 3
  • Karma: +0/-0
Re: Making thumbnails of photos appear equally square
« Reply #4 on: January 29, 2011, 04:32:02 PM »
Thanks, I've figured a work around for what I was trying to do, maybe later in the future I will try to add a crop feature if possible, I'm still getting familiar with the code, wish their was documentation

kevrich69

  • Confirmed Member
  • **
  • Posts: 20
  • Karma: +0/-0
Re: Making thumbnails of photos appear equally square
« Reply #5 on: February 17, 2013, 06:15:11 PM »
I have replaced the code in the /includes/img_functions.inc.php  as stated in the instructions, made sure that the check was removed for round corners, and regenerated the skin, and yet the changes have not taken effect. I have the "Titanium_Template". I would like the background in the thumbnails to be black. Is there another change I should make in this templet to be successful?

Marble

  • Global Moderator
  • Veteran Member
  • *****
  • Posts: 1004
  • Karma: +56/-7
Re: Making thumbnails of photos appear equally square
« Reply #6 on: February 18, 2013, 07:18:31 AM »
I have replaced the code in the /includes/img_functions.inc.php  as stated in the instructions, made sure that the check was removed for round corners, and regenerated the skin, and yet the changes have not taken effect. I have the "Titanium_Template". I would like the background in the thumbnails to be black. Is there another change I should make in this templet to be successful?

Are you aware that only new photos will have the new background color? The color will not change on photos that were uploaded prior to the changes you made.
If you see that I'm logged in forever... it just means I turned the page on my browser and forgot to logout.

pourkoipas78

  • Prime Member
  • ****
  • Posts: 107
  • Karma: +1/-0
Re: Making thumbnails of photos appear equally square
« Reply #7 on: August 09, 2015, 07:26:46 AM »
Hello,

And how do you make the background transparent ?

Thank you in advance

flyer5

  • Active Member
  • ***
  • Posts: 96
  • Karma: +4/-0
    • North East Nudists
Re: Making thumbnails of photos appear equally square
« Reply #8 on: September 03, 2015, 02:06:48 PM »
If you make the background transparant the images will no longer look equally square, so kinda defeats Mavericks post. Is that the effect you want?

F5

pourkoipas78

  • Prime Member
  • ****
  • Posts: 107
  • Karma: +1/-0
Re: Making thumbnails of photos appear equally square
« Reply #9 on: September 03, 2015, 02:49:24 PM »
It does not matter that they are not square , I want a transparent background so that it fits the template of my site

blueeyeddevil

  • Active Member
  • ***
  • Posts: 43
  • Karma: +3/-0
Re: Making thumbnails of photos appear equally square
« Reply #10 on: September 03, 2015, 04:55:40 PM »
Try to install phpthumb integration from here:
 http://www.testing-site.info/etano-addons.html

pourkoipas78

  • Prime Member
  • ****
  • Posts: 107
  • Karma: +1/-0
Re: Making thumbnails of photos appear equally square
« Reply #11 on: September 11, 2015, 05:56:55 PM »
Try to install phpthumb integration from here:
 http://www.testing-site.info/etano-addons.html
Ok I not know this addon, thanks ... I'll try one of those four ...

Otherwise there is no quick way to transparency instead of color ?
In the template KHDev the background is an image and then suddenly it 's not nice

Marble

  • Global Moderator
  • Veteran Member
  • *****
  • Posts: 1004
  • Karma: +56/-7
Re: Making thumbnails of photos appear equally square
« Reply #12 on: September 11, 2015, 10:55:02 PM »
Try to install phpthumb integration from here:
 http://www.testing-site.info/etano-addons.html
Ok I not know this addon, thanks ... I'll try one of those four ...

Otherwise there is no quick way to transparency instead of color ?
In the template KHDev the background is an image and then suddenly it 's not nice

The one that blueeyeddevil made will crop the images to a perfect square so that there is no color surrounding the thumbnails. Why then, do you need a transparency?
If you see that I'm logged in forever... it just means I turned the page on my browser and forgot to logout.

pourkoipas78

  • Prime Member
  • ****
  • Posts: 107
  • Karma: +1/-0
Re: Making thumbnails of photos appear equally square
« Reply #13 on: September 16, 2015, 05:52:08 PM »
Yes i will ...
And the old images, they will crop if I empty the cache ?
Thanks

Marble

  • Global Moderator
  • Veteran Member
  • *****
  • Posts: 1004
  • Karma: +56/-7
Re: Making thumbnails of photos appear equally square
« Reply #14 on: September 21, 2015, 11:08:22 AM »
Yes i will ...
And the old images, they will crop if I empty the cache ?
Thanks

No. the old messages will be the same. only new photos will show the changes. When photos are uploaded, they are then stored permanently in the media directory. From the upload process they are automatically resized and converted into cropped and watermarked images. These images are then placed in specific sub-directories inside the media directory.
If you see that I'm logged in forever... it just means I turned the page on my browser and forgot to logout.