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
Related
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 %}
I am developing a web app and I'm using a navbar.html as layout in each page of my webapp with this code :
eachpage.html :
{% extends 'navbar.html' %}
{% block body %}
<div class="container">
<div class="titre_pages">
<h2>PAGE TITLE </h2>
</div>
</div>
Everything works fine and my pages seems responsive bu when I reduce the size of my browser my navbar and my titles are overlaping. Should I add something between my navbar/layout and my html code to avoid this ?
Here is my page with a normal browser size :
Here is my page when I reduce the size of my browser :
The answer to your problem is to use media queries to serve different css/design for different viewport sizes. If you use bootstrap or something and bootstrap grid often you can have responsiveness handled for you. Also see below for standard practice instead of extending a nav bar we would create a base.html that would contain the entire layout including navbar. With this method of assigning blocks and including files you can over you can then extend from base.html and only over ride the body block or sidebar block as necessary.
<!-- base.html -->
<!html>
<head>
</head>
<header>
{% block header %}
{% include 'navbar.html' %}
{% endblock %}
</header>
<body>
{% block body %}
{% include 'index.html' %}
{% endblock %}
</body>
</html>
I have the following code in an html page and am trying to use jinja logic to embed html somewhere specific (in the blog/about me section of the html)
Code that doesn't work (see specifics below)
<!-- 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 content%}
{%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>
It's these two lines that ordinarily produce an htmlsnippet output:
{%block content%}
{%endblock %}
In another place on the site (right at the bottom) I've used the same logic, and the snippet output has displayed fine.
Code that works fine
<!-- Custom scripts for this template -->
<script src="/static/js/freelancer.min.js"></script>
<div>
{%block content%}
{%endblock %}
</div>
</body>
</html>
The error I get is:
'block' tag with name 'content' appears more than once
141 <div class="col-lg-4 ml-auto">
142 <p class="lead">This is the blog section</p>
143 {%block content%}
144 {%endblock %}
145 </div>
146 <div class="col-lg-4 mr-auto">
147 <p class="lead">The blogs outlined in the models section and stored in the database, are going to be displayed here.</p>
148
149 </div>
150 <div>
151 {%block content%}
152 {%endblock %}
153 </div>
Of course, I note the error that says: 'block' tag with name 'content' appears more than once ...but my question is
Noting that I know how to fix the error (use the content just once), What is then the best way to include an html snippet, and more importantly, an html snippet that say, has posts, which are generated from the database? Is Jinja logic as shown below using block contents the only way, or is there a better way?
For instance, I have other html snippets in other apps in the same django project (e.g. in blog/templates/blog/post.html) ...this also extends the home page, but how do I include this in the home page? I don't quite understand the structure and how to reference things from different directories. Even if they have to be in the same directory, if you can only include one html snippet, how is it checking the folder it's referenced from?
Structure:
C:\Users\User\Desktop\Django Tutorials\understanding_html_setup\pythonsite\mysite\aboutme\templates
This is where the header.html and home.html live (header is where the main bootstrap index page has been put for now)
there is another folder here called 'includes' which has all the html snippets such as 'mysnippet.html'.
Important: ** it is THIS 'aboutme.html' that is being referenced in the jinja logic above.**
C:\Users\User\Desktop\Django Tutorials\understanding_html_setup\pythonsite\mysite\aboutme\templates\aboutme\includes\mysnippet.html
Other apps such as blog:
C:\Users\User\Desktop\Django Tutorials\understanding_html_setup\pythonsite\mysite\blog\templates\blog
is where I have
blog.html and post.html
How would I include the content of post.html or blog.html in the above shown snippet (main homepage)
Final note:
The home.html page includes this code, which I note points to the inclusion of the aboutme code snippet. But still the question remains, how do I include other snippets, and what is the best way to understand this structure and how things fit together. Tutorials or link references also welcome.
home.html (in: C:\Users\User\Desktop\Django Tutorials\understanding_html_setup\pythonsite\mysite\aboutme\templates\aboutme\home.html)
{%extends "aboutme/header.html" %}
{%block content%}
<p>Welcome to this "about" page that is all about the website: </p>
{%include "aboutme/includes/mysnippet.html"%}
{% endblock %}
I think any guidance on the optimal and simplest set up will be invaluable for SO Django beginners. Are there flow or diagrams that show clearly how things ought to be arranged from an html and display point of view?
UPDATE:
Based on the answer below, I changed the 'content' name to something else, and it does indeed allow other snippets to be included. Thank you!
I still don't know a) the best way to organise html pages and to include snippets and also how to include a page that is drawing from a database: e.g. posts:
I tried this - that seeks to include post.html but it doesn't work - it instead just messes up the formatting and repeats the blog section elsewhere on the bootstrap page.
{%extends "aboutme/header.html" %}
{%block content%}
<p>Welcome to this "about" page that is all about the website:</p>
{%include "aboutme/includes/mysnippet.html"%}
{% endblock %}
{%block moose%}
<p>This is test text that says moose</p>
{%include "blog/post.html"%}
{% endblock %}
The 'moose' text does show up, but not the blogs/posts.
post.html (in the blog app) is:
{% extends "aboutme/header.html" %}
{%block content %}
<h3>{{post.title}}</h3>
<h6>on{{post.date}}</h6>
{{post.body|safe|linebreaks}}
{% endblock %}
I'm trying to create a jekyll page with all of my posts listed sequentially. The problem is that some posts use different layouts, which are then specified in the post frontmatter. I've disabled individual page output for the posts (actually a custom category), so the layouts are partials.
For example, say I have some red posts and green posts:
_posts/01_post1.md:
---
layout: redpost
---
Post 1 (red)
_posts/02_post2.md:
---
layout: greenpost
---
Post 2 (green)
I want these to get processed using the correct layout. I also would prefer to use inheritance, which I think precludes the use of {%include%}.
_layouts/post.html:
<article class="post">
{{ content }}
</article>
_layouts/redpost.html:
---
layout: post
---
<div style="color:red">
{{ content }}
</div>
Then in my top-level page I want to loop over all the posts, render them using the appropriate template, and concatenate the result. Obviously no RENDER filter exists, although perhaps I was just unable to find it's name in the documentation.
_layouts/index.html:
<html>
...
{% for post in site.posts %}
{{ post | RENDER }}
{% endfor %}
</html>
The desired final HTML would then look like:
<html>
<article class="post">
<div style="color:red">
<p>Post 1 (red)</p>
</div>
</article>
<article class="post">
<div style="color:green">
<p>Post 2 (green)</p>
</div>
</article>
</html>
Is this possible without plugins?
The solution was trivial, which is why it isn't mentioned in the documentation. A document object gets rendered with the correct template just by being printed directly:
{% for post in site.posts %}
{{ post }}
{% endfor %}
What is wrong with the following? Seems like a solution to me.
_layouts/index.html:
<html>
...
{% for post in site.posts %}
{% include post.html %}
{% endfor %}
</html>
_includes/post.html:
<article class="post">
{% if post.layout == 'greenpost' %}
{% include greenpost.html %}
{% endif %}
</article>
_includes/greenpost.html:
<div style="color:green">
{{ post.content }}
</div>
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.