GridLayout not not containing generated cards in for loop - html

I want to make a gridlayout of cards in html that stores a bunch of cards generated using information I pull from a database. project_photo is an array of image file paths that are referred to generate the cards within the for loop. However, when I run it the gridlayout (named card-grid) only contains the first card that is generated from the for loop. Is there any way to make it so that it contains all the cards generated from the for loop?
<div class="card-grid">
{% for project in context %}
{% with 'jweb/images/'|add:project.image as project_photo %}
<div class="card">
<h2 class="card-header" style="text-align:center">{{project.title}}
<div class="card-image">
<img src="{% static project_photo %}" style="float:left">
</div>
</h2>
</div>
</div>
</div>
{% endwith %}
{% endfor %}

Related

Using CSS Grid on a Django Template

I have a div container in my HTML which displays a list of 10 parsed headlines from The Toronto Star. I want to be able to display them in a repeating grid that looks like this:
Here's the django template that I have :
<div id="container">
<div class="containers">
{% for n, i in toronto %}
<center><img src="{{i}}"></center>
<h3>{{n}}</h3>
{% endfor %}
</div>
To clarify, I am asking for someone who is experienced with CSS Grids and django to help me with the appropiate css code similar to the picture i referenced above. The css grid needs to be repeating as well as the django template contains 10 indexes in its list
Try
<div id="container">
{% for n, i in toronto %}
<div class="containers">
<center><img src="{{i}}"></center>
<h3>{{n}}</h3>
</div>
{% endfor %}
</div>
The class has to be parsed too

Adjustable Forloop Range - HTML

I have an html file in my django templates that contains a forloop. I need to to have a range on the forloop that basically says the forloop will only loop through the first 10 attributes. The complication arrises when I need the range to be adujstable. I need something like a number input that keeps a varaible and then only loops through that many attributes in the forloop. I have been on it for a few days and havent made too much progress. I have worked with simple forloop ranges but havent found a way to make them adjustable. This is the forloop I have been working with.
{% for post in filter.qs %}
{% if post.image %}
<img class="pdf_field_img" src="{{ post.image.url }}"/>
{% else %}
{% endif %}
<div class="title">Morgan Hall</div> <div class="inspection_num">Inspection #</div> <div
class="inspect_num">{{ post.count_building }}</div>
{% endfor %}

How to add an image to a jinja html page

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.

Django html set up

I have a basic website set up with Django and have been following the sentdex tutorials. I cannot figure out how to include the blog posts (I'm assuming this would be either blog.html or post.html) in the bootstrap 'about' section, which I Have renamed blog. Basically, I want the blog posts (derived from the database) to appear here in the 'about' section in bootstrap, rather than at the bottom or in a separate page.
I have an 'aboutme' app (main website) that contains the home.html
{%extends "aboutme/header.html" %}
{%block content%}
<p>Welcome to this "about" page that is all about the website:
{%include "aboutme/includes/mysnippet.html"%}
{% endblock %}
{%block blogcontent%}
{% endblock %}
..and a header.html which contains the whole index.html of the bootstrap site itself. Below is the about section of the bootstrap websit about/blog section that includes the django templating logic (block content)
<!-- About Section (Blog)-->
<section class="bg-primary text-white mb-0" id="about">
<div class="container">
<h2 class="text-center text-uppercase text-white">Blog</h2>
<hr class="star-light mb-5">
<div class="row">
<div class="col-lg-4 ml-auto">
<p class="lead">This is the blog section</p>
{%block blogcontent%}
{%endblock %}
</div>
<div class="col-lg-4 mr-auto">
<p class="lead">The blogs outlined in the models section and stored in the database, are going to be displayed here.</p>
</div>
</div>
<div class="text-center mt-4">
<a class="btn btn-xl btn-outline-light" href="#">
<i class="fa fa-download mr-2"></i>
Download Now!
</a>
</div>
</div>
</section>
Finally, I have another app called 'blog', and inside the templates/blog directory for that app:
post.html and blog.html
blog.html
{% extends "aboutme/header.html" %}
{%block content %}
{% for post in object_list %}
<h5>{{post.date|date:"Y-m-d"}}{{post.title}}</h5>
{% endfor %}
{% endblock %}
post.html
{% extends "aboutme/header.html" %}
{%block content %}
<h3>{{post.title}}</h3>
<h6>on{{post.date}}</h6>
{{post.body|safe|linebreaks}}
{% endblock %}
at the moment when I type http://127.0.0.1:8000/blog ...the blog posts appear at the bottom of the page, or wherever I place the {%block content %}{% endblock %} (but it only seems to work at the bottom of the page).
How do I get the blog posts to appear in the 'about me' section of the bootstrap website?
I'd also love an explanation on what exactly the home.html page does and can it be named anything or does it have to be 'home'. Is there where everything is defined in terms of what is displayed, and how does it work?
Edit/Design your codes like that:
Html stuff for index or aboutme/header.html
// codes here
{% block blogcontent %}
{% include 'path/blog.html' %}
{% enblock %}
// codes here
{% block postcontent %}
{% include 'path/post.html' %}
{% enblock %}
<!-- end -->
when you call 127.0.0.1:8000, everything will be available there.
and for other links, if you don't want to display the blog or post block,
just use {% block blogcontent %}{% endblock %} {% block postcontent %}{% endblock %} whitout anything inside

Jekyll include new sections on a post layout dynamically?

I've just created a portfolio collection in Jekyll and I've managed to include extra html sections on my single-project.html layout with a simple Liquid syntax.
Those extra html sections came to the rescue so that a single project's page contents would not explicit have to reside within a unique container/wrapper defined for the {{ content }} variable.
So (visually speaking) I can put any html stuff within a <section></section> and style it accordingly in a way the single-project.html layout can be enriched with fullwidth container/elements and so on. However, I'm stuck with the possibility of injecting fullwidth contents only above and bellow the {{ content }} variable.
Would there be a workaround to achieve a dynamic layout structure to include sections on a page in Jekyll?
In a project.md document
For each single project I want to have extra html sections, I define in the document's front-matter the names of the html files I'd {% include %} in a single-project.html layout.
---
### Project Details
layout: project
title: Cards Mockup project
# Project Extra Sections
sections_top:
sections: ['section-intro.html', 'section-services-provided.html']
#
sections_bottom:
sections: ['section-fullwidth-figure.html']
---
In the single-project.html layout
I conditionally include the html sections provided earlier on each document's front-matter like bellow:
<div class="main-container">
{% if page.sections_top %}
<div class="container-fluid no-pad">
{% assign sections_top = page.sections_top['sections'] %}
{% for section in sections_top %}
{% include {{ section }} %}
{% endfor %}
</div>
{% endif %}
<!-- Section main content -->
<section class="article-body">
<div class="container">
<div class="row">
<div class="col-sm-12">
{{ content }}
</div>
</div>
</div><!-- end .container -->
</section><!-- end section main content -->
{% if page.sections_bottom %}
<div class="container-fluid no-pad">
{% assign sections_bottom = page.sections_bottom['sections'] %}
{% for section in sections_bottom %}
{% include {{ section }} %}
{% endfor %}
</div>
{% endif %}
</div><!-- end .main-container -->
Here's a screenshot: https://cloudup.com/cK-_jbTdTqU (everything in between the fullwidth images is the {{ content }}, the fullwidth images are html sections.
I guess you want something like this: https://github.com/y7kim/agency-jekyll-theme/blob/gh-pages/_layouts/default.html
You can just replace one of the includes with your {{ content }} tag.
If you (really) want the content editor to be able to select the sections and their order, you have to create a YAML array with the section names on top of your .md file and loop through them.