display all images in folder using jinja2 - html

I sit possible to render a template by providing a folder path and let jinja2 find all the images in that folder and include them as images? Something like
{% for image in find_all_files_in_path(path) %}
<img src="{{ image }}">
{% endfor %}

It is not possible. Jinja2 only render the context you pass into the templates through variables. So you should send to the template a list with the image urls for jinja to be able to render your images. And then you can loop over this sequence;
{% for image_url in image_urls %}
<img src="{{ image }}">
{% endfor %}
Commonly you use jinja with an web framework (like django, flask, etc) which gives you the possibility to access objects in the templates.

Related

Show excel file in django template

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.

django inlinecss not loading css file correctly

I'm using django-inlinecss to style emails.
Here's a snippet of my email template:
{% extends "base/email.html" %}
{% block content %}
{% load inlinecss %}
{% inlinecss "base/css/email.css" %}
<p class="c-c-test">test</p>
{% endinlinecss %}
{% endblock %}
When rendering the template, an error occurs saying:
No such file or directory: '/usr/src/project/static/base/css/email.css'
Although, trying to use the same css file path (i.e. "base/css/email.css") with static template tag works fine.
What am I doing wrong here?
EDIT:
I'm using docker, django-inlinecss seems to load the css file from local storage (i.e. from docker image) where there's no such file. The actual file is located on my machine. Is there a workaround to solve this issue? something like how static template tag work?

How to I add particle.js asset source libary correctly in Jekyll using CDN link

How do I correctly add javascript source assets in Jekyll?
I have tried to add the source link inside _includes\head.html below
which I feel that its not a good convention.
<link rel="stylesheet" href="{{ "/assets/css/main.css" | prepend: site.baseurl }}">
{% include head/meta.html %}
{% include head/links.html %}
{% include head/scripts.html %}
{% include head/styles.html %}
{% include my-head.html %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.1.0/particles.min.js"></script>
Here is how the folder tree structure looks like. I am aware that I
have multiple places for my assets `js` and `css` , which I will organize later.
Your question is not very clear, but I would say that you are loading the particles library after you are referencing it. So your browser console should have some errors which you did not mention...
You should include particles js before your scripts.
{% include head/meta.html %}
{% include head/links.html %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.1.0/particles.min.js"></script>
{% include head/scripts.html %}
{% include head/styles.html %}
{% include my-head.html %}
or even better way is to just add it to your head/scripts.html so that you have all the script imports in one place, but even there you should watch on the order of importing. If some script has dependancy, it dependency should be imported before it.

GRAV custom fields / html blocks / custom theme templates

I'm trying to build a static website using the GRAV CMS. So far, I've been creating *.html.twig files and associating a single page to the individual template.
This is how my pages look:
{% block header%}
{% include 'partials/bhss-default-header.html.twig' %}
{% endblock %}
#CONTENT
{% block footer%}
{% include 'partials/bhss-default-footer.html.twig' %}
{% endblock %}
However, my purpose is to have an editor creating pages from the admin interface and adding HTML blocks similar to the custom fields or shortcodes in WordPress. I want this blocks to be filled with text.
I need to mention that my website is built with Semantic-UI, so I'm not using any theme provided by GRAV.
How can I replicate this behavior and what choices do I have ? The website is small at this time, so I can remake every page.
Thank you!
If you want to use editor, you need to build your header and footer as Grav pages in Markdown, not Grav theme's template file in Twig. Example:
{% block header%}
{{ pages.find('/my-header').content }}
{% endblock %}
#CONTENT
{% block footer%}
{{ pages.find('/my-footer').content }}
{% endblock %}
my-header and my-footer are 2 pages. You can unpublish these pages to hide them from your menu and forbid direct access to them.

Image not fetched correctly from the specified path - Django Template

I need to pass the value of a variable and add it to the image source so I can fetch my images in the template as shown.
<div id="Layer7">
{% if imgs %}
{% for i in imgs %}
<img src="{% static "images\uploads\i"%}"">
{% endfor %}
{% else %}
{% endif %}
</div>
Variable imgs contains a list of images names so I need to attach it to the url shown in the img src in order to fetch the image. When the above code is excuted I get a broken image link with the the following url/static/images/uploads/i which is false.
Any help with this issue?
You really don't need to build manually the url for uploaded images, what you need to do is to setuo property MEDIA_ROOT and MEDIA_URL
I assuming you have MEDIA_ROOT pointing to 'static/uploads', and STATIC_URL is '/static/', so then your MEDIA_URL must be '/static/uploads/'
After that with as simple {{ img.url }} you'll gett the full path to the file (without adding nothing before).