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.
Related
Good night friends.
I'm trying to display the content of a tag in a template, in another template, using the django "extends" method. Works perfectly with when it comes to "normal", "typed" content:
this works:
{% block part_of_site %}
<div id='tag2'>Context</div>
{% endblock %}
using a variable, you can't copy to another template:
{% block part_of_site %}
<div id='tag2'>{{ variable }}</div>
{% endblock %}
As a novice starting out on GitHub Pages, I am lost among the sea of materials on the web that seem to help with my following problem:
I am using Jekyll to build my blog hosted via GitHub Pages and would like to add a background image in my default homepage like this.
So, how do I do it? I have started out, but have little to no knowledge of HTML / CSS and would thus be grateful for a simple way to do the same.
I am currently using the default minima theme! :)
Minima doesn't have a provision to easily render a "cover photo" like you expect to. But that doesn't mean, it is impossible to render one.
When using Minima, your homepage is rendered via the file ./index.md and layout file _layouts/home.html. So, if your working directory doesn't contain the home layout, create the _layouts directory with a file named home.html.
The home layout in Minima
I'll explain what the layout contains so that you'll be able to use that knowledge in other areas.
The layout contains the following code. Copy the entire code below into the _layouts/home.html file you just created in the above step:
---
layout: default
---
<div class="home">
{%- if page.title -%}
<h1 class="page-heading">{{ page.title }}</h1>
{%- endif -%}
{{ content }}
{%- if site.posts.size > 0 -%}
<h2 class="post-list-heading">{{ page.list_title | default: "Posts" }}</h2>
<ul class="post-list">
{%- for post in site.posts -%}
<li>
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
<span class="post-meta">{{ post.date | date: date_format }}</span>
<h3>
<a class="post-link" href="{{ post.url | relative_url }}">
{{ post.title | escape }}
</a>
</h3>
{%- if site.show_excerpts -%}
{{ post.excerpt }}
{%- endif -%}
</li>
{%- endfor -%}
</ul>
<p class="rss-subscribe">subscribe via RSS</p>
{%- endif -%}
</div>
Let's dissect the layout chunk by chunk:
---
layout: default
---
This is a front matter block that tells Jekyll the 'home' layout is a subset of the 'default' layout.
<div class="home">
This opens up a container for everything else on the home page and is closed by the </div> on the very last line.
{%- if page.title -%}
<h1 class="page-heading">{{ page.title }}</h1>
{%- endif -%}
This a template instruction that would render the home page's title if it was provided in the front matter inside file ./index.md.
{{ content }}
This is another template instruction that pulls in content (anything apart fron the front matter) from the file using this layout. In our case, that would be ./index.md.
The remaining chunk {%- if site.posts.size > 0 -%} cycles through the posts in your site and renders a list of those posts.
The cover image
We now have a fair idea regarding what our template is made of. But there is no mention of the code to render the cover-photo.
Agreed. So, let us code that in then. Insert the code from the following steps before the line with {{ content }} in the layout
First, add a container for the image.
<div class="hero">
</div>
Then insert the HTML markup to render the image of your choice (say, ./assets/home-feature.jpg) within it:
<div class="hero">
<img class="feature-img" src="{{ 'assets/home-feature.jpg' | relative_url }}" />
</div>
With just the above markup, your image would perhaps be too big for your page. So we should constrain the size with some CSS styling.
Minima uses Sass partials to generate the CSS for your site. Therefore, we'll need to overwrite a partial with some custom code.
Create a new directory named _sass with a subdirectory named minima and finally a file inside the _sass/minima directory named _layout.scss. Copy the contents at this link into that file.
Now add the following custom code towards the end of the file:
/* Cover Image */
.hero {
.feature-img: {
max-width: 100%;
}
}
Rendering background image
All of the above is to just render a cover-photo. To render the image as a proper background-image, you can do the following..
First, we need to adjust the markup to render text in the foreground and image only as the background:
<div class="hero">
{{ page.hero_text }}
</div>
With the above in place you are now able to control the text over your background-image via front matter in ./index.md.
And then bring back the image using CSS:
/* Cover Image */
.hero {
background: url('../home-feature.jpg');
}
Getting the url to your image is a little tricky since we can't use Liquid instructions inside sass partials in vanilla Jekyll. So you'll have to experiment with it for your particular site.
For more tips regarding CSS backgrounds, check this link
Have you look into the inspector tool? Another easy way is to look at the code snippet of that website which you can find here: https://github.com/mnp-club/mnp-club.github.io
I'm pulling up the exact code for what they do to achieve that effect this will :
https://github.com/mnp-club/mnp-club.github.io/blob/master/_layouts/page.html
<div id="main" role="main">
<article class="entry">
{% if page.image.feature %}<img src="{{ site.url }}/images/{{ page.image.feature }}" class="entry-feature-image" alt="{{ page.title }}"{% endif %}
// Alternatively a simpler way will be to just include the img src code.
// <img src="insert-image-url.jpg" class="entry-feature-image"/>
// Whole bunch of code for body here
</article>
</div>
And to make it a full-width header image, just give it a css of
.entry-feature-image {
width: 100%;
}
My blog run on jekyll minima and github pages as well and I have a default header for certain pages. Making it full width is just a matter of CSS.
https://github.com/wing-puah/thegeekwing-jekyll/blob/master/_layouts/default.html
What you can do is just add the html code for the image to the _layouts/default.html file.
There are different ways to achieve what you want. Understand that you have little experience with html and css but I will suggest to pull up the inspector tools and see the code to identify which code does what. Hope that helps!
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 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
I'm trying to show the top 3 blog posts in Jekyll. Using Jekyll bootstrap, I see that there is a layout for a post (a layout and an underlying theme page) - what I want to do is repeat that post layout for each of the posts.. Something like:
{% for post in site.posts %}
-- Render the post layout for this post.
{% endfor %}
I'm not sure how to do this without having to copy the content for the post layout, and either add it inside that for loop, or create a JB include, which still doesn't solve the problem 'cos I'll still have to copy and paste the post html markup.
In the end, I realised that I don't need most of the markup from the post layout, so I took what I need and embedded this in the for loop..
{% for post in site.posts %}
{% include JB/post_content %}
{% endfor %}
and post_content
<article class="unit-article layout-post">
<div class="unit-inner unit-article-inner">
<div class="content">
<div class="bd">
<div class="entry-content">
{{ post.content }}
</div><!-- entry-content -->
</div><!-- bd -->
</div><!-- content -->
</div><!-- unit-inner -->
</article>
Yup. We ended up using a similar format:
<h3>Posts</h3>
<ul>
{% for post in site.posts %}
<li>
{{ post.title }}
</li>
{% endfor %}
</ul>