I'm trying to figure out if it's possible to add a specific class to an image in Jekyll depending on the image's dimensions. Basically I want to loop through a couple of images in a folder and add the correct class to the image depending on if the image is in landscape or portrait mode (i.e. if the width is bigger than the height and vice versa).
I've tried to do it with JavaScript, but I would prefer a method that would add the classes during the build process of the site instead of on page load.
This is the image loop:
<div class="model-gallery">
{% capture gallery_path %}pics/models/gallery/{{ page.title | slugify | replace: '-','' | replace: 'å','a' | replace: 'ä','a' | replace: 'ö','o' }}{% endcapture %}
{% for image in site.static_files %}
{% if image.path contains gallery_path %}
{{image.size}}
<img class="gallery-item" src="{{ site.baseurl }}{{ image.path }}" alt="{{page.title}}, {{site.title}}" />
{% endif %}
{% endfor %}
</div>
Any ideas?
Related
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.
Here is my unfinished site that I have made with pelican using the pelican-bootstrap3 template: http://snoek.ddns.net/~oliver/mysite/
In the pelican-bootstrap3 README, it says can use the AVATAR variable in the pelicanconf.py file to point to an image. I've done this but now the picture of me is on every page, which is a little ridiculous. I would like it only on my "About" page.
In pelican-themes/pelican-bootstrap3/templates/includes I found an aboutme.html file with the following in it:
<div id="aboutme">
{% if AVATAR %}
<p>
<img width="100%" class="img-thumbnail" src="{{ SITEURL }}/{{ AVATAR }}"/>
</p>
{% endif %}
{% if ABOUT_ME %}
<p>
<strong>{{ _('About') }} {{ AUTHOR }}</strong><br/>
{{ ABOUT_ME }}
</p>
{% endif %}
</div>
Maybe it is this file that could be edited to specify that the avatar should only show on the "About" page? But I'm not sure how.
Change
{% if AVATAR %}
To
{% if page and page.title == 'About' and (ABOUT_ME or AVATAR) %}
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.
When displaying an image in the collection section and having product preview images associated with a certain product, I receive duplicate copies of the product because I have image previews. Is this because I'm not calling for the first featured image?
<img src="{{ collection.products.first.featured_image | product_img_url: 'medium' }}">
Both images go to the same product. I figured out that because I have a preview image and a featured image it displays two identical products.
Here's the full source:
<div class="collectionfront">
{% for product in products %}
{% for image in product.images %}
<img src="{{ collection.products.first.featured_image | product_img_url: 'medium' }}"><h2><span>{{ product.title }}</span></h2>{{ product.price | money_with_currency }}{% if product.available %}<form action="/products/{{ product.handle }}"><span><button type="submit" class="shop-btn">Shop</button></span></form>{% else %}<p>Sold Out!</p>{% endif %}
{% endfor %}
{% endfor %}
</div>
I think it's because you're looping through each product image. Try removing your inner for loop {% for image in product.images %}.
Also, if you are displaying a featured image for a product and not a collection, you probably want product.featured_image instead of collection.products.first.featured_image.
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.