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.
Related
I am trying to make a little website with django when I ran into a problem:
I have a site where I want to look at a post in detail, but not every post has an image attribute - so I am getting an error when I try to display images, since some arent existent.
So the solution would be to check if an image is given, but... How do I do that?
I tried something like this but it did not work:
</div>
<p>{{ object.content }}</p>
{% if object.image.url == True %} <!-- In no case an image is displayed -->
<p>
<img src="{{ object.image.url }}">
</p>
{% endif %}
</div>
You should check the truthiness object.image attribute, not its URL, so:
{% if object.image %}
<p><img src="{{ object.image.url }}"></p>
{% endif %}
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.
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?
I am trying to add some keyword tags to an image gallery comprised of Bootstrap cards. Everything is working as expected, except that the anchor tag-wrapped elements are not clickable.
The problem seems similar to this: href link inside modal is not working and this: Anchor links in bootstrap don't work
But neither of the solutions in those cases seems to apply here. The problem seems to be with the "card-img-overlay" covering up the tags.
{% block page_content %}
<div class="container">
<legend>Gallery</legend>
<div class="row">
{% set current_page=gallery_items_page %}
{% for item in current_page.items %}
{% if item.published == True %}
<div class="col-4">
<div class="card mb-3">
<img style="width: 100%;" src="{{ url_for('images.static', filename=item.cover_picture[0].file_name) }}" class="img-fluid card-img" alt="responsive">
<div class="card-img-overlay">
<h1 style='font-family: "Miniver"' class="text-white">{{ item.title }}</h1>
</div>
<div class="card-header">
{% for kw in item.keywords %}
{# it's probably more efficient to use the PK, but more expressive to use the string... #}
{{ kw.keyword }}
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endblock %}
Using the inspect element tool on Firefox, it can be seen that the URL from the Jinja2 template works properly, and everything looks as intended, and the link itself works just fine, just it's not clickable. If I place the link outside of the the card div, it functions normally.
Here is a fiddle: https://jsfiddle.net/us4Lmqbp/
Your anchor tag is not clickable because it is under the div.card-img-overlay. So when you click, you are clicking on that div and not on the anchor tag. You can recognize this by right-clicking on the anchor tag in your browser and selecting "inspect". In the inspector window, the actual element clicked is selected.
To make the anchor tag clickable, you need to either:
Make the div "transparent" to clicking by giving it the style
pointer-events: none (read more here). jsFiddle
or
Move the anchor tag above the div by increasing its z-index (add the
style z-index: 20 and also add position: relative - z-index does
not work on statically-positioned elements, which is the default
browser style). jsFiddle
I'm just learning the basics of django and jinja. I've extended my header file and now I want to add an image to the page, but I don't know the jinja syntax for doing that. Please assist.
{% extends "media/header.html" %}
{% block content %}
This is where I would like to insert my image.
{% endblock %}
Just use html img tag for that. If you pass your image in context as variable;
{% extends "media/header.html" %}
{% block content %}
<img src="{{ variable }}" alt="image alt text" />
{% endblock %}
If you just have static path;
{% extends "media/header.html" %}
{% block content %}
<img src="{{ static('path/to/image.png') }}" alt="image alt text" />
{% endblock %}
May be this is too late to reply, but this is how I use for rendering images using jinja syntax. I have successfully rendered images on pdf from html.
<div class="img-div" style="background-image: url('{{ element.image }}');">
</div>
element.image could be a any resolvable url.