I want to download an image file from HTML inside my Django app this is my code in the template.
{% for pic in pics %}
<a href="{{ pic.image.url }}" download>
<img src="{{ pic.image.url }}">
</a>
{% endfor %}
The images are rendered and everything else is working fine. When I click on the image, it opens in fullscreen instead of downloading. I am using chrome. What am I doing Wrong?
Related
I know that it has to do womething with category.twig which is in /catalog/view/theme/YOURTHEME/template/product/category.twig
I tried to do whatever instructions I found in forums.
I tried this and I tried that
I tried to refresh Cache.
I need more help. What I am doing wrong? Or maybe these instructions that I tried are wrong?
Seems like you are doing everything right. Make sure that in /catalog/view/theme/YOURTHEME/template/product/category.twig YOURTHEME is actually your current theme. From the tutorial for thumb and description take this code
{% if thumb or description %}
<div class="row"> {% if thumb %}
<div class="col-sm-2"><img src="{{ thumb }}" alt="{{ heading_title }}" title="{{ heading_title }}" class="img-thumbnail" /></div>
{% endif %}
{% if description %}
<div class="col-sm-10">{{ description }}</div>
{% endif %}
</div>
<hr>
{% endif %}
Or only for description take
{% if description %}
<div class="col-sm-10">{{ description }}</div>
{% endif %}
And replace it anywhere in this template file (almost everywhere actually).
The most important is to clear twig cache. On howto do that i have described the process in the other article earlier, please read
https://stackoverflow.com/a/61524855/3187127
After that - click Ctrl F5 if you are using Chrome or Firefox (or other combination in your browser which reloads page with cache cleaning) while you are on a category page.
In my django application I am showing the uploaded files like this:
{% extends 'base.html' %}
{% block content %}
{% for i in images %}
<embed src="{{ i.document.url }}" width="1600"
height="700"
type="application/pdf"/>
<a href="{% url 'employee:delete_product_file' pk=pk %}" class="btn btn-outline-secondary" role="button" >Delete</a>
{% endfor %}
{% endblock %}
Views.py
def view_product(request,pk):
print("function called with pk ",pk)
images = Uploaded_products.objects.filter(products_connected = pk)
print("images ",images)
return render(request, "packsapp/employee/productspdf.html", {'images': images, 'pk': pk})
It's working fine when I upload a PDF file but when there is any other format like .docx or any excel file it juts simply downloads the file.
How do I show all the file types in the django template?
I am assuming it has something to do with the type="application/pdf
Not exactly what you're asking, but another approach is to publish your files to google drive and then embed them.
I have wrapped my <img> in the anchor tag but it isn't acting like a link. However the <p> is acting as a link. How do I get it so that I do not need the <p> tag to be there and the image to still work as the same link?
There is currently no cursor change on hovering over the image
<div class="container">
{% for item in page.client_images.all %} {% image item.image fill-150x150-c100 %}
<a href="{{ item.caption }}" style="display:block;">
<img src="{{ img.url }}" class="item" alt="{{ img.alt }}">
<p>{{ item.caption }}</p>
</a>
{% endfor %}
</div>
The best way to debug this is to check the generated HTML in your browser's developer tools. If you do this, you'll find that the order of tags is not what you expect...
This is because the template tag
{% image item.image fill-150x150-c100 %}
should be:
{% image item.image fill-150x150-c100 as img %}
If you leave out the as img, the tag will immediately output the <img> element, and since this is happening outside of the <a>, it will not be part of the link. Meanwhile, the <img> in your template code is a broken image, because it refers to the variable img, which isn't defined.
I have the image in: src/WebBundle/img/img2.jpg
Im trying this but don´t works:
<img src="{{ asset('WebBundle/img/img2.jpg') }}" />
Image of routes
Thank you for the patience
Better to user assets.
{% image '#AppBundle/Resources/public/images/example.jpg' %}
<img src="{{ asset_url }}" alt="Example" />
{% endimage %}
In your case just change image url to avoid any url problem.
I wrote my posts and added <!-- more --> to where I want to stop the content from showing. After this, octopress shows a "read on" link, I want this not to show. I think this snippet (inside _includes/article.html file) is the key:
{% if excerpted == 'true' %}
<footer>
<a rel="full-article" href="{{ root_url }}{{ post.url }}">{{ site.excerpt_link }}</a>
</footer>
{% endif %}
I tried to delete this snippet and the link still shows. Tried to delete excerpt_link from `_config.ylm' and the html is still generated for the link.
This is the way to do it. Be sure to do it in sources/_includes/article.html and not within .themes/themeName.