I have model class with fields current_value and previous_value.
And then, in template used by listview, inside loop i have code like this:
{% if data.current_value < data.previous_value %}
<img src="{% static 'app1/negative.png' %}" width="40" height="40">
<h1>Price down</h1>
{% elif data.current_value > data.previous_value %}
<img src="{% static 'app1/positive.png' %}" width="40" height="40">
<h1>Price up</h1>
{% else %}
<img src="{% static 'app1/neutral.png' %}" width="40" height="40">
<h1>Price the same</h1>
{% endif %}
H1 text is displayed correctly, image is not. More specific - image for 'else' condition i believe is always ok, but for 'if' and 'elif' is displaying the same picture (one of them).
Confusing and infuriating. What am i doing wrong?
If the h1 text is displaying correctly for all branches of this template, but some of the images are the same then the most likely problem is that the image files are the same image, but with different filenames.
Related
I'm trying to link some pictures to my Django app from the static folder, but instead it creates a new static folder inside the templates directory.
My HTML:
{% load static %}
<!DOCTYPE html>
{% extends 'milk_app/base.html' %}
{% load staticfiles %}
{% block title_block %}
Homepage
{% endblock %}
{% block body_block %}
<!-- Home page for Hosts -->
{% if user.userprofile.account == "Host" %}
<div class="container">
<div class="row">
<div class="home_hover_pictures col-4">
<img class="img-responsive" src="{% static 'images/listing-property.jpg' %}">
<h4>Create a new listing</h4>
</div>
<div class="home_hover_pictures col-4">
<img class="img-responsive" src="{% static 'images/your-properties.jpg' %}">
<h4>Show your rented properties</h4>
</div>
<div class="home_hover_pictures col-4">
<img class="img-responsive" src="{% static 'images/scroll-others.jpg' %}">
<h4>Scroll other properties</h4>
</div>
</div>
</div>
<!-- Home page for Tenants (not the beer) -->
{% elif user.userprofile.account == 'Tenant' %}
<!-- Home page for not logged users -->
{% else %}
<br><br>
<section >
<div>
</div>
</section>
{% endif %}
{% endblock %}
My folder looks like this:
1. APP_APP
2. ACTUALAPP
3. STATIC
* images
- the actual images.jpgs
4. TEMPLATES
* creating a new **{% static 'images** folder
- creating a new image here
So my VS Code is creating a new file somewhere I don't want to create it with also creating a new .jpg file which does not make sense. Why does it to that?
As it says in the docs, you can define a list of directories (STATICFILES_DIRS) in your settings if you assets aren’t tied to a particular app
STATICFILES_DIRS = [
BASE_DIR / "static"
]
I am positioning multiple images (one below other) on the top of a single image .
The number of images to be placed on the top is coming from back-end, so css that I applied to position one image on other is working only for one image and not for other images.
How to do so? Since I am getting only one image at the top . Basically three foreground images need to position vertically on one backgroundimage.
<div class="row">
{% for a in count %}
<div class="column">
<img src="{{ url_for('static', filename='building.jpg') }}" id="backgroundimage" title="Total Floors: 3
Total Rooms: 6" />
<p>{{ a }}</p>
{% for b in rows%}
<img src="{{ url_for('static', filename='building.jpg') }}" id="foregroundimage" title="Total Floors: 3
Total Rooms: 6" />
{% endfor %}
</div>
{% endfor %}
If I understood what you are trying to do, I would play with the CSS z-index value,
with the help of Jinja2 loop.index function.
So try this:
<div class="row">
{% for a in count %}
<div class="column">
<img src="{{ url_for('static', filename='building.jpg') }}" id="backgroundimage" title="Total Floors: 3
Total Rooms: 6" />
<p>{{ a }}</p>
{% for b in rows%}
<img style="z-index: -{{loop.index}};" src="{{ url_for('static', filename='building.jpg') }}" id="foregroundimage" title="Total Floors: 3
Total Rooms: 6" />
{% endfor %}
</div>
{% endfor %}
Worth to note.
loop.index
The current iteration of the loop. (1 indexed)
loop.index0
The current iteration of the loop. (0 indexed)
CSS z-index Property
Jinja2 For Variables
I am looking to show a custom field (using the app Shopify Custom Fields) to show another image other than the collection image (we cannot use the collection image for reasons that are too long to write about). Right now using the custom field which is a text field (which we have as an absolute URL to the image we want to use) here:
<img src="{{ collection.metafields.custom_fields["collection_list_image_url"] }}" alt="{{ link.title }}"/>
To get the Collection image like normal, which does work I used:
<img src="{{ link.object.image.src | collection_img_url: 'master' }}" alt="{{ link.title }}"/>
For some reason the image is not showing up and after inspection it says img src is unknown. It does work if we use the normal collection image though. Is there something I need to add to get this custom field to show up dynamically for each collection in the menu nav (link list)?
I have the following code written:
<div class="collection-list">
{% for link in linklists.collection-list.links %}
<div class="box">
<a href="{{ link.url }}">
<img src="{{ collection.metafields.custom_fields["collection_list_image_url"] }}" alt="{{ link.title }}"/>
<div class="heading">
<h2>{{ link.title }}</h2>
<button type="button" class="btn btn-dark">shop now</button>
</div>
</a>
</div>
{% endfor %}
</div>
You need to reference link.object (and maybe account for the fact that it might not be a Collection). Nesting single quotes within the double quotes when you reference the metafield key is also better syntax:
<div class="collection-list">
{% for link in linklists.collection-list.links %}
{% if link.object == 'collection' %}
{% assign cf = link.object.metafields.custom_fields %}
<div class="box">
<a href="{{ link.url }}">
<img src="{{ cf['collection_list_image_url'] }}" alt="{{ link.title }}">
<div class="heading">
<h2>{{ link.title }}</h2>
<button type="button" class="btn btn-dark">shop now</button>
</div>
</a>
</div>
{% endif %}
{% endfor %}
</div>
Here is my unfinished site that I have made with pelican using the pelican-bootstrap3 template: http://snoek.ddns.net/~oliver/mysite/
In the pelican-bootstrap3 README, it says can use the AVATAR variable in the pelicanconf.py file to point to an image. I've done this but now the picture of me is on every page, which is a little ridiculous. I would like it only on my "About" page.
In pelican-themes/pelican-bootstrap3/templates/includes I found an aboutme.html file with the following in it:
<div id="aboutme">
{% if AVATAR %}
<p>
<img width="100%" class="img-thumbnail" src="{{ SITEURL }}/{{ AVATAR }}"/>
</p>
{% endif %}
{% if ABOUT_ME %}
<p>
<strong>{{ _('About') }} {{ AUTHOR }}</strong><br/>
{{ ABOUT_ME }}
</p>
{% endif %}
</div>
Maybe it is this file that could be edited to specify that the avatar should only show on the "About" page? But I'm not sure how.
Change
{% if AVATAR %}
To
{% if page and page.title == 'About' and (ABOUT_ME or AVATAR) %}
I have prepared the following template:
<a href="{{ articolo.get_absolute_url }}" title="{{ articolo.nome }}">
{# se c'è un'immagine o più le carico... #}
{% if articolo.immagine_set.all|length > 0 %}
{% thumbnail articolo.immagine_set.first.image "300x300" as im %}
<img
src="{% static "img/trans-214x300.gif" %}"
alt="{{ articolo.nome }}"
data-original="{{ im.url }}"
data-w="{{ im.width }}"
data-h="{{ im.height }}"
data-src="{{ im.url }}"
class="lazy{% if lazyOwl %}Owl{% endif %}"
/>
{% endthumbnail %}
{# ...altrimenti carico quella di default #}
{% else %}
<img src="//placehold.it/215x300" alt="{{ articolo.nome }}">
{% endif %}
</a>
and I have installed sorl-thumbnail with django 1.6.5 and memcached
when reloading the page in a different browser, I get two different results, and then SORL does not retrieve the image from the cache.
<img
src="http://corestatic.fioretechnology.com/public/static/img/trans-214x300.gif"
alt="SCARPA BAMBINA PUMA"
data-original="http://corestatic.fioretechnology.com/public/media/cache/66/ab/66ab7d511792f550a4f5c239ec5e9118_137.jpg"
data-w="214"
data-h="300"
data-src="http://corestatic.fioretechnology.com/public/media/cache/66/ab/66ab7d511792f550a4f5c239ec5e9118_137.jpg"
class="lazy"
/>
and:
<img
src="http://corestatic.fioretechnology.com/public/static/img/trans-214x300.gif"
alt="SCARPA BAMBINA PUMA"
data-original="http://corestatic.fioretechnology.com/public/media/cache/66/ab/66ab7d511792f550a4f5c239ec5e9118_136.jpg"
data-w="214"
data-h="300"
data-src="http://corestatic.fioretechnology.com/public/media/cache/66/ab/66ab7d511792f550a4f5c239ec5e9118_136.jpg"
class="lazy"
/>
should not generate the same thumb?
how can I make him generate the same image?
thanks
also with this change:
<img
src="{% static "img/trans-214x300.gif" %}"
alt="{{ articolo.nome }}"
data-original="{% thumbnail articolo.immagine_set.first.image "300x300" %}"
data-hover="{% thumbnail articolo.immagine_set.all.1.image "300x300" %}"
data-src="{% thumbnail articolo.immagine_set.first.image "300x300" %}"
class="lazy{% if lazyOwl %}Owl{% endif %} flip"
/>
<img
src="http://corestatic.fioretechnology.com/public/static/img/trans-214x300.gif"
alt="SCARPA BAMBINA PUMA"
data-original="http://corestatic.fioretechnology.com/public/media/cache/66/ab/66ab7d511792f550a4f5c239ec5e9118_141.jpg"
data-hover="http://corestatic.fioretechnology.com/public/media/cache/79/5b/795beef484ada8d8db9db02dd0e4f0b7_133.jpg"
data-src="http://corestatic.fioretechnology.com/public/media/cache/66/ab/66ab7d511792f550a4f5c239ec5e9118_142.jpg"
class="lazy flip"
/>
I just had the same or a at least a similar issue while playing around with sorl-thumbnail for the first time. Everytime i reloaded the page in the same browser or in another it resulted in regenerating the thumbnails.
This was caused due to Debugging still being enabled.
TEMPLATE_DEBUG = True
and results in filename /media/cache/7c/06/7c06aadd8e75768c4f92a76d6a6cc4a7_FRN3HDc.jpg
After disabling it the random part in the filename after the underscore disappears and the file is loaded from the cache.
TEMPLATE_DEBUG = False
from now on the filename is /media/cache/7c/06/7c06aadd8e75768c4f92a76d6a6cc4a7.jpg
Maybe this helps..