diff --git a/docs/building_your_site/frontenddevelopers.rst b/docs/building_your_site/frontenddevelopers.rst index a8cf6a25e..8d0c9a3bb 100644 --- a/docs/building_your_site/frontenddevelopers.rst +++ b/docs/building_your_site/frontenddevelopers.rst @@ -186,23 +186,42 @@ The available resizing methods are: More control over the ``img`` tag --------------------------------- -In some cases greater control over the ``img`` tag is required, for example to add a custom ``class``. Rather than generating the ``img`` element for you, Wagtail can assign the relevant data to another object using Django's ``as`` syntax: +Wagtail provides two shorcuts to give greater control over the ``img`` element: + +.. versionadded:: 0.4 +**Adding attributes to the {% image %} tag** + +Extra attributes can be specified with the syntax ``attribute="value"``: + +.. code-block:: django + + {% image self.photo width-400 class="foo" id="bar" %} + +No validation is performed on attributes add in this way by the developer. It's possible to add `src`, `width`, `height` and `alt` of your own that might conflict with those generated by the tag itself. + + +**Generating the image "as"** + +Wagtail can assign the image data to another object using Django's ``as`` syntax: .. code-block:: django - {% load image %} - ... {% image self.photo width-400 as tmp_photo %} {{ tmp_photo.alt }} +.. versionadded:: 0.4 +The ``attrs`` shortcut +----------------------- + You can also use the ``attrs`` property as a shorthand to output the ``src``, ``width``, ``height`` and ``alt`` attributes in one go: .. code-block:: django + .. _rich-text-filter: Rich text (filter)