Python wagtail image tag














































Python wagtail image tag



In this article we will learn about  image tag inside template and what can be the different field that can used to resize the image tag and how we can load this tag in wagtail

Different type of field are as followed:-

  • max  (takes two dimensions)
                  {% image page.photo max-1000x500 %}

  • min  (takes two dimensions)
                      {% image page.photo min-500x200 %}

  • width (takes one dimension)
                      {% image page.photo width-640 %}

  • height (takes one dimension)
            {% image page.photo height-480 %}

  • scale  (takes percentage)
                       {% image page.photo scale-50 %}

  • fill  (takes two dimensions and an optional -c parameter)
                        {% image page.photo fill-200x200 %}

  • original (takes no dimensions)
                        {% image page.photo original %}


                 More control over the img tag


1. Adding attributes to the {% image %} tag
      {% image page.photo width-400 class="foo" id="bar" %}

2. Generating the image "as foo" to access individual properties

     {% image page.photo width-400 as tmp_photo %}
     <img src="{{ tmp_photo.url }}" 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 attributes src, width , height and alt in one go

      <img {{ tmp_photo.attrs }} class="my-custom-class" />


More Articles of SAYENDEEP MAHANTY:

Name Views Likes
C++ Exception Handling-|| 85 3
C++ Exception Handling 116 3
C++ File Handling EOF 92 5
C++ File Handling Error Handling During file Operation 1135 5
C++ File Handling seekp() Function 105 5
C++ File Handling seekg() Function 105 6
C++ File Handling tellg() Function 126 5
C++ File Handling tellp() Function 133 5
C++ File Handling close() Function 78 5
C++ File Handling:: open() 106 5
C++ File Handling Introduction 131 5
C++ Container Library:: std ::array-II 101 4
Top Django Interview Questions and Answers You Need to Know 302 6
C++ Container Library::std::array 96 6
C++ Container Library Introduction 103 5
Essential Engineering Skills for Your Resume 127 5
Mistakes To Avoid During Technical Interview 133 5
Mistakes You Must Avoid During Work From Home 178 6
Seven Common Mistakes that Beginners Should Avoid While Learning to Code 108 6
Simple Linear Regression 96 6
Python wagtailmenus 122 6
Python wagtail application 119 6
Python guppy GSL 136 5
Python wagtail guppy subpackage heapy 173 6
Python guppy Introduction 215 6
Python wagtail Structural Block 257 6
Python wagtail Integrating into Django Project 370 6
Python wagtail testing 280 7
Python wagtail Basic Block 349 7
Python wagtail image tag 216 7
Python wagtail Templates 179 6
Python wagtail Backends 206 6
Python wagtail Indexing 189 6
Python wagtail Search 173 7
Python wagtail Snippets 192 6
Python wagtail Writing your own page models 165 9
Python wagtail model class PageRevision 196 10
Python wagtail model class Site 198 9
Python wagtail wagtail core model 218 9
Python wagtail page models 189 10
Python wagtail 166 11

Comments