Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 85 lines (56 sloc) 2.795 kB
47d7313 @arjan doc: datamodel manual
arjan authored
1 .. _manual-media:
7b225b4 @kaos doc: added some more lorem ipsum...
kaos authored
2
3 Media file handling
4 ===================
5
744d88f @arjan Add Github edit links to documentation RST pages.
arjan authored
6
fb5ccce @arjan doc: Document media classes
arjan authored
7 .. _manual-media-classes:
8
9 Media classes
10 -------------
11
12 So-called `media classes` define a way to give a specific image
13 transformation a name and re-use it amongst templates.
14
15 The :ref:`tag-image` tag has a `mediaclass` attribute which expects
16 the name of a mediaclass that is defined somewhere.
17
18 Zotonic uses the template lookup mechanism to look for files called
19 ``mediaclass.config`` under the `templates/` directories of your
20 modules/sites. An example ``mediaclass.config`` file is the following::
21
22 [
23 {"thumb",
24 [
25 {width, 120},
26 {height, 120},
27 crop
28 ]}
29 ].
30
31 This defines a media class called `"thumb"`, which can be used to
32 display a 120x120 cropped square image. This media class can then be
33 used in the image tag as follows::
34
35 {% image id mediaclass="thumb" %}
36
37 The image URL will have a checksum embedded in it so that when the
38 contents of the media class is changed, all images which use that
39 media class will be regenerated to reflect the new media class.
40
41
25fc074 @mworrell core: added 'magick' image filter options. Fixed mime lookup if lossl…
mworrell authored
42 ImageMagick conversion options
43 ..............................
44
45 Besides the normal image processing options, as described in :ref:`tag-image`, it is
46 possible to add literal ImageMagick convert commands to the mediaclass definition.
47
48 For example::
49
50 {magick, "-level 90%,100% +level-colors \\#FE7D18,\\#331575"}
51
52 (Note that you have to double any backslashes that were needed for the `convert` command line.)
53
54 This command is given *as-is* to the ImageMagick `convert` command, therefore it is best to
55 first try it with the command-line `convert` command to find the correct options and command line
56 escapes needed.
57
58 There are three variations: `pre_magick`, `magick`, and `post_magick`.
59 The only difference is that the `pre_magick` is added before any other filter argument, `magick`
60 somewhere between, and `post_magick` after the last filter.
61
62 In this way it is possible to pre- or post-process an image before or after resizing.
63
64 See http://www.imagemagick.org/Usage/ for examples of using ImageMagick from the command line.
65
66
fb5ccce @arjan doc: Document media classes
arjan authored
67 User-agent specific images
68 ..........................
69
70 Since the ``mediaclass.config`` file is resolved using the template
71 selection mechanism, it is subject to the same selection rules that
72 normal templates fall under.
73
74 The consequence is that you can have multiple ``mediaclass.config``
75 files, for instance one in `desktop/`, one in `phone/`. The media
76 classes defined in those subdirectories can have the same names. This
77 way you can make thumbnail sizes smaller for phones, or serve
78 higher-quality JPEG file for desktop browsers.
79
80 See :ref:`manual-lookup-system-ua` for the details on the user-agent
81 selection mechanism.
82
83
84 .. seealso:: :ref:`tag-image`, :ref:`tag-media`, :ref:`manual-lookup-system-ua`
Something went wrong with that request. Please try again.