I currently have a template that loops through a list of URLS, like so.
{% for i in images %}
<div class="col">
<p><img height="200" src="{{i}}"/></p>
<p>{{i|cut:"/uploads/"|truncatechars:20}}</p>
</div>
{% endfor %}
The issue is at the time of rendering some of the images are not done processing. So how would I check if the image is available via the url?
You'd have to make a custom tag or filter that evaluated the availability and sanity of the data. Perhaps using requests & pillow's .verify().
For a static "solution" you can provide a CSS fallback to your HTML img.
Related
I would like to embed a pptx that is uploaded into a folder in OneDrive within a iframe tag in a Django template. I have the urls stored in a model and saved into the SQLite database. In this sense, in the views.py file, I have the following code:
context = {
'selectedunit': selectedunit,
'url_to_be_inserted': MyModel.objects.filter(unit=selectedunit)
}
return render(request, 'web.html', context)
The code for web.html is very easy:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<div class="container col-lg-8">
<div class="center">
<iframe class="center" src={{ url_to_be_inserted.url }} width="100%" height="300%" frameborder="0"/>
</div>
</div>
{% endblock %}
The result is the snapshot below:
While, I would like to embed the ppt into the web site. If I directly insert the URL, instead of using the context variable, it works. That is to say:
<iframe class="center" src="https://..." width="100%" height="300%" frameborder="0"/>
In this case, the result is as follows (ppt embedded into the Web site):
The reason why doing in this sense is because, depending on the selectedunit variable, I would like to address a different pptx with a different URL and I would like to dynamically change the pointer (as you see above by filtering the model).
How could I solve it?
Many thanks in advance
From the tailwind docs, to set the background image to an 'Arbitrary value':
<div class="bg-[url('/img/hero-pattern.svg')]">
<!-- ... -->
</div>
In my template, I am trying to loop through a list of Artist objects and build cards for each one. Artist objects all have a profile_picture attribute which is an ImageField:
{% for artist in artists %}
<div class="bg-[url('{{artist.profile_picture.url}}')]">
Link to Image <!-- put this here to make sure the url is correct and this does take me to the image -->
<h1>Some text</h1>
</div>
{% endfor %}
And this is not applying the background image. I can confirm the url is correct because I have inspected the page:
<div class="bg-[url('/media/images/artists/headshot.jpeg')]">
Link to Image
<h1>Some text</h1>
</div>
and visited http://127.0.0.1:8000/media/images/artists/headshot.jpeg where I do see the image. Does anyone know what's going on here? For now I'm just going to use <div style="background-image:url('{{artist.profile_picture.url}}')"> but I am curious as to why this isn't working.
Thanks for any help.
Edit: Using Tailwind version 3.0.24
Not sure what technical term it is I'm looking for, but I have a set of HTML elements that are repeated and wondering if there is an easy way to do this.
Very simplified HTML, if I have the following:
<div class='container'>
{{ django.dataFromORM }}
</div>
I need to add to base.html in a certain section
<div id='main-container'>
all elements go here
</div>
So on run, I want to add the generated HTML the main-container. I've done this before by building in JS, but wondering if there is a way to smoothly do this in Django?
I looked at templates and partials, but not sure that's the proper way or not?
You can use include in template to include your repeated html file.
ie
<div id='main-container'>
{% include "container.html" %}
</div>
if you want to repeat it several times you can add it inside a for loop
eg:
{% for element in elements %}
{% include "container.html" %}
{% endfor %}
I have three SurveyWizardViews all of which use the same standard wizard_form.html which is located at templates/formtools/wizard/wizard_form.html as per the documentation
I have added some basic logic to this template which is designed to detect which page of the form the user is on so that I can include a non standard page/step, this is an image with a JS slider bar underneath. This all works perfectly.
{% if wizard.steps.current == '6' %}
<img src="{% static "survey/images/pathtwo/" %}{{display_image}}"/>
<section>
<span class="tooltip"></span>
<div id="slider"></div>
<span class="volume"></span>
</section>
{% endif %}
However I now want to have a slightly different experience for the user depending on which View/URL they are coming from.
Question Is it possible to detect which URL the view is currently using to look at the page? e.g.
{% if URL.current == 'www.mywebsite.com/experiment/surveyone/' %}
do X
{% if URL.current == 'www.mywebsite.com/experiment/surveytwo/' %}
do y
I have done some searching but Im not even sure what I'm searching for to be honest. Any help would be much appreciated.
You can use the request context variable. Something like:
{% if 'experiment/surveyone' in request.path %}
do this
{% endif %}
I prefer using in instead of == to ignore trailing and leading slashes. If you want the whole thing try the build_absolute_uri method. Also check what options does request offer to you (https://docs.djangoproject.com/en/dev/ref/request-response/#httprequest-objects).
Finally, don't forget to add django.core.context_processors.request to your TEMPLATE_CONTEXT_PROCESSORS (I think it is added by default).
Let's say that someone has a link to an external image: www.externalsite.com/img/photo.jpg
Now, people can hotlink that image on my forum using [img] tags. A feature that is widely supported on almost every forum. Since hotlinking has some disadvantages I want to know how I can make a thumbnail of the image, based on the given url. Something Google does in Google images.
My website is powered by Django.
Use sorl.thumbnail
In your templates you would use
{% thumbnail "http://external.server/img/image.png" "200x200" "scale" as im %}
<img src="{{im.url}}" width="{{im.width}}" height="{{im.height}}">
{% endthumbnail %}
you can also load from any context varable
{% for image in post.images %}
{% thumbnail image.url "200x200" "scale" as im %}
<a href={{image.url}}>
<img src="{{im.url}}" width="{{im.width}}" height="{{im.height}}">
....