Using Lektor, trying to determine how to list the most recent three blogs by published date on the main landing (root) page. I'm feeling like I should be using a macro, but I don't understand how to pass the Blogs to the page template, or if this is an example of a flowblock? I've added a section like the following to the page.ini:
[children]
model = blog-post
order_by = -pub_date, title
but can't seem to loop through them in the template (no error is thrown but doesn't iterate). Quite lost, but still consuming the documentation.
I ended up using the site.query class functionality directly in the layout template (based on the Blog quickstart).
{% for blogpost in site.query('/blog').order_by('pub_date').limit(3) %}
<div class="post col-md-4">
<div class="post-details">
<div class="post-meta d-flex justify-content-between">
<div class="date">{{ blogpost.pub_date }}</div>
</div><a href="post.html"> <!-- fix this one shortly -->
<h3 class="h4">{{ blogpost.title }}</h3></a>
<p class="text-muted">{{ blogpost.teaser }}</p>
</div>
</div>
{% endfor %}
Related
I have a plugin called jekyll-spaceship in Jekyll - It helps me to use video feature (not available in Markdown): ! [Video] (https://vimeo.com/633912445?height=500)
Everything works perfectly on post page.
But in home page, I am listing posts like this:
<div id="main" class="site-main">
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
{% for post in paginator.posts %}
<header class="entry-header">
<h1 class="entry-title">
{{post.title}}
</h1>
</header>
<div class="entry-content">{{ post.content }}</div>
{% endfor %}
</div></div>
</div>
And, this event turns it into an image. So I can't use the plugin feature. I think {% for post in paginator.posts %} turns it into normal Markdown.
How can I fix this problem?
By the way, I am using jekyll-paginate-v2 for paginating but doesn't matter, its the same like normal Jekyll
I think this issue has been addressed and fixed, you can refer to spaceship with paginate-v2, and please try again with the latest version.
In old-style Laravel blade templated we used to use #section('section-name') in the following way:
{{-- h1para.blade.php --}}
<h1>
#section('heading')
Heading from Template
#endsection
</h1>
<p>
#yield('details')
</p>
And then extend that template with:
{{-- content.blade.php --}}
#extends('h1para')
#section('details')
Content from content page
#endsection
In the above, my rendered HTML output would look like the following, because the "missing" 'heading' section in the extending file means that we default back to the content in the template:
<h1>Heading from Template</h1>
<p>Content from content page</p>
But in the new components way of doing things, I do:
{{-- .../components/h1para.blade.php --}}
<h1>{{ $heading }}</h1>
<p>{{ $slot }}</p>
In case you haven't gathered, the question is: how do I set a default value for a slot's contents, such that if it isn't supplied in the extending component/template, it falls back to that default?
(I've done my searches, but haven't been able to find the same question asked before)
EDIT:
I should add that I've seen the solution (in the Laravel documentation):
<h1>{{ $heading ?? 'Default Heading Here' }}</h1>
But this seems only to be appropriate if the default value is a short easy to manage string. If the default is a long stream of HTML, then it wouldn't work for my needs.
EDIT 2:
Just to reiterate: the whole point of the question is that the default content could be a long stream of HTML. Solving the problem by passing in a string (be that formatted as HTML or not) wouldn't work for my real-world needs.
I think the solution is this:
{{-- .../component/template.blade.php --}}
<div>
#if (isset($heading))
{{ $heading }}
#else
<h1>Default Heading<span class="subhead">default subheadin and lots of other html content</span></h1>
#endif
<p>{{ $slot }}</p>
</div>
It's not super elegant, but I think it's the only solution. Anyone else have a better answer, I'd love to hear it.
If you pass data like:
<x-h1para header="<span>Header content</span>">
<div>Default slot content here</div>
</x-h1para>
You can display in your component like:
<div>
<h1>{!! $heading ?? 'Default Heading Here' !!}</h1>
{{ $slot }}
</div>
I have this problem I want to inject html into markdown file (blog post) but It's little bit long so I want to have plugin with parameters because it will change and I may add it multiple times. When search inject html I only found that you can insert html directly into markdown files, but I want to have one tag that will do this for me, to not duplicate the code, it will also be easier to update if Codepen decide to change the embed code.
This is the code I want to add, Codepen embed demo with button:
<div id="codepen">
<button class="btn" onclick="document.body.classList.toggle('sticky')">Dock</button>
<iframe height="265" scrolling="no" title="in browser sql terminal"
src="//codepen.io/jcubic/embed/dVBaRm/?height=265&theme-id=dark&default-tab=result"
frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/jcubic/pen/dVBaRm/'>in browser sql terminal</a> by Jakub T. Jankiewicz
(<a href='https://codepen.io/jcubic'>#jcubic</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
</div>
I want to have params username and id (maybe also title and full name), what is the easiest way to create such plugin and how to use in my markdown file?
You don't need a plugin to do this.
You can use a Jekyll include.
example_page.html
---
layout: page
title: Codepen include example
codepen:
author: jcubic
name: Jakub T. Jankiewicz
id: dVBaRm
title: "in browser sql terminal"
---
{% include codepen.html %}
_includes/codepen.html
{% if page.codepen %}
{% assign c = page.codepen %}
<div id="codepen">
<button class="btn" onclick="document.body.classList.toggle('sticky')">Dock</button>
<iframe height="265" scrolling="no" title="{{ c.title }}"
src="//codepen.io/{{ c.author }}/embed/{{ c.id }}/?height=265&theme-id=dark&default-tab=result"
frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/{{ c.author }}/pen/{{ c.id }}/'>in browser sql terminal</a> by {{ c.name }}
(<a href='https://codepen.io/{{ c.author }}'>#{{ c.author }}</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
</div>
{% endif %}
You can also use a parametrized include.
{% include codepen_param.html
author="jcubic"
name="Jakub T. Jankiewicz"
id="dVBaRm"
title="in browser sql terminal"
%}
_includes/codepen_param.html
{% assign pen = include %}
<div id="codepen">
<button class="btn" onclick="document.body.classList.toggle('sticky')">Dock</button>
<iframe height="265" scrolling="no" title="{{ pen.title }}"
src="//codepen.io/{{ pen.author }}/embed/{{ pen.id }}/?height=265&theme-id=dark&default-tab=result"
frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/{{ pen.author }}/pen/{{ pen.id }}/'>in browser sql terminal</a> by {{ pen.name }}
(<a href='https://codepen.io/{{ pen.author }}'>#{{ pen.author }}</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
</div>
Like this, you can call any number of pens from your page.
Good afternoon,
I am working on the blog where I have detail of the article and want to show few pictures.
What I am getting at the moment:
As you can see I am getting the content and after the content pictures. Here is also the code of the blade.
<div class="container">
#foreach($articles as $article)
<article>
<h1 class="title is-1">{{$article->title}}</h1>
#foreach($article->images as $image)
<figure class="image is-128x128">
<img src="{{$image->path}}" alt="{{$image->title}}">
</figure>
#endforeach
<p>{{$article->content}}</p>
</article>
#endforeach
</div>
Because I am getting a object I cannot split the pictures.
.
It was rather hard to figure out what you want, but I'm quite sure I finally got the question.
What you wanna do is something like this:
<div class="container">
#foreach($articles as $article)
<article>
<h1 class="title is-1">{{$article->title}}</h1>
#if(count($article->images) > 0)
<figure class="image is-128x128">
<img src="{{$article->images->first()->path}}" alt="{{$article->images->first()->title}}">
</figure>
#endif
<p>{{$article->content}}</p>
#if(count($article->images) > 1)
#foreach($article->images->slice(1) as $image)
<figure class="image is-128x128">
<img src="{{$image->path}}" alt="{{$image->title}}">
</figure>
#endforeach
#endif
</article>
#endforeach
</div>
This will not only give you headline > image 1 > content > remaining images, it will also make sure you only print images when there are actually some available. The $article->images->slice(1) within the second #if() will ensure we are not using the first image a second time.
Make sure $image->path is the correct to the image file (if it's an url, skip this point).
You can check by echoing it or just dd($image->path).
For the image to be accessed, it needs to be on the public folder of laravel
If you wish to have the files in the storage folder and have it accessed publicly, you'll need to create a symlink
https://laravel.com/docs/5.6/filesystem
I would like to be able to repeat a partial a number of times within a view, with different content in each repetition.
The partial is a simple panel, with a heading, and some content. The content within each panel can vary in complexity, so I would like to be able to use the #section('content') method of passing data.
The set up I have is as follows:
panel.blade.php - The partial to be repeated.
<div class="panel">
<header>
#yield('heading')
</header>
<div class="inner">
#yield('inner')
</div>
</div>
view.blade.php - The view in which the partial is repeated
#extends('default')
#section('content')
{{-- First Panel --}}
#section('heading')
Welcome, {{ $user->name }}
#stop
#section('inner')
<p>Welcome to the site.</p>
#stop
#include('panel')
{{-- Second Panel --}}
#section('heading')
Your Friends
#stop
#section('inner')
<ul>
#foreach($user->friends as $friend)
<li>{{ $friend->name }}</li>
#endforeach
</ul>
#stop
#include('panel')
#stop
I am running into the same issue as this: http://forums.laravel.io/viewtopic.php?id=3497
The first panel is displayed as intended, but the second is simply a repeat of the first.
How can I correct this? If this is a poor method of getting this done, what would be a better way?
For Laravel 5.4, Components & Slots may be useful for you. The following solution is for Laravel 4.x, and likely <= 5.3 as well.
In my opinion, this is a silly use case for the #include syntax. The amount of HTML retyping you're saving is negligible, especially since the only potentially-complicated part of it is the inner content. Keep in mind, the more parsing that needs to be done, the more overhead your application has, also.
Also, I don't know the inner workings of the #yield & #section features, so I can't say how "proper" it is to work your includes this way. Includes typically utilize a key => value pair passed as a parameter in the include call:
#include('panel', ['heading' => 'Welcome', 'inner' => '<p>Some stuff here.</p>'])
Not the most ideal place to pack a bunch of HTML, but that's the "designed" way (as far as I know, at least).
That said...
Use the #section ... #overwrite syntax mentioned in the "Other Control Structures" part of the template docs page.
#extends('default')
#section('content')
{{-- First Panel --}}
#section('heading')
Welcome, {{ $user->name }}
#overwrite
#section('inner')
<p>Welcome to the site.</p>
#overwrite
#include('panel')
{{-- Second Panel --}}
#section('heading')
Your Friends
#overwrite
#section('inner')
<ul>
#foreach($user->friends as $friend)
<li>{{ $friend->name }}</li>
#endforeach
</ul>
#overwrite
#include('panel')
#stop