square thumbnails

[rolfijn]

Hallo list,

Recently i installed serendipity to keep an online blog. I also want add photo's to my blog entries. I was wondering if and how it would be possible to let serendipity generate square thumbnails. Square thumbnails without adjusting the proportions of the image or, in other words, use cropping to achieve this.
I have been googling around a bit and have found that there are probably two ways to achieve this: One is to use the GD or Imagemagick to really create square thumbs. I don't have imagemagick installed so serendipity probably uses the php GD library to create the thumbnails.
The other way would be to use CSS to create the illusion of a square thumb.
Since i am not really into coding and the use of square thumbs is quite common, i was wondering wherher anybody has already made this happen and was willing to share with me how he/she did this.

Thanks in advance,
Rolf Deenen

[garvinhicking]

Hi!

Serendipity only supports proportional scaling, because automatted cutting of images to fit into square format would possibly lead to images where important parts are cut. Flickr has a sophisticated algorithm for that to put parts with many differing pixels into the cut area, but that algorith is hard to reproduce on pure PHP.

Serendipity currently has no real cropping support, so that would need to be done externally. Once a thumbnail image is created, you can edit that thumbnail image manually.

For automatisms, one could build a plugin that creates square thumbnails, so if you do want to cut important parts that could be achieved with a serendipity plugin.

For CSS methods, I myself sadly also have no clue.

HTH,
Garvin

[Dash]

CSS-wise, it's quite simple. Your only problem would be generating the code around each image (which I'm still trying to figure out)

Example of the CSS code:

Code: Select all

.thumbnail_square {
	height: 100px;
	width: 100px;
	overflow: hidden;
	text-align: center;
}
.thumbnail_square img {
	height: 100px;
}

and the insertion would be something like

Code: Select all

<div class="thumbnail_square">
	<img src="image.jpg"/>
</div>

where image.jpg would actually be your full-size version. The thumbnail division will resize the image's height to 100px (and the width will be calculated proportionally) and will center it in the division, cutting excess width to 100px. The only downfall is that if you're using tall images (y>x), you'll have to do a reverse class (setting the width of the image to 100px rather than the height)