No Support => General discussion (no support!) => Topic started by: Rodinou on September 06, 2004, 05:41:41 pm

Title: Create Cropped images with CSS ... !? :)
Post by: Rodinou on September 06, 2004, 05:41:41 pm
Hi ... Becoming crazy about the problem of cropped image (by Pic editor : pic by pic ... arghhhhhhh !!!) I have found a solution in CSS :)

Since we can play with margin-left / margin-top ..., when it's possible to overflow a div > hidden ... that's the hack ...

If users want to turn on or off to "normal thumb" or "cropped thumb", a simple admin manipulation to "add" css + div in the code would be perfect ...

So ...

The CSS Code

<style type="text/css" media="screen">
    .cropped {
   display : block; // div is like a bloc ...
   overflow : hidden; // no scroll available if the pic has some text, for example ... no deformation of the div
   width : 70px; // width of your cropped div
   height : 70px; // height of your cropped div
   float : left; // to "simulate" a table with div, float is the best way
   padding : 0px; // changing if you want,
   margin : 5px; // changing if you want

   .cropped img {
   margin-left : -10px; // play with this to "calculate" the position left of your "middle" of your pic"
   margin-top : -5px; // play with this to calculate" the position top of your "middle of your pic"
   border : 0px; // if you want border or not : but it's more funny to play with padding of the .cropped instead playing with border img.

So after ... if you take a gallery example ... (my default theme is Hardwired)

        <td valign="top" class="thumbnails" width ="25%" align="center">
                <table width="100%" cellpadding="0" cellspacing="0">
                                <td align="center">
                                        <div class="cropped"><a href="displayimage.php?album=907&pos=6"><img src="albums/discotheques/chakra/04-09-04_MaiaK_DavidVendetta/tn_20040904-Chakra_007.jpg" class="image" width="100" height="75" border="0" alt="20040904-Chakra_007.jpg" title="Nom du fichier : 20040904-Chakra_007.jpg
Poids du fichier : 48Ko
Dimensions : 640x480
AjoutÚ le : Sep 05, 2004"></a>
                                        <span class="thumb_title" style="clear : both">CÚcile & David Vendetta&nbsp;&ndash;&nbsp;vu 72 fois</span></div>

Compatible with Mozilla, Firefox, IE and Opera 7.x ...

Title: Re: Create Cropped images with CSS ... !? :)
Post by: Rodinou on September 07, 2004, 12:23:45 am
in application ...

this is the "normal" thumb gallery in my coppermine

The "Cropped" Same gallery with CSS : no GD or ImageMagick !!!