I've made a Jekyll static web site following this tutorial. The problem is when I reach the collections's section, I do what is being told but my 'portfolio' collection is not rendering.
These are the Markdown files that composes the collection _portfolio.
For example, the file called google.md has this content:
---
image_path: /img/portfolio/1.jpg
category: Diseño web
project_name: Google
link: https://google.com
---
As well the other files, but with different data.
My config.yml just has this:
collections:
portfolio:
And portfolio.html has this code:
---
layout: page
title: Portafolio
---
<section class="no-padding" id="portfolio">
<div class="container-fluid">
<div class="row no-gutter">
{%- for item in site.portfolio -%}
<div class="col-lg-4 col-sm-6">
<a href="{{ item.link }}" class="portfolio-box">
<img src="{{ item.image_path }}" class="img-responsive" alt="{{ item.project_name }}">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
{{ item.category }}
</div>
<div class="project-name">
{{ item.project_name }}
</div>
</div>
</div>
</a>
</div>
{%- endfor -%}
</div>
</div>
</section>
When I inspected the elements in the console y noticed that the page is rendering everything but the content after the {% for %} tag.
What am I missing?
Are the Markdown files wrong or is it the 'for' tag?
EDIT: This is the repository link
It seems that your collection.docs array is empty, so, no way to loop in.
You need to generate your documents.
Can you try :
collections:
portfolio:
output: true
Edit : And your configuration file must be named _config.yml and NOT config.yml.
Related
I am new to Django. I have created 2 seperate views and URLs, however, when I load my development server and click on slides to open slides_detail.html, it opens sub_detail.html, at this point I have no clue what could cause that as there are no similar names which would lead to opening completely different detail page. Both slides and subcontent sits in the same HTML document, same with URLs and views. There are no errors, to show. Thanks in advance:
URLS:
path('<int:sub_id>/', views.sub_detail, name='sub_detail'),
path('<int:slides_id>/', views.slides_detail, name='slides_detail'),
Views:
# Will show specific sub content details
def sub_detail(request, sub_id):
subcontent = get_object_or_404(SubContent, pk=sub_id)
context = {
'subcontent': subcontent,
}
return render(request, 'home/sub_detail.html', context)
# Will show specific slides content details
def slides_detail(request, slides_id):
slides = Slides.objects.get(pk=slides_id)
context = {
'slides': slides,
}
return render(request, 'home/slides_detail.html', context)
HTML for slides:
{% for slides in slides %}
<div class="swiper-slide">
<div class="card">
<a href="{% url 'slides_detail' slides.id %}">
<img src="{{ slides.image.url }}" class="card-img-top img-height" alt="..."></a>
<div class="card-body bg-dark">
<h5 class="card-title text-light font-weight-bold text-center">{{ slides.title }}</h5>
</div>
</div>
</div>
{% endfor %}
HTML for subcontent:
{% for sub in subcontent %}
{% if forloop.counter|divisibleby:2 %}
<div class="row">
{% if sub.image %}
<div class="col-md-6 section-index-img">
<img src="{{ sub.image.url }}" class="rounded img-fluid" alt=""/>
</div>
{% endif %}
<div class="col-md-6">
<a href="{% url 'sub_detail' sub.id %}">
<h4>{{ sub.title }}</h4>
</a>
<p class="text-muted">{{ sub.description | linebreaks }}</p>
</div>
</div>
{% else %}
I have created 2 seperate views and URLs, however, when I load my development server and click on slides to open slides_detail.html, it opens sub_detail.html.
You did not create two separate URLs, you created the same path. Both paths will fire on the same patterns. This thus means that if you have a {% url 'slides_detail' 42 %}, for example, it will be written as /42, but this is also a valid path for the sub_detail, so when you make a request with that path, Django will "fire" the first view that matches, in this case sub_detail.
You should make the paths non-overlapping, for example:
path('sub/<int:sub_id>/', views.sub_detail, name='sub_detail'),
path('slide/<int:slides_id>/', views.slides_detail, name='slides_detail'),
As for now I am following a video to create a blog with django. But, I have problem attaching the title, content, author and date on the template which I had downloaded from colorlib. I used the method below in the index.html file but they do now show:
{% extends 'base.html' %}
{% load static %}
{% block content %}
{% for post in object_list %}
<div class="site-section">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-12">
<div class="section-title">
<h2>Editor's Pick</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="post-entry-1">
<img src="{% static 'images/img_h_1.jpg' %}" alt="Image" class="img-fluid">
<h2></h2>
<p>{{ obj.overview }}</p>
<div class="post-meta">
<span class="d-block">
{{ obj.author.user.username }} in {{ cat }}</span>
<span class="date-read">{{ obj.timestamp|timesince }} ago<span class="mx-1">•</span> 3 min read <span class="icon-star2"></span></span>
</div>
</div>
</div>
{% endfor %}
Assuming object_list is the list of posts. You instantiated the loop variable as post. Therefore post is the variable representing a post instead of obj which you try to access. So replace everywhere you have obj with post or you can make the loop variable obj instead. Either way
Since you are iterating through each post from the list of posts, so to access the value of each post, you should use {{ post.title }} to show the title of the post, {{ post.author.username }} to show the username of the author of the post, and so on.
I just tryed to release my first Jekyll site from localhost to a live version and got some img-url problems. I have got a image folder in the root that contains a subfolder called staff where I get my staffmembers images.
My problem is that when I loop through my staff members on the staff.html
the page tryes to get the images from:
mysite/staff.html/images/staff/img1.png
... when the image accually is in:
mysite/images/staff/img1.png
The staff.html file looks like this:
{% for member in members %}
<div class="col-sm-12 col-md-10 col-lg-3">
<div class="card">
<img src="{{ member.img }}" class="card-img-top img-fluid" alt="{{member.name}}">
<div class="card-body">
<h4 class="card-title">{{ member.name }}</h4>
<ul>
<li><b>{{ member.position }} <br> {{ member.section }}</b></li>
<li> {{ member.email }} </li>
<hr>
<li>Mobil: {{ member.mobil }}</li>
<li>Kontor: {{ member.office }}</li>
</ul>
</div>
</div>
</div>
{% endfor %}
I also have a folder in the root called '_staff' that contains .md files for all staff members that looks like this:
name: Jon doe
position: supervisor
section: carpenter
email: jon#site.se
mobil: 073-000 00 00
office: 08-000 00 00
img: images/staff/img1.jpeg
any ideas how to solve?
Replace images/staff/img with /images/staff/img. The first slash tells the server to look in the root (top folder of the website).
Tip: You could/should also check that you set permalink: pretty in your _config.yml file. That should hide the .html exentsion in your URL's. Source
cupcakesTest is a folder which contains 2 markdown files. (Descriptions of cupcakes).
Its located in the project folder.
---
layout: post
title: Muffins
---
<h1>Our Cupcakessssss</h1>
<div class="cupcakes">
{{ site.cupcakesTest }}
{% for cupcake in site.cupcakesTest %}
<div class="cupcake">
<div class="image"><img src="{{ cupcake.image_path }}"/></div>
<h2>{{ cupcake.type }}</h2>
</div>
{% endfor %}
</div>
for site.cupcakesTest to be valid:
the "directory" should start with an underscore: (_cupcakesTest/)
and added as a collection in your _config.yml
# _config.yml
collections:
- cupcakesTest
I am creating a Jekyll theme where all user pages that implement the 'indexable' attribute in the front matter are rendered in the main landing page. So I have the 'frontpage layout:
---
layout: root
---
{% assign custom_pages = site.pages | where: 'indexable', true | sort: 'priority' | reverse %}
{% include header.html %}
{% for c_page in custom_pages %}
<div class="container {{ c_page.class | default: '' }}" >
{{ c_page.content }}
</div>
{% endfor %}
{% include footer.html %}
{% include javascripts.html %}
A sample page that will be processed:
---
layout: page
title: Us
permalink: /us/
indexable: true
priority: 10
class: us-page
---
<div class="row">
{% for member in site.data.members %}
<div class="col-sm-6">
<div class="card card-block">
<img src="{{ member.gravatar }}?s=256" alt="Avatar">
<h4 class="card-title text-xs-center">{{ member.name }}</h4>
<p class="card-text">{{ member.description | markdownify }}</p>
<p class="card-text">
{% for tag in member.expertise_areas %}
<span>{{ tag }}</span>
{% endfor %}
</p>
<a href="{{ member.blog }}" class="btn btn-primary" role="button" >Mi blog</a>
</div>
</div>
{% endfor %}
</div>
However the liquid tags are appearing unprocessed, like the same output {% raw %} would produce. Is there a way through I could do {{ c_page.content | magic_here }} in order to manually get rendered those tags?
EDIT. Screenshot:
EDIT2
Theme repository
Web implementation
Well, despite I still don't know whether the issue is in my code, I am posting how I managed to solve it. Basically I created a filter tag called liquefy which has been put in a .gem and whose main task is taking a text with markdown or/and liquid syntax as an argument which will be parsed and rendered.
Repo: https://github.com/sonirico/liquefy
Gem: https://rubygems.org/gems/liquefy