Create Cropped images with CSS ... !? :)

[Rodinou]

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.
}
 -->
</style>


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">
                       <tr>
                               <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>
                                       
                               </td>
                       </tr>
               </table>
       </td>

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

[Rodinou]

in application ...

this is the "normal" thumb gallery in my coppermine

http://www.sortons.net/photos/thumbnails.php?album=912

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

http://www.sortons.net/photos/gal.php