In my template I want to show a set of images in the middle of the content. So I'd imagine I need one part of the content then some images taken from the yaml, then the rest of the content meaning I'd have to split the content up into two parts.
How do I split the content up like this?
I had exactly the same problem, and I solved it without splitting the content.
I'll show the short version here, but there's a post with a more detailed explanation on my blog.
I'm using include files for the actual work of displaying the gallery:
First of all, I'm using Lightbox2 to display the images, so I need to load some JS and CSS files (and jQuery) first. I want to do this only on the pages where I actually need Lightbox2, so I'm putting it into an include file, not into the layout file:
/_includes/galheader.html :
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/lightbox-2.6.min.js"></script>
<link href="/css/lightbox.css" rel="stylesheet" />
Then, I need another include file that displays the actual gallery:
/_includes/gal.html :
{% for image in page.images %}
{% if include.image == null or include.image == image.name %}
<a href="{{ page.imgfolder }}/{{ image.name }}" data-lightbox="1" title="{{ image.text }}">
<img src="{{ page.imgfolder }}/{{ image.thumb }}" title="{{ image.text }}">
</a>
{% endif %}
{% endfor %}
Note that the {% if include.image == null or ... line allows me to use the include in two different ways:
Show all images:
{% include gal.html %}
Show a single image:
{% include gal.html image="image-1.jpg" %}
With those two includes, I can now do this:
---
layout: default
title: Gallery with text (version 1)
imgfolder: /img/demopage
images:
- name: image-1.jpg
thumb: thumb-1.jpg
text: The first image
- name: image-2.jpg
thumb: thumb-2.jpg
text: The second image
- name: image-3.jpg
thumb: thumb-3.jpg
text: The third image
---
{% include galheader.html %}
Some text here...and then, all the images in one single gallery:
{% include gal.html %}
...and more text after the gallery
The generated HTML:
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/lightbox-2.6.min.js"></script>
<p><link href="/css/lightbox.css" rel="stylesheet" /></p>
<p>Some text here...and then, all the images in one single gallery:</p>
<p><img src="/img/demopage/thumb-1.jpg" title="The first image"></p>
<p><img src="/img/demopage/thumb-2.jpg" title="The second image"></p>
<p><img src="/img/demopage/thumb-3.jpg" title="The third image"></p>
<p>...and more text after the gallery</p>
Or I can spread the images over the whole page:
---
layout: default
title: Gallery with text (version 2)
imgfolder: /img/demopage
images:
- name: image-4.jpg
thumb: thumb-4.jpg
text: The 4th image
- name: image-5.jpg
thumb: thumb-5.jpg
text: The 5th image
- name: image-6.jpg
thumb: thumb-6.jpg
text: The 6th image
---
{% include galheader.html %}
Some text here, then two images:
{% include gal.html image="image-4.jpg" %}
{% include gal.html image="image-5.jpg" %}
...and more text...
Even more text and the last image:
{% include gal.html image="image-6.jpg" %}
Some text at the end
The generated HTML:
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/lightbox-2.6.min.js"></script>
<p><link href="/css/lightbox.css" rel="stylesheet" /></p>
<p>Some text here, then two images:</p>
<p><img src="/img/demopage/thumb-4.jpg" title="The 4th image"></p>
<p><img src="/img/demopage/thumb-5.jpg" title="The 5th image"></p>
<p>...and more text...</p>
<p>Even more text and the last image:</p>
<p><img src="/img/demopage/thumb-6.jpg" title="The 6th image"></p>
<p>Some text at the end</p>
Related
Firstly, I don't know anything about HTML. I am trying to build a website using Jekyll and found a template for the website, to which I am making modifications.
I have the following code:
{% for publi in site.data.publist %}
{% assign even_odd = number_printed | modulo: 2 %}
{% if even_odd == 0 %}
<div class="row">
{% endif %}
<div>
<ol>
<li>{{ publi.title }}</li>
<!-- <img src="{{ site.url }}{{ site.baseurl }}/images/pubpic/{{ publi.image }}" class="img-responsive" width="33%" style="float: left" />
--> <p>{{ publi.description }}</p>
<p><em>{{ publi.authors }}</em></p>
<p><strong>{{ publi.link.display }}</strong></p>
<!-- <p class="text-danger"><strong> {{ publi.news1 }}</strong></p>
<p> {{ publi.news2 }}</p> -->
</ol>
</div>
{% assign number_printed = number_printed | plus: 1 %}
{% if even_odd == 1 %}
</div>
{% endif %}
{% endfor %}
There is a YAML file in the site.data.publist which has a number of members, each with different fields. The for loop helps to go through all the members of the YAML file.
As you can see in the code, I am using the <ol> tag in the for loop and I have used the <li> tag for the publi.title (a field in the members of the YAML file). But all I get is one repeating for all the members in the YAML file. I have attached the output I get.
As sirko mentioned in his comment, you are generating invalid HTML.
First of all, the <ol> may only contain li as direct children. So make sure to put everything else also within the li tag.
But your real problem is that you generate the ol tags within your loop. As mentioned in the comment, your output the contains multiple lists with one element each, not one list with n elements.
In order to change that, you have to move the ol outside of the for loop. (And then make sure you still generate valid HTML => see point 1.)
Here is my unfinished site that I have made with pelican using the pelican-bootstrap3 template: http://snoek.ddns.net/~oliver/mysite/
In the pelican-bootstrap3 README, it says can use the AVATAR variable in the pelicanconf.py file to point to an image. I've done this but now the picture of me is on every page, which is a little ridiculous. I would like it only on my "About" page.
In pelican-themes/pelican-bootstrap3/templates/includes I found an aboutme.html file with the following in it:
<div id="aboutme">
{% if AVATAR %}
<p>
<img width="100%" class="img-thumbnail" src="{{ SITEURL }}/{{ AVATAR }}"/>
</p>
{% endif %}
{% if ABOUT_ME %}
<p>
<strong>{{ _('About') }} {{ AUTHOR }}</strong><br/>
{{ ABOUT_ME }}
</p>
{% endif %}
</div>
Maybe it is this file that could be edited to specify that the avatar should only show on the "About" page? But I'm not sure how.
Change
{% if AVATAR %}
To
{% if page and page.title == 'About' and (ABOUT_ME or AVATAR) %}
I have created a data file with images which I use normally for posts.
ImageKey:
- url: "/assets/logos/Image.png"
title: "Image Title"
Now I want to use this image paths in my post headers.
---
layout: page
image:
- site.data.images.ImageKey
---
And my HTML looks like
{% for image in page.images %}
<div>
<div class="img-thumbnail">
<img class="img-responsive" src="{{site.baseurl}}{{image.url}}" alt="{{image.title}}">
</div>
</div>
{% endfor %}
But anything is wrong here. There will no picture be rendered.
It works if I use values in the fronter matter directly.
---
layout: page
image:
- url: "..."
title: "..."
---
I have the problem / request solved.
My _data\images.yml looks like
Image_Key_Name
url: /assets/file.png
alt: ....
title: ....
copyright: ....
My _posts\postXYZ.md
---
layout: post
author: Ben
titleImages:
- Image_Key_ Name
- Another_Image_Key_Name
abc...
---
And my _layouts\post.html
now iterates over the keys and uses them as array index.
<div class="title-images">
{% for titleImageKey in page.titleImages %}
{% assign titleImage = site.data.images[titleImageKey] %}
<img src="{{site.baseurl}}{{titleImage.url}}" alt="{{titleImage.title}}" />
{% endfor %}
That's it!
I am using Jekyll to collect blog excerpts on one page. One problem is that the featured images in the excerpt are usually stretched from the original ones. I think it is due to the default setting of the featured image in the excerpt is always fixed to 300px * 100px size. How to scale the featured images in stead of using a fixed size in the excerpt while making sure the size of the image is not larger than the default size?
In details, I use the following code to generate the blog excerpt in my post.html template:
<header><h4>{{ post.title }}</h4></header>
<p><span>{{ post.subtitle }}</span></p>
<p style="font-style:italic"> {{ post.date | date_to_string }}</p>
{% if site.pageviews %}
<p style="font-style:italic"> pageviews: {{ post.pageviews }} </p>
{% endif %}
<article>
<div class="excerpt">
{{ post.content | strip_html | truncate:400 }}
</article>
This function automatically grabs the first image in the blog as the featured image and shows it in the excerpt paragraphs. I cannot find where the size of featured images are controlled in Liquid... Thanks.
Update on May 31st:
The repo is here. See the most recent post for the image and excerpt of image at http://iciq.github.io. I fixed this problem by defining the "scale" property in stead of the width property in the css style of the image in the post. But still open to more elegant solutions.
As said above the problem is likely a css problem.
You can style images in several ways in a markdown file. Firstly by using HTML syntax or kramdown syntax and there is probably more...
If you choose to use kramdown you need to configure this in the _config.yml file.
markdown: kramdown
// then on the markdown file just use:
Here is an inline {:height="36px" width="36px"}
Let's refactor how you write and display your posts.
Use Jekyll's excerpt functionality
{{ post.content | truncate: 200 }} is, sometimes not accurate.
We can define a more precise excerpt for every post with Jekyll's excerpt functionality.
In _config.yml :
excerpt_separator: "<!--more-->"
In _posts/yyyy-mm-dd-post-title.md :
---
... front matter variables
---
Post excerpt here
<!--more-->
Post content here
You can now print exactly what your need in your posts listing :
Example file noteblog.html
[...]
---
{% include header.html %}
<div class="row">
<div class="col-sm-12">
{% for post in site.posts limit:4 %}
{% include postsummary.html %}
{% endfor %}
[...]
_includes/postsummary.html
<div id="postsum">
<time>{{ post.date | date_to_string }}</time>
<h3>{{ post.title }}</h3>
{% if post.subtitle %}<h4><span>{{ post.subtitle }}</span></h4>{% endif %}
{{ post.excerpt }}
<em>Read more</em>
</div>
About our feature image
There is two kind of images :
feature image : used in article display for general illustration. They are sometimes printed or not, in different size, in different places. In order to use them, we need to decouple them from content. Usually, we reference them in the front matter.
topic image : used in your text to illustrate a specific topic. They need to be at a specific place in our text. They are part of the content.
What you're trying to do is managing a feature image, and you're already referencing it in your front matter :
_posts/2016-05-27-group-study-on-advanced-topics-in-quantum-optics-II.md
image:
feature: /assets/img/opticallypumpedatoms_featured.jpg
In _includes/postsummary.html, using twitter bootstrap classes, you can then do :
{% if post.image.feature and post.image.feature != "" %}
{% assign hasImage = true %}
{% assign excerptClass = "col-xs-10" %}
{% else %}
{% assign hasImage = false %}
{% assign excerptClass = "col-xs-12" %}
{% endif %}
<div class="row postsum">
<div class="col-xs-12">
<time>{{ post.date | date_to_string }}</time>
<h3>{{ post.title }}</h3>
{% if post.subtitle %}<h4><span>{{ post.subtitle }}</span></h4>{% endif %}
</div>
<div class="{{ excerptClass }}">
{{ post.excerpt }}
<em>Read more</em>
</div>
{% if hasImage %}
<div class="col-xs-2">
<img src="{{ site.baseurl }}{{ post.image.feature }}" alt="{{ post.title }}" class="img-responsive">
</div>
{% endif %}
</div>
This will print your feature image only if it exists.
And, as your stylesheet is targeting #postsum which has several occurrences, you can target a .postsum class instead.
In assets/css/style.css, delete all references to #postsum and add :
.postsum{
position: relative;
padding: 10px;
margin: 0 auto;
margin-bottom: 20px;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
}
.postsum time {
font-style: italic;
text-align:right;
float:right;
line-height:1.8em;
}
.postsum h3 { line-height:1.2em; }
.postsum h4 { font-style: italic; }
.postsum img { float: right; }
You can also refactor _includes/postexcerpt.html in the same way.
FYI, your question is really a CSS question and not a Jekyll question.
The code you provide does not even reference an image, so can't help much there.
But what I suspect you are currently doing is importing the article's image into your blog list with the class you use to display the image in your post's page template.
You need to create and use a special class for when the post's images are displaying in the blog list format.
Also, on a side note:
you do not need to use a header tag if the contents are only an h tag; and
the opening article tag (if that is what you want to use) should be before the heading.
Here is an example of a structure you may want to use:
<!-- for each post in post loop, express something like: -->
<article>
<h4>{{ post.title }}</h4>
<p><span>{{ post.subtitle }}</span></p>
<p style="font-style:italic"> {{ post.date | date_to_string }}</p>
<img class="special-blog-image-class" src="{{ post.image.path }}" alt="{{ post.image.alt }}" title="{{ post.image.title }}"/>
{% if site.pageviews %}
<p style="font-style:italic"> pageviews: {{ post.pageviews }}</p>
{% endif %}
<p class="excerpt"> {{ post.content | strip_html | truncate:400 }}</p>
</article>
A very cool solution for static sites is to NOT solve this with CSS, but with an image resize service like http://images.weserv.nl.
I have a very basic layout:
#_layouts/default.html
{% include header.html %}
{{ content }}
{% include footer.html %}
A front page that shows all posts (without their comments):
#index.html
---
title: Schmexy Title
---
<section id="fresh-off-the-press">
{% for post in site.posts %}
<article class="post">
<header>
<p class="post-date">{{ post.date | date: '%b %d, %Y' }}</p>
<h1 class="post-heading">{{ post.title }}</h1>
</header>
{{ post.content | split:'<!-- body -->' | last }}
</article>
{% endfor %}
</section>
And a simple article format:
#_posts/2015-02-25.superduper.md
---
title: SuperDuperHeadline
category: newsflash
---
[SuperDuperHeadline][1]
===================
<!-- body -->
After a hassle-free launch, [Jekyll] has kept me up all night.
[1]: {{ page.url }}
[Jekyll]: http://jekyllrb.com
The use of the comment to avoid jekyll displaying the article title twice seems very hacky.
I tried simply deleting the headline & body hack
[SuperDuperHeadline][1]
===================
<!-- body -->
which works great for the index.html but when I click on the heading link to take me to the article it is then displayed with no heading at all as Jekyll is outputting only the html conversion of the markup inside the default layout.
SO, I tried using a sub-template to display the single post, changing the front-matter in the article to use _layouts/post.html
#_posts/2015-02-25.superduper.md
---
title: SuperDuperHeadline
category: newsflash
layout: post
---
with the new layout much like the old layout (but with the potential to show comments)
#_layouts/post.html
---
layout: default
---
<article class="post">
<header>
<p class="post-date">{{ page.date | date: '%b %d, %Y' }}</p>
<h1 class="post-heading">{{ page.title }}</h1>
</header>
{{ page.content | markdownify | split:'<!-- body -->' | last }}
<!--
<section class="comments">
<header><h1 class="comments-heading">Comments</h1></header>
<article class="comment">
<footer><p>Posted by: Commenter 1</p></footer>
<p>Comment 1</p>
</article>
<article class="comment">
<footer><p>Posted by: Commenter 2</p></footer>
<p>Comment 2</p>
</article>
</section>
-->
This sub-template needed the further hack of piping everything through markdownify before using the body hack to separate the header from the contents.
It all seems very... well, hacky. I must be doing something wrong
How do I best structure my layouts and posts for a blog?
Why is markdown not used in the sub-template?
I have re-created your Jekyll site on my machine by copying the code from your question - except for the two include files which you didn't show in your question:
{% include header.html %}
{% include footer.html %}
I used the following content for them in my project:
<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }}</title>
</head>
<body>
<h1>{{ page.title }}</h1>
and
</body>
</html>
...and I had no headline displayed twice.
Can you show me your header.html and footer.html?
(or better, is the whole project online somewhere, like on GitHub, where I can see the code?)
I'm suspecting that you have something in there that causes the headline to be displayed twice.
I have built multiple sites with Jekyll and it's definitely possible to do this without any hacks:
I am simply trying to list all posts on the front page (without comments) and click through to a single post (with comments). I'd like to write the posts is .md and have them marked up properly as per post.html.
I have simplified your example a bit - take a look at this:
The code
/index.html:
---
title: Schmexy Title
layout: default
---
<section id="fresh-off-the-press">
{% for post in site.posts %}
<article class="post">
<header>
<p class="post-date">{{ post.date | date: '%b %d, %Y' }}</p>
<h1 class="post-heading">{{ post.title }}</h1>
</header>
{{ post.content }}
</article>
{% endfor %}
</section>
/layouts/default.html:
<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }}</title>
</head>
<body>
<h1>{{ page.title }}</h1>
{{ content }}
</body>
</html>
/_posts/2015-02-25-superduper.md:
---
title: SuperDuperHeadline
category: newsflash
layout: default
---
After a hassle-free launch, [Jekyll] has kept me up all night.
[Jekyll]: http://jekyllrb.com
The created HTML:
/index.html:
<!DOCTYPE html>
<html>
<head>
<title>Schmexy Title</title>
</head>
<body>
<h1>Schmexy Title</h1>
<section id="fresh-off-the-press">
<article class="post">
<header>
<p class="post-date">Feb 25, 2015</p>
<h1 class="post-heading">SuperDuperHeadline</h1>
</header>
<p>After a hassle-free launch, Jekyll has kept me up all night.</p>
</article>
</section>
</body>
</html>
/newsflash/2015/02/25/superduper.html:
<!DOCTYPE html>
<html>
<head>
<title>SuperDuperHeadline</title>
</head>
<body>
<h1>SuperDuperHeadline</h1>
<p>After a hassle-free launch, Jekyll has kept me up all night.</p>
</body>
</html>
There you are - one headline per page, and the headline is a permalink.
Is this what you wanted to achieve?
(I know I omitted the comments in this first step - we'll come to that later if you still need it)