Get Direct URL for uploads in search - Wagtail - django

Question

I have customized my search to look at images and documents as part of that search. This is working fine. However I am not sure how to get the URL to the uploaded images/documents that are returned. Ideally there would be a link to download/display in browser. I am ok with the ../media/images/xxx url. But I can't seem to figure out how to get that data in the template. Thoughts? Search is performed by this.
# Search
if search_query:
results = []
page_results = Page.objects.live().search(search_query)
if page_results:
results.append({'page': page_results})
doc_results = Document.objects.all().search(search_query)
if doc_results:
results.append({'docs': doc_results})
img_results = Image.objects.all().search(search_query)
if img_results:
results.append({'image': img_results})
search_results = list(chain(page_results, doc_results, img_results))
query = Query.get(search_query)
# Record hit
query.add_hit()
else:
search_results = Page.objects.none()
And the html looks like this
{% if search_results %}
{{ count }} results found.
{% for result in search_results %}
{% for k, v in result.items %}
{% if k == 'page' %}
{% for item in v %}
<p>
<h4>{{ item }}</h4>
Type: Article<br>
Author: {{ item.specific.owner.get_full_name }}<br>
Publish Date: {{ item.specific.last_published_at}}
</p>
{% endfor %}
{% elif k == 'docs' %}
{% for item in v %}
<p>
<h4>{{ item.title }}</h4>
Type: Document<br>
Publish Date: {{ item.created_at }}
</p>
{% endfor %}
{% elif k == 'image' %}
{% for item in v %}
<p>
<h4>{{ item.title }}</h4>
Type: Image<br>
Publish Date: {{ item.created_at }}
</p>
{% endfor %}
{% endif%}
{% endfor %}
{% endfor %}
{% if search_results.has_previous %}
Previous
{% endif %}
{% if search_results.has_next %}
Next
{% endif %}
{% elif search_query %}
No results found
{% endif %}

Answer 1

Django provides the url property to files and images, and wagtail has this also.
{{ item.url }}
Wagtail has a great support for the redirect to files and integrates django-sendfile as well. Both of these methods allow for image downloading.
https://docs.wagtail.io/en/stable/advanced_topics/images/image_serve_view.html
from wagtail.images.views.serve import ServeView
urlpatterns = [
...
re_path(r'^images/([^/]*)/(\d*)/([^/]*)/[^/]*$', ServeView.as_view(action='redirect'), name='wagtailimages_serve'),
]
** Edit below
Generating the image “as foo” to access individual properties - access the underlying image instance
{% image item original as item_img %}
{{ item_img.url }}