I created collection for portfolio contents in my Jekyll and I am currently able to list all images from any folder with this guide. But there are image files named with #2x for displaying sharp images on high density displays like image1.png, image1#2x.png etc.
So how do I exclude #2x image files in gallery and put in srcset="" property in <img> tag for generating responsive image gallery.
This is my sample .md file:
---
layout: work-detail
---
{% include screenshot.html folder="/images-folder/" %}
This is include file for generating gallery:
<div class="screenshot screenshot--grid">
{% for file in site.static_files %}
{% if file.path contains include.folder %}
{% if file.extname == '.jpg' or
file.extname == '.jpeg' or
file.extname == '.JPG' or
file.extname == '.png' or
file.extname == '.PNG' or
file.extname == '.JPEG' %}
{% assign filenameparts = file.path | split: "/" %}
{% assign filename = filenameparts | last | replace: file.extname,"" %}
<img src="{{ file.path }}" alt="">
{% endif %}
{% endif %}
{% endfor %}
</div>
If they are all named properly/consistently you could do:
{% unless file.path contains "#2x" %}
{% assign filepath2x = file.path | replace: file.extname,"#2x" | append: file.extname %}
<img src="{{ file.path }}" srcset="{{ filepath2x }} 1000w" />
{% endunless %}
Note that this code should replace (just) the output of the image tag, so this part:
<img src="{{ file.path }}" alt="">
What this code does is:
It prevents outputting images with "#2x" in the filename (it skips them).
It creates a new variable called 'filepath2x'. This variable is a copy of the file.path, but with ".extension" (.jpg) replaced by "#2x.extension" (#2x.jpg)
It outputs the image tag with an extra srcset attribute and fills this attribute with this new variable.
I have used a random srcset setting (1000w). Please adjust this to fit your project.
Related
Imagine a directory specified in pages' front matter:
---
...
assets: "/assets/<project-name>"
...
---
How can one determine the number of files in the assets' sub-directories? For example:
{% assign img_dir = page.assets | append: "img/" %}
{% if <files-in-img_dir>.length > 1 %}
// Render multiple images
{% else %}
// Render single images
{% end if %}
As of right now I'm using something like below, but I would like to be able to optimize (imports, build, etc.) based on the number of assets to render.
{% for asset in site.static_files %}
{% if asset.path contains img_dir %}
// Render
{% endif %}
{% endfor %}
Thanks.
I'm creating some templates with Twig and have an issue.
I'm trying to load a piece of html that is used several times troughout a webshop. So my idea is to create a reusable piece of code that I can load everytime when needed.
The problem I'm facing is that when I do a for loop and then include that piece of code I get an empty return. With other words my code doesn't recognize the data that need to be loaded for each product in the for loop. It returns empty info boxes.
To clarify:
I have a main template index.html which calls a snippet to include some products (don't look at rain extension!!):
{% if featured %}
{% include 'snippets/products.rain' with {'products': featured, 'type': 'grid'} %}
{% endif %}
My products.rain snippet looks like this:
{% if type %}
{% if type == 'grid' %}
{% for product in products %} {# Products in this case = feautured products #}
<li class="item clearfix">.... etc etc .... </li>
{% endfor %}
{% elseif type == 'other-layout' %}
<div class="item">.... etc etc .... </div>
{% endif %}
{% endif %}
In the for loop there's html that's for 95% the same as in each for loop. I want to place that code inside a block that can be included in the for loops.
So what I did was:
{% set product_html %}
.... a lot of html ....
<a href="{{ product.url | url }}" title="{{ product.fulltitle }}">
<img src="{{ product.image }}" width="100" height="100" alt="{{ product.fulltitle }}"/>
</a>
{% endset %}
And then included in the for loop, like so:
{% if type %}
{% if type == 'grid' %}
{% for product in products %} {# Products in this case = feautured products #}
<li class="item clearfix">{{ product_html | raw }}</li>
{% endfor %}
{% elseif type == 'other-layout' %}
<div class="item">{{ product_html | raw }}</div>
{% endif %}
{% endif %}
However this returns the html that is set however with empty product.image and empty product.fulltitle.
I tried the same with set block, but that has the same result.
Is there anything I'm doing wrong....??
When you are using {% set %}, content inside your variable is not dynamic, it will only use data in your current context, see it live.
You can achieve your goal using 2 ways: using include or using macros.
As your piece of code for a product is small and not reused somewhere else, I suggest you to use macros:
{% macro product_html(product) %}
Current product is: {{ product }}
{% endmacro %}
{% import _self as macros %}
{% for product in products %}
{{ macros.product_html(product) }}
{% endfor %}
See it live
I am trying out Jekyll to help someone who's not all that technical maintain their own static site. I would like to be able to have a images directory in the app's root /images containing images following a naming convention:
post_one_1.jpg, post_one_2.jpg, post_two_1.jpg, post_two_2.jpg ... etc.
I would then like for the user to create a post (post_one) and dynamically grab all of the images pertaining to that post from the images directory.
This plugin (https://gist.github.com/jgatjens/8925165) does almost exactly what I need, but isn't compatible with github pages.
Is there a solution in which I can hand the site off to a user and they would only need to add images to the image directory following the naming convention and then create a post and have access to the images?
Given you have a post file _posts/2015-05-28-post_one.md
From inside this post you have :
page.id = /2015/05/29/post_one
page.dir = /2015/05/29
In order to extract post_one whe do :
{% assign imgNameStart = page.id | remove: page.dir | remove: "/" %}
We now generate the base path we search for :
{% assign imgBasePath = imgNameStart | prepend: "/images/" %}
in this case it will be imgBasePath = "/images/post_one"
Loop over all our static files (files that are not pages or posts).
{% for img in site.static_files %}
And print images that have /images/post_one in their path like /images/post_one-01.jpg or /images/post_one-wathever-you-want.jpg
{% if img.path contains imgBasePath %}
<img src="{{ site.baseurl }}{{ img.path }}">
{% endif %}
{% endfor %}
All together :
{% assign imgNameStart = page.id | remove: page.dir | remove: "/" %}
{% assign imgBasePath = imgNameStart | prepend: "/images/" %}
{% for img in site.static_files %}
{% if img.path contains imgBasePath %}
<img src="{{ site.baseurl }}{{ img.path }}">
{% endif %}
{% endfor %}
Beware of code indentation if your post is a markdown file, four space indentation can be transformed to code snippet.
I'm trying to find a way to get an image to appear form a collections featured image. I'm able to successfully display an image but unable to access the proper location of the image.
{% if template == 'index' %}
{% for frontpage in collections %}
<h2>{{ frontpage.title }} Collection</h2>
{% if frontpage.image %}
<img src="{{ frontpage.image.src | frontpage_img_url: 'medium' }}" />
{% else %}
<img src="{{ frontpage.collections.first.featured_image | product_img_url: 'large' }}" alt="{{ frontpage.title | escape }}" />
{% endif %}
{% endfor %}
{% else %}
{% endif %}
The image link appears as /collections/test-product.png I need it to appear as https://cdn.shopify.com/s/files/1/0593/8633/collections/test-product_small.png?v=1406487979. How can I get this to work?
This article on the Shopify wiki gives an example of how to display a collection's featured image:
{% if collection.image %}
{{ collection.image.src | collection_img_url: 'medium' | img_tag: collection.title }}
{% else %}
{{ collection.products.first.featured_image.src | product_img_url: 'medium' | img_tag: collection.title }}
{% endif %}
Also see the docs for collection.image:
Returns the collection image. Use the collection_img_url filter to link it to the image file on the Shopify CDN.
And collection.image.src:
Returns the relative URL to the collection image.
In your code, use collection_img_url instead of frontpage_img_url.
You should also try frontpage.products.first.featured_image.src instead of frontpage.collections.first.featured_image.
How can I use Jekyll to test for the existence of a file?
To clarify, I want to run an {% if %} statement to check if an image file exists with the same name as the page I am on.
On my page in the YAML front matter:
----
reference-design: true
----
In my layout:
{% if page.reference-design %}
{% assign filename = page.path | remove_first: '.html' %}
<!-- How can I check if file actually exists? -->
<img src="images/reference_designs/{{ filename }}.png">
{% endif %}
As of Jekyll 2, all site files are available via site.static_files. You can use this to check if a file exists. For example:
{% for static_file in site.static_files %}
{% if static_file.path == '/favicon.ico' %}
{% assign favicon = true %}
{% endif %}
{% endfor %}
I had a similar problem to solve, but specifically looking for videos that matched the a specific directory / filename based on the markdown file.
Using file.size allowed me to test if the file (actually) exists.
{% for video in site.video-demos %}
{% assign path = page.id | replace: page.slug , "" | prepend: '/assets/media/video' | append: video.directory | append: page.slug | append: ".mp4" %}
{% assign file_exists = site.static_files | where: "path", path %}
{% if file_exists.size != 0 %}
{% include video-player.html filename = path title = video.title %}
{% endif %}
{% endfor %}
It loops through an array from my config to get part of the directory structure:
video-demos:
- title: iOS Voiceover Safari
directory: ios/
- title: Android Talkback Chrome
directory: android/
- title: Windows Jaws Chrome
directory: jaws/
- title: Windows NVDA Chrome
directory: nvda/
- title: MacOS Voiceover Safari
directory: macos/
This plugin worked for me: https://github.com/Wolfr/jekyll_file_exists
After you install it, you can use it like:
{% if page.reference-design %}
{% assign filename = page.path | remove_first: '.html' %}
{% capture img_exists %}{% file_exists {{ filename }}.png %}{% endcapture %}
{% if img_exists == "true" %}
<img src="images/reference_designs/{{ filename }}.png">
{% endif %}
{% endif %}
Read http://ecommerce.shopify.com/c/ecommerce-design/t/testing-if-a-file-exists-29624. Also you might be able to play with capture.