Hello Stack Overflow community,
I am trying to include a html icon on hover.
This is my code:
<div class="country">{% include icons/home/icon-america.html %}</div>
this works fine, but the icon has to be different on each hover, so i tried this:
<div class="country">{% include icons/home/icon-{{project.country}}.html %}</div>
And this is my YML:
home:
- {folder: 'thumb_1', name: 'Chaffee', text: 'Hier komt tekst over de chaffee en nog meer', link: 'chaffee.html', country: 'america'}
this is not working, is there a way to get this work?
Thanks in advance.
This is my HTML
<div class="thumb-container">
{% for project in site.data.settings.home %}
<a href="{{project.link}}" class="thumb-unit">
<div class="backPic" style="background-image: url(assets/img/home/{{ project.folder}}/thumb.jpg)"></div>
<h3>{{ project.name}}</h3>
<p>{{ project.text}}</p>
<div class="thumb-overlay"></div>
<div class="country">{% include icons/home/icon-america.html %}</div>
</a>
{% endfor %}
</div>
Wim
I solved this one by putting the svg's in a seperate folder, and linking to them like this:
{folder: 'thumb_1', country: 'america', name: 'M24 Chaffee', text: 'Hier komt tekst over de chaffee en nog meer', link: 'chaffee.html'}
and the html like this:
<img src="assets/img/home_icons/{{ project.country}}/icon.svg" alt="" />
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 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 %}
We are attempting to move sites to Jekyll, and have a BS4 theme. In order to make it user friendly to the content managers, I've placed the following in my page layout:
<div class="container">
<div class="row">
<div class="col-md-12">
{{ content }}
</div>
</div>
</div>
However, I'd like to create a liquid tag or filter to allow for full-width images to be injected into the middle of the page. This would close the three container divs above the image, write out the image, and the create new divs below, and continue to write the markdown file. i.e.
{% fullwidth xenia-map.png %}
would produce something like this in the middle of the page:
</div>
</div>
</div>
<img src="input.jpg" class="img-responsive" />
<div class="container">
<div class="row">
<div class="col-md-12">
I have been able to create a filter and a tag (class) that will do 80%, however neither will write out closing tags at the beginning of the output. I just get the <img> tag.
Here's my class:
class FullWidth < Liquid::Tag
def initialize(tag_name, image, tokens)
super
#image = image.strip
end
def render(context)
"</div></div></div><img src='uploads/#{#image}' class='img-responsive'>"
end
end
Liquid::Template.register_tag('fw', FullWidth)
Your problem looks like an escaping issue.
Although I like the simplicity of your solution, I would consider two alternatives. The first ('include' solution) because it is easier to implement (anyone can make that one work). The second one ('javascript' solution) because it will allow your content editors to use a regular/graphical markdown editor and it will keep your markdown clean and reusable for other purposes.
'Include' solution
Just put an include in your markdown/html:
{% include fullwidth.html image="/uploads/xenia-map.png" %}
... and use this 'fullwidth.html':
</div>
</div>
</div>
<img src="{{ include.image }}" class="img-responsive" />
<div class="container">
<div class="row">
<div class="col-md-12">
'Javascript' solution
Use this markdown (or let a regular/graphical markdown editor generate this):
{: .fullwidth}
... and use this jQuery:
$(document).ready(function(){
$('img.fullwidth').each(function() {
var img = $(this).parent().html();
$(this).unwrap();
document.body.innerHTML = document.body.innerHTML.replace(img,
'</div></div></div>'+img+'<div class="container"><div class="row"><div class="col-md-12">');;
});
});
How do I display an image in Twig loaded from a Doctrine Fixture that I've uploaded to the web/images folder? It displays when calling it from the acutal Twig but not from fixtures or entering the line when creating the blog text.
I have tried this line which doesn't load when in a fixture file (or inside the blog body when creating the blog entry) BUT when I use this line inside of the actual Twig file it does the image correctly?
<img src="{{ asset(['images/', blog.image]|join) }}" />
Using this to display the blogs in twig:
{% autoescape false %}
<p>{{ blog.blog|truncate(2000) }}</p>
{% endautoescape %}
I think your missing a quote mark in example 2
try
changing:
<img class="alignleft" src="{{ asset('images/5375a30370200.jpeg) }}" alt="" width="290" height="275" />
to:
<img class="alignleft" src="{{ asset('/images/5375a30370200.jpeg') }}" alt="" width="290" height="275" />
Or set a new variable
{% set src = 'images/' ~ blog.image %}
<img class="alignleft" src="{{ asset( src ) }}" alt="" width="290" height="275" />
http://twig.sensiolabs.org/doc/tags/set.html
Turns out I have to use Twig's template_to_string function.