I am using the jekyll responsive image plugin. I have a template like i should, and it can reach the template and the css. It does render a img code, but the path is wrong an it does not render any resized images.
Here is my template:
{% capture srcset %}
{% for i in resized %}
/{{ i.path }} {{ i.width }}w,
{% endfor %}
{% endcapture %}
{% capture class_caption_tuple %}
class="pic caption"
{% endcapture%}
{% capture class_pic_tuple %}
class="pic"
{% endcapture%}
{% if alt %}
{% capture alt_tuple %}
alt="{{ alt }}"
{% endcapture%}
{% endif %}
{% if width %}
{% capture width_tuple %}
width="{{ width }}"
{% endcapture%}
{% capture styled_width_tuple %}
style="width:{{ width }};"
{% endcapture%}
{% endif %}
{% if title %}
{% capture title_tuple %}
title="{{ title }}"
{% endcapture%}
{% endif %}
{% if class %}
{% capture class_pic_tuple %}
class="pic {{ class }}"
{% endcapture%}
{% capture class_caption_tuple %}
class="pic caption {{ class }}"
{% endcapture%}
{% endif %}
{% assign largest = resized | sort: 'width' | last %}
{% if caption %}
<div {{ class_caption_tuple | strip_newlines }} {{ styled_width_tuple | strip_newlines }}>
{% endif %}
{% if url%}
<a href="{{ url }}" target="_blank">
{% endif %}
<img src="/{{ largest.path }}" srcset="{{ srcset | strip_newlines }}" {{ alt_tuple | strip_newlines }}
{{ title_tuple | strip_newlines }} {{ class_pic_tuple | strip_newlines }} {{ width_tuple | strip_newlines }}>{%
if url%}</a>{% endif %}{% if caption %}{{ caption | strip_newlines }}</div>{% endif %}
Here is my config:
responsive_image:
# [Required]
# Path to the image template.
template: _includes/responsive-image.html
# [Optional, Default: 85]
# Quality to use when resizing images.
default_quality: 90
# [Optional, Default: []]
# An array of resize configuration objects. Each object must contain at least
# a `width` value.
sizes:
- width: 255
- width: 510
- width: 1020
# [Optional, Default: false]
# Rotate resized images depending on their EXIF rotation attribute. Useful for
# working with JPGs directly from digital cameras and smartphones
auto_rotate: false
# [Optional, Default: false]
# Strip EXIF and other JPEG profiles. Helps to minimize JPEG size and win friends
# at Google PageSpeed.
strip: false
# [Optional, Default: assets]
# The base directory where assets are stored. This is used to determine the
# `dirname` value in `output_path_format` below.
base_path: assets
# [Optional, Default: assets/resized/%{filename}-%{width}x%{height}.%{extension}]
# The template used when generating filenames for resized images. Must be a
# relative path.
#
# Parameters available are:
# %{dirname} Directory of the file relative to `base_path` (assets/sub/dir/some-file.jpg => sub/dir)
# %{basename} Basename of the file (assets/some-file.jpg => some-file.jpg)
# %{filename} Basename without the extension (assets/some-file.jpg => some-file)
# %{extension} Extension of the file (assets/some-file.jpg => jpg)
# %{width} Width of the resized image
# %{height} Height of the resized image
#
output_path_format: assets/responsive/%{width}/%{basename}
# [Optional, Default: true]
# Whether or not to save the generated assets into the source folder.
save_to_source: false
# [Optional, Default: false]
# Cache the result of {% responsive_image %} and {% responsive_image_block %}
# tags. See the "Caching" section of the README for more information.
cache: false
# [Optional, Default: []]
# By default, only images referenced by the responsive_image and responsive_image_block
# tags are resized. Here you can set a list of paths or path globs to resize other
# images. This is useful for resizing images which will be referenced from stylesheets.
extra_images:
- assets/foo/bar.png
- assets/bgs/*.png
- assets/avatars/*.{jpeg,jpg}
Here is my responsive img caller:
{% responsive_image path: "img/seo_img.png" alt: "Prolike" caption: "Caption." class: "center medium" %}
Here is the image i get.
<img src="/" srcset=" " alt="Prolike" class="pic center medium">
Why is does it render the path as "/"?
And why won't jekyll render the images.
Related
I have a problem with may came up with a new Ansible version, as it worked before:
I'm passing this block to the ansible template
- monitoring-test-blackbox_exporter:
source: "{{ consul_template_template_dir }}/blackbox_exporter.ctmpl"
destination: "/etc/prometheus/file_sd/blackbox_exporter.json"
create_dest_dirs: true
command_timeout: "60s"
error_on_missing_key: false
grafana_link: "xtkCtBkiz"
This is the template:
# Template configuration
{% for ctmpl in consul_template_templates_config_node %}
# {{ ctmpl | first }}
template {
{% for option, value in ctmpl.items() %}
{% if value is sameas true %}
{{ option }} = true
{% elif value is sameas false %}
{{ option }} = false
{% elif value is string %}
{{ option }} = "{{ value|string }}"
{% elif value is number %}
{{ option }} = {{ value|int }}
{% endif %}
{% endfor %}
ctmpl | first always worked before to filter out first element monitoring-test-blackbox_exporter this is important as we use it later in the template configuration.
I tried several things with sort and select attributes neither of them worked. Does anyone have an idea to get it working again?
I want to show the featured image of the product if it has no variants attributed to it, but if it does, I want to show the selected variant image via the product.selected_or_first_available_variant.image object.
However despite numerous attempts, on product pages with no variants I get the no image thumbnail which looks like this: http://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c.gif
These are the three approaches I have attempted below:
{% if product.variants.price < 1 %}
{% assign featured_image = product.featured_image | img_url: 'master' %}
{% else %}
{% assign featured_image = product.selected_or_first_available_variant.image | img_url: 'master' %}
{% endif %}
{% if product.variants.price == 0 %}
{% assign featured_image = product.featured_image | img_url: 'master' %}
{% else %}
{% assign featured_image = product.selected_or_first_available_variant.image | img_url: 'master' %}
{% endif %}
{% if product.variants.price == 'null' %}
{% assign featured_image = product.featured_image | img_url: 'master' %}
{% else %}
{% assign featured_image = product.selected_or_first_available_variant.image | img_url: 'master' %}
{% endif %}
None of them work. Why? What do I need to do to get value of no variants?
ALSO: I just tried "undefined" - didn't work either.
{% if product.variants.price == 'undefined' %}...
You can simply use .
{% if product.has_only_default_variant %}
You can see it in action here: product-has_only_default_variant
I'm accessing a page variable in a jekyll loop like below:
```ruby
{% assign kind = page.categories | first %}
{% for post in site.categories.[kind] | limit: 5 %}
{% unless post.url == page.url %}
<a href="{{ site.baseurl }}{{ post.url }}" class = 'post-url'>
<img src = '{{ site.baseurl }}/assets/{{ post.image }}.jpg>
<h2 itemprop="name headline">{{ page.title | escape }}</h2>
<time >{{ post.date | date: date_format }}</time>
</a>
{% endunless %}
{% endfor %}
```
Although the page builds successfully it outputs an error saying Expected page id but found open_square in "post in site.categories.[kind] | limit: 5"
How can I avoid this add still be able to use the page.categories | first variable?
Use site.categories[kind] instead of site.categories.[kind]
There shouldn't be any dot after "categories"
I'm trying to generate an Ansible template that increments on letters alphabetically rather than numbers. Is there a function similar to range(x) that could help me?
pseudo code example
{% for letter in range(a, d) %}
{{ letter }}
{% endfor %}
expected output
a
b
c
d
Alternatively is there a way to convert a number into it's alphabetical equivalent in Ansible?
{% for i in range(6) %}
{{ convert(i) }}
{% endfor %}
UPDATE
For those who are curious, here's how I ended up applying #zigam's solution. The goal was to create xml tags with every host from a hostgroup.
In my role defaults:
ids: "ABCDEFGHIGJKLMNPQRSTUVWXYZ"
In my template:
{% for host in groups['some_group'] %}
<host-id="{{ ids[loop.index] }}" hostName="{{ host }}" port="8888" />
{% endfor %}
You can iterate over a string:
{% for letter in 'abcd' %}
{{ letter }}
{% endfor %}
If you want to iterate over a range of the alphabet:
{% set letters='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ' %}
{% for letter in letters[:6] %} {# first 6 chars #}
{{ letter }}
{% endfor %}
you can use a custom filter plugin to do what you want
in filter_plugins/scratch_filter.py:
def scratch_filter(n):
return chr(n)
class FilterModule(object):
''' Number to Character filter '''
def filters(self):
return {
'scratch_filter': scratch_filter
}
in scratch-template.j2:
{% for x in range(101, 113) %}
{{ x|scratch_filter }}
{% endfor %}
in scratch_playbook.yml
---
- hosts: localhost
tasks:
- name: test loop
template:
src: "{{ playbook_dir }}/scratch-template.j2"
dest: "{{ playbook_dir }}/scratch-template-output.txt"
I'm working on custom solution for Shopify store and my problem is that I can't manage how to avoid adding ' / ' after the last matched tag in the case statement.
I've tried to use some if statements with a forloop filters with no result.
The last thing on my mind was finding the last matched tag in the loop that will help us avoiding ' / ' after the last element, but unfortunately I can't manage how to do that.
Expected result: Wool/Nylon/Viscose
Here is the part of the code that compares all tags assigned to the product with the list of tags(clothing materials) required for the output.
Considering that product has such tags as Wool, Nylon and Viscose and others, non material.
Example 1
Actual & Expected Result: WoolNylonViscose
{% for tag in product.tags %}
{% case tag %}
{% when 'Viscose' %}
Viscose
{% when 'Wool' %}
Wool
{% when 'Polyamide' %}
Polyamide
{% when 'Nylon' %}
Nylon
{% else %}
{% endcase %}
{% endfor %}
Example 2
Filter forloop.last was used to define the last element of the loop, but the problem is that material tags(Wool, Nylon, Viscose) can be in the middle of the product tag array. Considering product has 10 tags and material tags are spread among the array we will see next result.
Result: ///Wool/Nylon////Viscose//
{% for tag in product.tags %}
{% if forloop.last == true %}
{% case tag %}
{% when 'Viscose' %}
Viscose
{% when 'Wool' %}
Wool
{% when 'Nylon' %}
Nylon
{% else %}
{% endcase %}
{% else %}
{% case tag %}
{% when 'Viscose' %}
Viscose
{% when 'Wool' %}
Wool
{% when 'Nylon' %}
Nylon
{% else %}
{% endcase %}
/
{% endif %}
{% endfor %}
I would appreciate if you could please point on my mistakes and suggest me how can i achieve solution.
This should work:
{% capture tag_string %}{% endcapture %}
{% for tag in product.tags %}
{% if tag == 'Viscose' %}{% capture tag_string %}{{ tag_string }}Viscose/{% endcapture %}
{% elsif tag == 'Wool' %}{% capture tag_string %}{{ tag_string }}Wool/{% endcapture %}
{% elsif tag == 'Polyamide' %}{% capture tag_string %}{{ tag_string }}Polyamide/{% endcapture %}
{% elsif tag == 'Nylon' %}{% capture tag_string %}{{ tag_string }}Nylon/{% endcapture %}
{% endif %}
{% endfor %}
{{ tag_string | split: "" | reverse | join: "" | remove_first: "/" | split: "" | reverse }}
More on string filters: https://help.shopify.com/themes/liquid/filters/string-filters
You can try the following:-
{% for tag in product.tags %}
{% case tag %}
{% when 'Viscose' %}
{{ 'Viscose' | append: '/' }}
{% when 'Wool' %}
{{ 'Wool' | append: '/' }}
{% when 'Polyamide' %}
{{ 'Polyamide' | append: '/' }}
{% when 'Nylon' %}
{{ 'Nylon' }}
{% else %}
{% endcase %}
{% endfor %}