Transmogrify v0.2beta0 documentation
In the template, first:
{% load transmogrifiers %}
You will have access to the following tags:
Alter an image URL so that the media server will transform the image on the fly. This tag allows for multiple actions on an image. There are shortcuts for doing just one action.
{% transmogrify url [action [param]] [action2 [param2] ...] %}
Run an image filter; filter can be:
These don’t look all that good, but whatever.
Thumbnail 200px wide:
{% transmogrify img thumbnail "200" %}
Thumbnail 200px high:
{% transmogrify img thumbnail "x200" %}
Thumbnail to fit within 200x200:
{% transmogrify img thumbnail "200x200" %}
Resize to fit within a 400x400px box:
{% transmogrify img resize "400x400" %}
Resize to be 400px wide:
{% transmogrify img resize "400" %}
Resize to be 400px high:
{% transmogrify img resize "x400" %}
Force the image to fit 75x75, distorting the image if the aspect isn’t right:
{% transmogrify img forcefit "75x75" %}
Resize the image to fit 100x100 and sharpen:
{% transmogrify img resize "100x100" filter "sharpen" %}
Resize the image to fit 100x100, smooth, and add a 1px black border:
{% transmogrify img resize "100x100" filter "smooth" border "1" "#000" %}
Crop a 100x100 section out of the middle of image:
{% transmogrify img crop "100x100" %}
A shortcut to the transmogrify tag’s thumbnail action. It creates a thumbnail.
{% thumbnail <image_url> <width> %}
{% thumbnail <image_url> x<height> %}
{% thumbnail <image_url> <width>x<height> %}
Thumbnail 200px wide
{% thumbnail img 200 %}
Thumbnail 200px high
{% thumbnail img x200 %}
Thumbnail to fit within 200x200
{% thumbnail img 200x200 %}
A shortcut to the transmogrify tag’s resize action. It resizes the image to fit the dimensions and maintains the aspect ratio.
{% resize <image_url> <width> %}
{% resize <image_url> x<height> %}
{% resize <image_url> <width>x<height> %}
Resize image to 500px wide
{% resize img 500 %}
Note
The vertical image is not 500 pixels wide because the original is only 358 pixels wide. The Python Imaging Library will not upscale an image. Instead the original image is returned.
Resize image to 500px high
{% resize img x500 %}
Resize image to fit within 500x500 pixel box
{% resize img 500x500 %}
A shortcut to the transmogrify tag’s letterbox action. It resizes the image to fit the dimensions and maintains the aspect ratio. The remaining space is filled with the color specified.
{% letterbox <image_url> <width>x<height> <color> %}
Resize image to fit within 500x500 pixel box, and fill the rest with red
{% letterbox img 500x500 #f00 %}
Resize image to fit within 400x500 pixel box, and fill the rest with a light yellow
{% letterbox img 500x500 #fffee1 %}
A shortcut to transmogrify tag’s forcefit action. It resizes the image to fit the dimensions, possibly distorting the image in the process.
{% forcefit <image_url> <width>x<height> %}
A shortcut to the transmogrify tag’s crop action. It crops out a section of the center of an image.
{% crop <image_url> <width>x<height> %}
A shortcut to the transmogrify tag’s filter action. It applies the specified filter (one of blur, contour, detail, edge_enhance, edge_enhance_more, emboss, find_edges, smooth, smooth_more, sharpen) to the image. Only one filter can be specified.
{% filter <image_url> <filtername> %}
Blur
Contour
Detail
Edge Enhance
Edge Enhance More
Emboss
Find Edges
Sharpen
Smooth
Smooth More