From 8cb94f0b5c37df70624453ca0a7a1b8269f8973b Mon Sep 17 00:00:00 2001 From: Dave Cranwell Date: Fri, 20 Jun 2014 13:46:43 +0100 Subject: [PATCH 1/4] Update frontenddevelopers.rst Added notes about new image manipulation techniques --- .../building_your_site/frontenddevelopers.rst | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/docs/building_your_site/frontenddevelopers.rst b/docs/building_your_site/frontenddevelopers.rst index a8cf6a25e..bb12c5922 100644 --- a/docs/building_your_site/frontenddevelopers.rst +++ b/docs/building_your_site/frontenddevelopers.rst @@ -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 {{ tmp_photo.alt }} + +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) From c1f2f745afcd99cefccc9d9ac0f7615a2a73c69d Mon Sep 17 00:00:00 2001 From: Dave Cranwell Date: Fri, 20 Jun 2014 13:49:25 +0100 Subject: [PATCH 2/4] Update frontenddevelopers.rst heading level fix --- docs/building_your_site/frontenddevelopers.rst | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/docs/building_your_site/frontenddevelopers.rst b/docs/building_your_site/frontenddevelopers.rst index bb12c5922..7b674bf0d 100644 --- a/docs/building_your_site/frontenddevelopers.rst +++ b/docs/building_your_site/frontenddevelopers.rst @@ -190,8 +190,7 @@ Greater control over the ``img`` tag is often required, for example to add a cus .. versionadded:: 0.4 -Adding attributes to the {% image %} tag -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +**Adding attributes to the {% image %} tag** Simply add extra attributes with the syntax ``attribute="value"`` to the tag: @@ -200,8 +199,8 @@ Simply add extra attributes with the syntax ``attribute="value"`` to the tag: {% image self.photo width-400 class="foo" id="bar" %} -Generating the image "as" -~~~~~~~~~~~~~~~~~~~~~~~~~ +**Generating the image "as"** + Wagtail can assign the image data to another object using Django's ``as`` syntax: From 135d4f20a622196caf33c4eb2ac8294b5e8b7f66 Mon Sep 17 00:00:00 2001 From: Dave Cranwell Date: Fri, 20 Jun 2014 14:04:11 +0100 Subject: [PATCH 3/4] Update frontenddevelopers.rst --- docs/building_your_site/frontenddevelopers.rst | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/docs/building_your_site/frontenddevelopers.rst b/docs/building_your_site/frontenddevelopers.rst index 7b674bf0d..602c53c7f 100644 --- a/docs/building_your_site/frontenddevelopers.rst +++ b/docs/building_your_site/frontenddevelopers.rst @@ -186,34 +186,32 @@ The available resizing methods are: More control over the ``img`` tag --------------------------------- -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: +Wagtail provides two shorcuts to gain grater greater control over the ``img`` element: .. versionadded:: 0.4 - **Adding attributes to the {% image %} tag** -Simply add extra attributes with the syntax ``attribute="value"`` to the 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 ----------------------- From ba0805e521986329a7ec4f55bde934aec30e678e Mon Sep 17 00:00:00 2001 From: Dave Cranwell Date: Fri, 20 Jun 2014 14:07:33 +0100 Subject: [PATCH 4/4] Update frontenddevelopers.rst typo fix --- docs/building_your_site/frontenddevelopers.rst | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/building_your_site/frontenddevelopers.rst b/docs/building_your_site/frontenddevelopers.rst index 602c53c7f..8d0c9a3bb 100644 --- a/docs/building_your_site/frontenddevelopers.rst +++ b/docs/building_your_site/frontenddevelopers.rst @@ -186,7 +186,7 @@ The available resizing methods are: More control over the ``img`` tag --------------------------------- -Wagtail provides two shorcuts to gain grater greater control over the ``img`` element: +Wagtail provides two shorcuts to give greater control over the ``img`` element: .. versionadded:: 0.4 **Adding attributes to the {% image %} tag**