I am trying to make a jekyll blog with github-pages.
In order to get some pictures from a folder, I used this gist: https://gist.github.com/jgatjens/8925165
Now, I want to make it a little bit more flexible so that it would get a front matter variable ( page.folder ) and would return the images from there.
My problem is that whenever I assign a folder variable to the front matter and then pass it to the block like this:
{% loop_directory directory:page.folder iterator:image filter:*.jpg sort:descending %}
<div class="item">
<a class="content" href="{{ site.baseurl }}/{{ image }}" title="portfolio 2015">
<img src="{{ site.baseurl }}/{{ image }}"/>
</a>
</div>
{% endloop_directory %}
In the directory attribute it passes page.folder instead of, for example "images/portfolio" which is defined on the front matter. I am rather new at ruby so I can't find something refered to that problem. Is it a bug or something that I need to write correctly to pass the variable?
Did you tried:
{% loop_directory directory: {{page.folder}} iterator:image filter:*.jpg sort:descending %}
I had figured it using the context object to get the front matter attributes,
but unfortunately github / github-pages do not accept plugins (_plugins folder), so a day was wasted for that.
I resolved to github's solution, to create a _data folder and use a text-based (yaml) format to list all my extra assets in an organized way.
Related
I am using Jekyll to create a personal website. I am using the Beautiful-Jekyll template that is very popular. There is a navigation bar already defined in _config.yml. I want to make Resume link to my resume pdf.
I have accomplished that with this code (in _config.yml):
# List of links in the navigation bar
navbar-links:
Moi: "aboutme"
Projects:
- Hell Game: "http://deanattali.com/beautiful-jekyll/"
- Success City: "http://www.markdowntutorial.com/"
Resume: "Tech Resume.pdf"
However, this only opens the resume in the same tab. I want it to open in a separate tab. In HTML, you achieve this by using target="_blank". How do I do this in YAML?
I tried this but my index.html actually doesn't use links. I know, weird.
beautiful-jekyll/_includes/nav.html line 26:
{{ linkparts[0] }}
Change it into:
<a href="{{ linkparts[1] | relative_url }}"
{% if linkparts[1] contains '.pdf' %}target="_blank"{% endif %}
>{{ linkparts[0] }}</a>
Or use this (java)script/solution:
https://jekyllcodex.org/without-plugin/new-window-fix/
I have a website that consists out of a few 'slides'. Each has a fixed structure, used by some scripts, but variable content. I'm hosting it on github and am now trying to use Jekyll to make it easier to add new slides.
I already have each slide in a different html file, which I include in the main page: {% include_relative _slides/about.html %}. Now I'm trying to make it a markdown file, and I wanted to use front matter to make a layout that each slide's file could use. I can include a markdown file, and get it to render by doing:
{% capture myInclude %}{% include_relative _slides/test.md %}{% endcapture %}
{{ myInclude | markdownify }}
However, when I add a front-matter block to it with a layout defined in it, the layout doesn't get applied. It just gets rendered as a horizontal line (for the first ---) and then "layout: slide title: Test Slide —" in plain text.
Is there any way to fix this? Or perhaps a better way to break up my index.html and the slides in it?
Thanks a lot!
Note: Sorry if this was asked before, I Googled everything I could imagine it would be called.
I found something that works for me. I divided my template in two parts, the part above the content, and the part under it. Then in the file I include, there are two includes as well, one at the top and one at the bottom.
So my 'slide' files look like this:
{% include slide_start.html title="About" image="images/about.jpg" %}
... the content of the slide ...
{% include slide_end.html %}
As you can see, in the first include I give some parameters, these will be filled in and can be accessed with the liquid tags {{ include.something }}.
My slide_start.html looks like:
<div class="slide">
<div class="header">
<span>{{ include.title }}</span><!-- no whitespace
--><img src="{{ include.image }}" alt="{{ include.title }}"/>
</div>
<div class="content" markdown="1">
the slide_end.html is just two closing div tags.
You're trying to mix the page/post and the include strategies.
Page/post have a front matter and are decorated with a template, which can itself be decorated. `mypage.html -> layout: page -> layout: default.
Includes are included in page/post but they are only code parts. They cannot be decorated with a template.
You will have to choose.
Take a lool at https://github.com/shower/jekyller this can be helpfull.
I'm using LiipImagineBundle for an application built with symfony2 and I want to display a default image, when a image does not exists.
Let's say I have
<img src="{{ ('/profiles/foo.JPG') | imagine_filter('bar') }}" />
How could I display default.jpg when '/profiles/foo.JPG' does not exists?
Thanks,
This is an old question but the correct (and probably easiest) way to do this is to specify a default_image in the liip-imagine configuration file.
http://symfony.com/doc/current/bundles/LiipImagineBundle/configuration.html
Ok Martin Lie i have foud a link for you and i hope you will directly undeerstand the scenario because by default Twig can not test if a Phisicall object exists or not.. so you must create a service that will help you to make it directely in Twig...
Create a service for twig
Don't worry !
You test if the variable the image exist...
for example is you have sent your image from a controller
just make:
{% if image is defined %}
<img src="{{ image | imagine_filter('bar') }}" />
{% else %}
<img src="{{ ('/profiles/default.jpg') | imagine_filter('bar') }}" />
{% endif %}
I'm getting into Jekyll in a big way and would like to use it as a general front-end development platform, but am running up against the limitations of the Liquid templating language, specifically its difference to Django templating.
I discovered the liquid-inheritance gem, which adds the all-important Extends and Block syntax from Django. This blog post extends the gem further to suit Jekyll's file system:
http://www.sameratiani.com/2011/10/22/get-jekyll-working-with-liquid-inheritance.html
The problem is that it doesn't appear to implement blocks in exactly the same way Django does, which essentially renders the gem useless.
I have two jekyll "layouts" called - for the sake of understanding - parent.html and child.html. Neither of these contain YAML sections.
Parent
<html>
{% block foo %} {% endblock %}
</html>
Child
{% extends _layouts/parent.html %}
{% block foo %}
<div>
Bar comes next:
{% block bar %} {% endblock %}
</div>
{% endblock %}
And then I have a jekyll page which includes a YAML section thus:
---
title: test
---
{% extends _layouts/child.html %}
{% block bar %}My title is {{ page.title }} {% endblock %}
What I'd expect:
<html>
<div>
Bar comes next:
My title is test
</div>
</html>
What I get:
<html>
<div>
Bar comes next:
</div>
</html>My title is test
It seems something is failing to treat the blocks in mypage.html as being eligible for insertion into the suitable places of parent/child, although it's clearly still doing something.
I'm not a ruby developer and am reasonably new to Jekyll, so I need help identifying what part of this stack is failing. The liquid-inheritance issues on github suggest others are experiencing this block nesting problem: https://github.com/danwrong/liquid-inheritance/issues/3
I've tried several of the forks of liquid-inheritance, many of which apparently fix that problem regex, but none seem to solve this.
Is what i'm tring to do fundamentally impossible? It seems like I'm at least 85% of the way there and the final bit needs fixing.
I'm not sure this is ever going to work within Jekyll. I might be wrong, but here's my reasoning:
Each page is rendered out using do_layout in https://github.com/mojombo/jekyll/blob/master/lib/jekyll/convertible.rb
This works recursively - it processes the content of the page, then processes the page's layout, then that layout's layout and so on and so forth, passing the YAML variables up the chain (so they're always available in parent templates as {{ page.whatever}}).
This means that the only things which get passed up are the YAML values, and whatever the value of 'content' is after it has been processed by Liquid. I don't know how it is done elsewhere, but that seems incompatible with the idea of blocks, as they'd require you to pass up the two blocks separately.
Fundamentally, it seems to me that the issue is that Jekyll already has a simple form of inheritance - via the "layout" attribute that you can give to a layout. Fundamentally, I think that this is compatible with liquid-templating.
All that said, I'm not sure that you've exhausted the limits of using YAML, _includes, and template logic. If you're at the point of putting Django style blocks into your content, why not just do something like this:
Content:
---
title: some title
secondary_content: |
Here is some *secondary* content that will be [markdownified](http://example.com).
It can run to multiple lines and include
* Lists
* Good things
* Etc
---
And here is the main content, as per usual
Template:
<html>
<article>
<h1>{{ page.title }}</h1>
{{ content }}
</article>
<aside>
{{ page.secondary_content | markdownify}}
</aside>
If you wanted to keep your templates clean, and have different content for different types of pages, you could use various includes:
Template:
<aside>
{% include sidebar_negotiation.html %}
</aside>
_includes/sidebar_negotiation.html:
{% if page.type = 'foo' %}
{% include sidebar_foo.html %}
{% else if page.type = 'bar' %}
{% include sidebar_bar.html %}
{% endif %}
And then put your page type specific stuff in those files. Obviously you could include it directly, but it is probably nice to abstract it out. Those includes will get all of the variables in the YAML.
If none of this is a win, you could always try Hyde: http://hyde.github.com/ which is written in Python, uses Jinja2 (basically Django templates++), and does the same sort of thing.
It doesn't necessarily have to be something Jekyll uses.
Basically I'm creating a gallery that will use lightbox. I want to load all the images from a directory (_site\images\gallery) for the lightbox to display and their thumbnails (to be determined and created).
What would be the best way to go about this? I already have lightbox set up and tested (no thumbnails).
Thanks in advance.
Jekyll doesn't have a way to "list the contents of a folder".
You can do a very approximate thing by using the yaml front though.
In the "gallery page", include a section with the file names of the images:
---
images:
- a.jpg
- b.jpg
- c.jpg
<other properties, like title, etc>
---
Then, when you want to list your images, produce the links with a loop. I'm not familiar with lighbox's syntax for images, but it will probably look like similar to this:
<ul class="something">
{% for image in page.images %}
<li class="something">
<a rel="something" class="something" href="/path/to/images/dir/{{ image }}" />
</li>
{% endfor %}
</ul>
(I have put "something" on every place when I'm not sure about something. It might be possible that you will have to remove some "somethings" completely. You will have to modify /path/to/images/dir/ to where your images are)
Once the html is changed to work with lightbox, the only thing you have to do to add a new image is: a) putting it in the images directory and b) Edit the gallery page, and introduce the new image name in the list.
It's not as convenient as having the list "automatically generated", but it's very close.
Listing the jpg files in the current directory in Jekyll can be done like this:
{% for file in site.static_files %}
{% assign pageurl = page.url | replace: 'index.html', '' %}
{% if file.path contains pageurl %}
{% if file.extname == '.jpg' or file.extname == '.jpeg' or file.extname == '.JPG' or file.extname == '.JPEG' %}
<img src="{{ file.path }}" />
{% endif %}
{% endif %}
{% endfor %}
More about this solution can be found here: http://jekyllrb.com/docs/static-files/. I have created a lightbox extension for Jekyll that is listed on my page Jekyll without plugins. Check it out!
Try https://github.com/simoarpe/azores-image-gallery
DISCLAIMER: I'm the author.
I've tried some of the projects already available on Github but most of them are discontinued or partially working and in the end, I decided to implement something on my own starting from the good bits found around.
The result is Azores Image Gallery.
For a more detailed explanation check the README file.
I love Jekyll plugins.
Try one of these: Jekyll Gallery, Jekyll Gallery Generator, or Folder Gallery.
Check out the Ruby file for each plugin and modify the image tag generated to include the class for lightbox. That should do the trick. Don't forget to include the lightbox css file in your default template page.