So I defined my field like this:
<property name="news" type="smart_content">
<!-- #see https://docs.sulu.io/en/2.2/reference/content-types/smart_content.html -->
<meta>
<title lang="en">News</title>
<title lang="de">Nachrichten</title>
</meta>
<params>
<param name="provider" value="articles"/>
<param name="types" value="news"/>
</params>
</property>
and my twig template looks like:
<div>
{% for article in news %}
<a href="{{ sulu_content_path(article.routePath) }}" >
<h2>
{{ article.excerpt.title|default(article.title) }}
</h2>
</a>
{% endfor %}
</div>
It grabs articles of "news" type and that works well. Now I need to implement "load more" kind of pager. So I should at start show i.e. 5 latest articles and bellow them "Load more" button and when clicked another 5 should be loaded and again when clicked another 5 and so on, until there are news articles available. I didn't see anywhere in sulu documentation that "load more" feature is mentioned.
What is the best way to achieve this?
I created a github gist a while ago showing exactly how this works.
See https://gist.github.com/luca-rath/d16c0ad74fa06da49fed22404a53398b
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.
I have a tumblr blog embedded into my website (iframe) and want all clicks to open in a new tab to land on the post detail url (e.g. https://diestadtgaertner.tumblr.com/post/657405245299818496). I already adapted the template to get this working for most post types by exchanging the respective href variable with "https://diestadtgaertner.tumblr.com/post/{PostID}" and add target="_blank". However, I can't get this to work for the pictureset. Does anyone know how this might work?
Help would be greatly appreciated!
Thanks & best,
Torge
You can edit your template so the photoset gets output into a normal div (I think the default is to load photosets inside an iframe themselves, which could be causing you issues.
This is the block from my tumblr template:
<ul>
...
{block:Photoset}
<li class="post photoset">
{block:Photos}
<img src="{PhotoURL-500}" {block:HighRes}style="display:none"{/block:HighRes} />
{block:HighRes}
<img src="{PhotoURL-HighRes}" class="highres" />
{/block:HighRes}
{/block:Photos}
{block:Caption}
<div class="description">{Caption}</div>
{/block:Caption}
<p>
<span class="icon-link ion-ios-infinite-outline"></span>
{block:Date}{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}{/block:Date}
</p>
</li>
{/block:Photoset}
</ul>
In any case you could wrap the entire block in the Permalink href. Something like:
<ul>
...
{block:Photoset}
<li class="post photoset">
<a href="{Permalink}"> // this permalink href now wraps the entire content of the post.
{block:Photos}
<img src="{PhotoURL-500}" {block:HighRes}style="display:none"{/block:HighRes} />
{block:HighRes}
<img src="{PhotoURL-HighRes}" class="highres" />
{/block:HighRes}
{/block:Photos}
{block:Caption}
<div class="description">{Caption}</div>
{/block:Caption}
</a>
</li>
{/block:Photoset}
</ul>
The issue now is that the default click links for the images inside this post (if they exist) will no longer function normally.
It is difficult to test this without the link to your site, but I think updating your tumblr template first should hopefully give you the result you are after, but of course I would recommend a backing up your code.
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.
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 %}
Bit of a beginner here and this issue has been causing me a headache for over a day. I'm using userfrosting as a framework, with the usual twig files for the web pages.
I'm trying to include a datepicker (bootstrap-datepicker.js hasn't worked, neither is the current iteration using jquery-ui) in a form in a twig - but no matter what I do, I can't get it to work!
Here's the basic setup:
{% block head %}
{{ parent() }}
<script src="{{site.uri.js}}/jquery-1.11.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="{{site.uri.js}}/custom.js" ></script>
{% endblock %}
{% block content %}
.... {{boring stuff missed out}}
<form class="form-inline" role="form">
.... {{boring stuff missed out}}
<div class="form-group row">
<label for="datepicker" class="col-sm-3 form-control-label">Subject Date:</label>
<div class="col-sm-6">
<input type="date" class="form-control" id="datepicker" />
</div>
</div>
.... {{boring stuff missed out}}
</form>
.... {{boring stuff missed out}}
{% endblock %}
{% block javascripts %}
<script type="text/javascript">
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
{% endblock %}
The box is on the page, you can type a date into it etc, but nothing appears when you click on it (there should be a calendar appearing.)
Anyone have any ideas? I'm at a total loss. I've tried various versions, locally and (as you can see, currently) on a CDN, but nothing works. I'm sure it's probably something basic as I'm not an experienced web dev or anything, but any advice or working examples would be gratefully received!
Uh! facepalm
Well, after some digging and serious consideration of the inspector output (thanks CTRL-SHIFT-I!) it turns out to be a simple case of script loading order and multiple scripts being loaded.
I didn't realise twig loads a whole bucketload of scripts on top of what I ask it to load in the template I was creating. Only after seeing the inspector output for the page did I see that I was trying to load two different versions of jQuery and my own custom script was being loaded out of order - I was loading them here:
{% block head %}
{{ parent() }}
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="{{site.uri.js}}/custom.js" ></script>
{% endblock %}
that block should be reserved for stylesheets. Instead, I should be loading them here:
{% block page_scripts %}
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="{{site.uri.js}}/custom.js"></script>
{% endblock %}
... so that they are loaded AFTER all the default Bootstrap and userfrosting scripts.
https://jqueryui.com/datepicker/ uses type="text" for the input field. When I google the matter it seems that type="date" has at least previously caused problems.
In short: I would try changing type="date" to type="text".