New to Jekyll. I'm putting together a list view of post categories(review).. The loop works fine, spits out the image, post etc.. but when I try to add the link {{ p.url }} it does not work.. Suggestions?
{% for reviews in site.categories.review %}
<tr>
<th>{{reviews.title}}</th>
<th></th>
</tr>
<td style="width: 33%;"><img style="width: 200px;" src="{{ site.baseurl }}/images/posts/{{reviews.banner_image}}"></td>
<td><strong>{{reviews.category}}</strong>
<ul>
<li>Key Point #1</li>
<li>Key Point #1</li>
<li>Key Point #1</li>
<li>Key Point #1</li>
<li>{{ reviews.tags }}</li>
</ul>
<div class="clear"><input type="submit" value="Learn More..." name="Learn More..." class="button"></div>
</td>
{% endfor %}
</table>
Try to use {{ reviews.url }}.
Instead of : {{ post_url }}
David Recommended: {{ reviews.url }}
It worked.
Related
Attached is the wagtail template I have written so far.
{% load wagtailimages_tags %}
<section class="container">
<h2 class="text-center">{{ self.title }}</h2>
<div class="general-alumnae-deck">
{% for member in self.general_member_cards %}
{% if member.photo %}
{% endif %}
{% endfor %}
</div>
</section>
Ultimately I want the code to look like:
<h2>Avatar Images</h2>
<ul>
<li><img src="img_avatar.png" alt="Avatar" class="avatar"> <h3> Bleu </h3></li>
<li><img src="img_avatar2.png" alt="Avatar" class="avatar"> <h3> Red </h3></li>
</ul>
</body>
</html>
with the image popping up next to the "h3" tag if there exists a photo of course the image will be {{}} double bracketed for dynamic template.
It's not clear whether the image is from Wagtail's image library, but if it is, you should use the {% image %} tag. See https://docs.wagtail.org/en/stable/topics/images.html#
{% with self.general_member_cards as cards %}
{% if cards %}
<ul>
{% for member in cards %}
<li>
{% if member.photo %}
{% image member.photo fill-80x80 %}
{% endif %}
<h3>{{ member.name }}</h3>
</li>
{% endfor %}
<ul>
{% endif %}
I have also used a {% with %} tag to cache self.general_member_cards in the template, in case this requires a database query. If it does not, you can skip that step.
You more or less have it already ...
<section class="container">
<h2 class="text-center">{{ self.title }}</h2>
<div class="general-alumnae-deck">
<ul>
{% for member in self.general_member_cards %}
<li>
{% if member.photo %}
{% image member.photo fill-50x50 as avatar %}
<img src="{{ avatar.url }} class='avatar">
{% endif %}
<h3 style="display:inline;">{{ member.name }}</h3>
</li>
{% endfor %}
</ul>
</div>
</section>
You said you wanted image next to the <h3>, so you need to override the display:block property of the h3 tag and make it inline as above (or create a css class for this).
EDIT: Updated to use wagtail's image template tag to get the rendition of the member photo
I am working on a simple web-application with flask and am currently trying to dynamically create a scrollspy list group with jinja. In the code snippet the variable "choices" represents a list of lists of dictionaries. So the variable dict will be a list of dictionaries that populates the ids needed for the list group to work. For simplicity, I am testing it with choices containing only one list of dictionaries and loop.index to create the ids, but I was going to change that to uniquly generated ids later as choices will have more elements.
Unfortunately, the list group does not work properly. Any ideas as to what I'm doing wrong? The browser console throws me an error, "uncaught TypeError: i is null", relating to the bootstrap scrollspy.js. I was not able to trace it back and figure out what causes the error.
{% extends "layout.html" %}
{% block title %}
Results
{% endblock %}
{% block main %}
<!--course display-->
{% for i in choices %}
<div class= "container-fluid">
<div class="row justify-content-center">
<div class="col-9 heading">
<div>
<h1>Coursera Courses</h1>
</div>
</div>
</div>
<div class="row justify-content-center result-background">
<div id="list-example" class="col-2 list-group">
{% for dict in i%}
<a class="list-group-item list-group-item-dark list-group-item-action" href="#list-item-{{ loop.index }}">{{ dict["Course Name"] }}</a>
{% endfor %}
</div>
<div class="col-7">
<div class="scrollspy-example" data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="40" tabindex="0">
{% for dict in i %}
<div class="boxlayout" id="#list-item-{{ loop.index }}">
<img src="{{ dict["Image URL"] }}" alt="responsive webite" class="img-thumbnail" align="left" width="15%" height="15%">
<h2>{{ dict["Course Name"] }}</h2>
<details close>
<summary>Lorem ipsum</summary>
Lorem ipsum
</details>
</br>
<table>
<tr>
<td>Manufacturer</td><td> </td>
<tr>
<td>Certificate</td><td>{{ dict["Certificate"] }}</td>
</tr>
<tr>
<td>Costs</td><td>${{ dict["Current Price"] }}</td>
</tr>
<tr>
<td>Landing Page</td>
</tr>
</table>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endfor %}
{% endblock %}
The CSS I use as per the Bootstrap requirements:
.scrollspy-example{
position: relative;
overflow-y: scroll;
height: 300px;
}
I tried some of the answers posted on this forum but cannot find one fitting for me,
I realise this is an age old question sorry.
Im trying to get a vertical line like in this design:
The problem i'm facing is that this is in a table and I cannot figure out how to get them to cros like this.
Its about the element td with 'scores' id
Twig file
{% extends 'base.html.twig' %}
{% block body %}
<div class="table-responsive">
{% for group in duel_groups %}
{% if group is not empty %}
<table class="table table-bordered table-light" style="margin-top: 30px;">
<thead>
<tr>
<th>Omloop</th>
<th>Partuur 1</th>
<th>Scores</th>
<th>Partuur 2</th>
{# <th>Spelers</th>#}
</tr>
</thead>
<tbody class="text-center">
{% for duel in group %}
<tr>
<td>{{ duel.omloopNummer }}</td>
<td id="team1">{{ duel.team1 }}</td>
<td id="scores">
{{ duel.eerstenP1 }} {{ duel.eerstenP2 }}<br>
<hr>
{{ duel.puntenP1 }} {{ duel.puntenP2 }}
</td>
<td id="team2">{{ duel.team2 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
{% endfor %}
</div>
{% endblock %}
I have tried creating a div of 1px but that didn't work.
I tried a couple of solutions from this question How to make a vertical line in HTML
None seem to fit my use case tho.
Poking around some more came up with this:
<td id="scores" style="background: linear-gradient(#bcbcbd, #bcbcbd) no-repeat center/3px 85%;">
{{ duel.eerstenP1 }} {{ duel.eerstenP2 }}<br>
<hr style="border-top: 3px solid #000000; background: transparent;">
{{ duel.puntenP1 }} {{ duel.puntenP2 }}
</td>
Where I am adding a vertical line to the middle of the column and styling the hr tag
I have a Jekyll collection document in the collection coding:
---
title: 'iOS iConify'
rawname: iosiconify
image: {{site.img}}/z-iosiconify.png
layout: post
link: https://iosiconify.github.io/
---
Hi!
I'm trying to render all of the documents in the collection coding on an html page, and I have the following code:
{% for post in site.coding %}
<tr id="{{ post.rawname }}-desktop">
<td id="left">
<a href="{{ post.link }}" target="blank" id="{{ post.rawname }}-desktop-a">
<img src="{{ post.image }}">
</a>
</td>
<td id="right">
<h2>{{ post.title }}</h2>
<h4>{{ post.content }}</h4>
</td>
</tr>
{% endfor %}
I'm referencing a lot of my custom front matter variables in it, such as {{ post.rawname }}. However, when the page builds the only part that works is {{ post.content }}.
Here is the rendered HTML:
<tr id="-desktop">
<td id="left">
<a href="" target="blank" id="-desktop-a">
<img src="">
</a>
</td>
<td id="right">
<h2></h2>
<h4><p>Hi!</p>
</h4>
</td>
</tr>
Do you have any idea why none of the custom front matter variables are working and how I can get them to work?
There is an error in Front-matter that prevents Jekyll to correctly processing it, displaying only the content.
This line image: {{site.img}}/z-iosiconify.png should be image: z-iosiconify.png.
Then when displaying the documents preppend site.img like {{ post.image | prepend: site.img }}.e.g.:
{% for post in site.coding %}
<tr id="{{ post.rawname }}-desktop">
<td id="left">
<a href="{{ post.link }}" target="blank" id="{{ post.rawname }}-desktop-a">
<img src="{{ post.image | prepend: site.img }}">
</a>
</td>
<td id="right">
<h2>{{ post.title }}</h2>
<h4>{{ post.content }}</h4>
</td>
</tr>
{% endfor %}
I'm using the HTML nav tag for showing the breadcrumbs in my website (built on Django/Bootstrap).
I'm trying to show a dropdown menu for Shop by Departments and then the breadcrumbs. But someone, the order is mixed up. The Shop by Departments is showing up in the end instead of being the first thing.
My code is:
<div class="animate-dropdown">
<!-- ========================================= BREADCRUMB ========================================= --><div id="top-mega-nav">
<div class="container">
<nav>
{% include "partials/nav_primary.html" with expand_dropdown=0 %}
<li class="breadcrumb-nav-holder">
<ul>
{% with category=product.categories.all.0 %}
{% for c in category.get_ancestors_and_self %}
<li class="breadcrumb-item">
{{ c.name }}
</li><!-- /.breadcrumb-item -->
{% endfor %}
<li class="active">{{ product.title }}</li>
{% get_back_button as backbutton %}
{% if backbutton %}
<li class="pull-right">
<a href="{{ backbutton.url }}">
<i class="icon-arrow-left"></i> {{ backbutton.title }}
</a>
</li>
{% endif %}
{% endwith %}
</ul>
</li><!-- /.breadcrumb-nav-holder -->
</nav>
</div>
</div><!-- /.container -->
I inspected the webpage using the inspector and the order of code is as expected. But the rendering is not. Whats wrong here?
Edit: The output in the inspector looks like
Your rendered HTML is invalid. That is what likely causes the problems.
A li element must have a parent ul (or ol) element.
So if you add an ul around your li class="breacrumb-nav-holder" it should work fine.