Sorethumb Examples

Basic thumbnail

Here we have a basic thumbnail that uses PIL's thumbnail operation to reduce an image to fit in a defined dimensions.
```
class SmallThumb(DjangoThumbnail):    
    filters = [ThumbnailFilter(120, 100)]
```
Square

As above, but cropped to be square. Since uploaded images can be any old size, they can tend to look ragged when presented in rows. Square thumbs look better in rows, at the expense of a little cropping
```
class Square(DjangoThumbnail):    
    filters = [ThumbnailFilter(100, 100),
               SquareFilter()] 
```

5 pixels rounded corner

Rounded corners without CSS3, on a transparent background. What is it with designers and rounded corners anyway?

class RoundedCorners5(DjangoThumbnail):    
    format = 'png'
    filters = [ThumbnailFilter(120, 100),
               RoundedCornerFilter(5)]

10 pixels rounded corner

As above, but 10 pixels.
20 pixels rounded corner

Even more rounded corners

Rounded corners with a border

The rounded corner filter also supports a coloured border

class RoundedCornersEdged(DjangoThumbnail):    
    format = 'png'
    filters = [ThumbnailFilter(120, 100),
               RoundedCornerFilter(10, border='#333')]

Rounded corners on an opaque background

Rounded corners on an opaque backround for browsers with poor support for per-pixel transparency — IE6 I'm looking at you!

class RoundedCornersBackground(DjangoThumbnail):    
    format = 'png'
    filters = [ThumbnailFilter(120, 100),
               RoundedCornerFilter(10, border='#333'),               
               ResizeCanvasFilter(130, 110, '#fff'),
               OpaqueFilter('#fff')]

Rounded corners on a gadient

As above, but on a gradient background. The vertical gradient filter replaces transparent areas with a smooth gradient between two colours.

class RoundedCornersBackgroundGradient(DjangoThumbnail):    
    format = 'png'
    filters = [ThumbnailFilter(120, 100),
               RoundedCornerFilter(10, border='#000'),               
               ResizeCanvasFilter(130, 110, '#e2e2ff', background_opacity=0),
               VerticalGradientFilter('#fff', '#88e')]

Masked thumbnail

This thumbnail uses MaskFilter which replaces the alpha channel with another image, to create some interesting effects.

class MaskThumb(DjangoThumbnail):    
    format = 'png'
    filters = [ThumbnailFilter(120, 100),
               ResizeCanvasFilter(120, 100, '#000', background_opacity=0),
               MaskFilter(settings.MEDIA_ROOT+'/alpha.png')]

Grayscale

A grayscale thumb, could be used as a hover state.

class GrayThumb(DjangoThumbnail):        
    filters = [ThumbnailFilter(120, 100),
               GrayscaleFilter()]

50% opacity

The OpacityFilter sets the opacity of the thumbnail.

class FadedThumb(DjangoThumbnail):    
    format = 'png'
    filters = [ThumbnailFilter(120, 100),
               OpacityFilter(.5)]

Thumbnail with overlay

A thumbnail with an overlayed transparent png. Could be used to indicate online status.

class OverlayThumb(DjangoThumbnail):
    format = 'png'
    filters = [ThumbnailFilter(120, 100),
              OverlayFilter(settings.MEDIA_ROOT+'/user.png')]

Sorethumb Examples

Basic thumbnail

Square