Am creating my first Jekyll (using version 4.0.0) powered site. Problem is the variables in Front Matter are not recognized.
HTML in _includes (writing-post-featured-image.html)
<figure>
<img class="feat-img" src="{{ site.baseurl }}/assets/images/{{ include.images }}" alt="{{ include.alt | default: 'lorem ipsum' }}" />
<figcaption>{{ include.caption }}</figcaption>
</figure>
In _layout having layout for text based post pages (writings-post.html)
{% include writing-post-featured-image.html image=post.featured-image alt=post.featured-image-alt %}
Last, in .md file (under _posts) the following Front Matter
layout: writings-post
title: my title
permalink: /writings/:title
featured-image: photo.jpg
featured-image-alt: about photo
caption: photo caption
Output is empty
<figure>
<img class="feat-img" src="" alt="lorem ipsum" />
<figcaption></figcaption>
</figure>
Please help understanding why so. Thanks in advance.
Your syntax is incorrect.
1.) As your passing variables from your page, your include tag should look like this :
{% include writing-post-featured-image.html
image=page.featured-image
alt=page.featured-image-alt
caption=page.caption %}
2.) In your include you have a syntax problem with include.images that should be include.image.
Note : as you're passing existing variables (not computed ones), you can skip passing them to your include, because from within an include you can see page's variables.
{% include writing-post-featured-image.html %}
And your include :
<figure>
<img class="feat-img"
src="{{ site.baseurl }}/assets/images/{{ page.featured-image }}"
alt="{{ page.featured-image | default: 'lorem ipsum' }}" />
<figcaption>{{ page.caption }}</figcaption>
</figure>
The correct syntax on the page of the post is:
{% include writing-post-featured-image.html image=page.featured-image alt=page.featured-image-alt %}
Note the page. syntax, instead of the post. syntax. However, when you have a loop in your layout, you can use this:
{% for post in site.posts %}
{% include writing-post-featured-image.html image=post.featured-image alt=post.featured-image-alt %}
{% endfor %}
Related
I am trying to make a little website with django when I ran into a problem:
I have a site where I want to look at a post in detail, but not every post has an image attribute - so I am getting an error when I try to display images, since some arent existent.
So the solution would be to check if an image is given, but... How do I do that?
I tried something like this but it did not work:
</div>
<p>{{ object.content }}</p>
{% if object.image.url == True %} <!-- In no case an image is displayed -->
<p>
<img src="{{ object.image.url }}">
</p>
{% endif %}
</div>
You should check the truthiness object.image attribute, not its URL, so:
{% if object.image %}
<p><img src="{{ object.image.url }}"></p>
{% endif %}
I know that it has to do womething with category.twig which is in /catalog/view/theme/YOURTHEME/template/product/category.twig
I tried to do whatever instructions I found in forums.
I tried this and I tried that
I tried to refresh Cache.
I need more help. What I am doing wrong? Or maybe these instructions that I tried are wrong?
Seems like you are doing everything right. Make sure that in /catalog/view/theme/YOURTHEME/template/product/category.twig YOURTHEME is actually your current theme. From the tutorial for thumb and description take this code
{% if thumb or description %}
<div class="row"> {% if thumb %}
<div class="col-sm-2"><img src="{{ thumb }}" alt="{{ heading_title }}" title="{{ heading_title }}" class="img-thumbnail" /></div>
{% endif %}
{% if description %}
<div class="col-sm-10">{{ description }}</div>
{% endif %}
</div>
<hr>
{% endif %}
Or only for description take
{% if description %}
<div class="col-sm-10">{{ description }}</div>
{% endif %}
And replace it anywhere in this template file (almost everywhere actually).
The most important is to clear twig cache. On howto do that i have described the process in the other article earlier, please read
https://stackoverflow.com/a/61524855/3187127
After that - click Ctrl F5 if you are using Chrome or Firefox (or other combination in your browser which reloads page with cache cleaning) while you are on a category 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.
I am extremely new to Jekyll/Ruby/Liquid and I would like to create a for loop to display an image for every different tag that I have. However I can't seem to get it to work. I think the problem is nesting the name of each tag inside asset_path and then modifying the name. It keeps throwing the error that I have not properly terminated the variable.
For example, if one of my tags was 'cloud', I would like the 'cloud_logo.png' image to be displayed from my asset directory. I am using the jekyll-assets plugin and am running it all locally through terminal.
{% for tag in site.tags %}
<img src="{% asset_path {{ tag | first }}_logo.png %}"></img>
{% endfor %}
I would be very grateful if anyone could help me with this, thanks in advance!
Thanks so much for your answer JootS! It helped me a lot, you were missing something though, for some reason {{ asset_path }} wasn't getting recognised, but when I replaced it with /assets/ it was a temporary hotfix as my html file is in the root directory. So the solution was:
{% for tag in site.tags %}
<img src="/assets/{{ tag | first }}_logo.png" />
{% endfor %}
This is correct liquid:
{% for tag in site.tags %}
<img src="{{ asset_path }}{{ tag | first }}_logo.png" />
{% endfor %}
Note that you should set your 'asset_path' in your '_config.yml' file like this (for future reference):
asset_path: '/assets/'
Happy Jekylling!
I'm working on Search Engine Optimization for my Jekyll site, and I am running into an issue where I am unable to set meta information.
...
<meta name="og:title" content="{{ seo_title }}" />
...
<!-- now in my for post-loop: -->
{% for post in site.posts %}
<li class="post-link">
<a class="post-title" href="{{ post.url }}">
<span class="post-date">{{ post.date | date_to_string }}</span>
{{ assign seo_title = post.title }}
{{ post.title }}
</a>
</li>
{% endfor %}
I'm assigning sel_title to the post title, but it's not showing up in my meta information! I just get <meta name="og:title" content="" />
I've also tried adding {{ assign seo_title = page.title }} inside of my post.html post layout to no avail using {{ page.seo_title }} {{ post.seo_title }} and {{ seo_title }}
Now, obviously this really isn't what i want, because logically - after this for loop, it would set it to whatever the last post title was, but i can't even get that to display. Ideally what I would like, is for it to show up for the post.
You can view the page here where I want it to show up.
Where am I going wrong? How can I use my post information to fill my SEO meta information?
Had a look at your github repo. You are using only one basic layout for both index and posts. In your _posts, the YAML Front Matters is getting processed first time (and only once) when you do {% include post.html %}. But then you pass it on to the default layout and you cannot pass the YAML variables from the post through also.
One typical pattern you can adopt is split the default layout and create partial html files in the _includes folder i.e header.html and footer.html. You can then use them to create your default and post layouts. That way you can pass on the relevant YAML Front Matter variables in the post to the header.