0
0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-28 08:48:04 +01:00

Update frontenddevelopers.rst

Added notes about new image manipulation techniques
This commit is contained in:
Dave Cranwell 2014-06-20 13:46:43 +01:00
parent b26744e137
commit 8cb94f0b5c

View File

@ -186,7 +186,24 @@ 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:
Greater control over the ``img`` tag is often required, for example to add a custom ``class``. This can be most easily achieved in two ways:
.. versionadded:: 0.4
Adding attributes to the {% image %} tag
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Simply add extra attributes with the syntax ``attribute="value"`` to the tag:
.. code-block:: django
{% image self.photo width-400 class="foo" id="bar" %}
Generating the image "as"
~~~~~~~~~~~~~~~~~~~~~~~~~
Wagtail can assign the image data to another object using Django's ``as`` syntax:
.. code-block:: django
@ -197,12 +214,17 @@ In some cases greater control over the ``img`` tag is required, for example to a
<img src="{{ tmp_photo.src }}" width="{{ tmp_photo.width }}"
height="{{ tmp_photo.height }}" alt="{{ tmp_photo.alt }}" class="my-custom-class" />
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
<img {{ tmp_photo.attrs }} class="my-custom-class" />
.. _rich-text-filter:
Rich text (filter)