HINT: Simple way to make square thumbs

Serge D

Joined: 2009-06-11
Posts: 2139

Posted: Tue, 2009-09-29 13:32

This is small hint coming from implementation of my own theme (see: GreyDragon) and no initial support for square thumbs for the album pages.
Trying to force thumb being generated to be square, or any specific proportion for that matter, I have went other way and just crop my image when necessary. You can see how it work in the theme here.
Idea is to set size of the thumb be at least N (where N is shortest side of photos published AFTER currently supported LONGEST size is applied). As you see there is some guess is required to configure theme options and set Thumb Size properly.
There is also need for custom album.html.php and CSS for the theme.

At this time I have following adjustment to the file above:

Quote:

<?= $theme->thumb_top($child) ?>
<p class="thumbcrop"><a href="<?= $child->url() ?>">
<?= $child->thumb_img() ?>
</a></p>
<?= $theme->thumb_bottom($child) ?>

and to CSS:

Quote:

.thumbcrop { overflow: hidden; position: relative; width: 200px; height: 150px; }

It works rather nicely.
Enjoy.

griffinmt

Joined: 2009-09-06
Posts: 128

Posted: Tue, 2009-09-29 13:57

This is a handy tidbit. Before trying it out, I am curious about where it crops the image. Looking at the changes, it seems to be down the right side and/or along the bottom. Would not 'centering' the image take care of a balanced overflow crop?
Also, the 200 x 150 size specified does not necessarily apply to all themes, if they have smaller thumbnails to fit more across the page.

Martyn T. Griffin

Serge D

Joined: 2009-06-11
Posts: 2139

Posted: Tue, 2009-09-29 14:57

@griffinmt: With overflow: hidden and width/height specified, it creates "window" in which image is displayed. Anything what does not fit in this window is "cropped".
I am not using CSS "crop" rule since it is not supported by all browsers, and no changes are required to the thumb generator logic itself.

As for 200x150, "I have following adjustment" applies. This is for my theme. You can use 150x150 or any other size.

Serge D Joined: 2009-06-11 Posts: 2139	Posted: Tue, 2009-09-29 13:32
	This is small hint coming from implementation of my own theme (see: GreyDragon) and no initial support for square thumbs for the album pages. Trying to force thumb being generated to be square, or any specific proportion for that matter, I have went other way and just crop my image when necessary. You can see how it work in the theme here. Idea is to set size of the thumb be at least N (where N is shortest side of photos published AFTER currently supported LONGEST size is applied). As you see there is some guess is required to configure theme options and set Thumb Size properly. There is also need for custom album.html.php and CSS for the theme. At this time I have following adjustment to the file above: Quote: <?= $theme->thumb_top($child) ?> <p class="thumbcrop"><a href="<?= $child->url() ?>"> <?= $child->thumb_img() ?> </a></p> <?= $theme->thumb_bottom($child) ?> and to CSS: Quote: .thumbcrop { overflow: hidden; position: relative; width: 200px; height: 150px; } It works rather nicely. Enjoy.
	XUser login Username: * Password: * Create new account Request new password
griffinmt Joined: 2009-09-06 Posts: 128	Posted: Tue, 2009-09-29 13:57
	This is a handy tidbit. Before trying it out, I am curious about where it crops the image. Looking at the changes, it seems to be down the right side and/or along the bottom. Would not 'centering' the image take care of a balanced overflow crop? Also, the 200 x 150 size specified does not necessarily apply to all themes, if they have smaller thumbnails to fit more across the page. Martyn T. Griffin

Serge D Joined: 2009-06-11 Posts: 2139	Posted: Tue, 2009-09-29 14:57
	@griffinmt: With overflow: hidden and width/height specified, it creates "window" in which image is displayed. Anything what does not fit in this window is "cropped". I am not using CSS "crop" rule since it is not supported by all browsers, and no changes are required to the thumb generator logic itself. As for 200x150, "I have following adjustment" applies. This is for my theme. You can use 150x150 or any other size.

HINT: Simple way to make square thumbs

XUser login