I have a variant option named "Trim" and it has values Brass, Bronze, Chrome, and Nickel. For each of these labels, I want to have a dynamic background image. Please see the image below.
I want to have background image on Trim option like this
So far, to achieve this, I have created a metafield named "trim_variant_bg" that takes a list of images and have written the following code.
{%- if option.name == "Trim" -%}
<label
style = "background-image:url(
{% for var_img in product.metafields.custom.trim_variant_bg.value %}
{{ var_img | img_url:"master" }}
{% endfor %}
)">
</label>
{% endif %}
However, the code is not working. How can I achieve the desired output? Please help.
If you structure your metafields like this
{"Bronze" : "your_url", "Gold" : ...}
You can just write
<label
style = 'background-image:url("{{product.metafields.custom.trim_variant_bg[option.value] | img_url: 'master'}}")'>
</label>
Be careful that you're using img_url so your URL in the metafields should take that into consideration. Otherwise you can save the final URL and not use any filter.
Related
I am a nunjucks newbie - trying it out along with eleventy.
Short version: can I use variables and filters within tags in nunjucks? For example:
{% set myVar = {{ title | lower }} %}
(assume the {{ title }} variable is set correctly)
Longer version / my specific use case:
I am trying to create a layout file called section.njk and use it for several pages (basically the section frontpages of each section of my site - similar idea to a section.html layout file in Hugo) I have a data file for each section, containing the menu for that section.
Given the following files:
guides.json
index.md with frontmatter including title: "Guides"
This does not work:
{% for item in {{ title | lower }} %}
<div>{{ item.title }}</div>
{% endfor %}
This works:
{% for item in guides %}
<div>{{ item.title }}</div>
{% endfor %}
So I'm wondering if the problem is using variables within tags in Nunjucks, and if so, if there's a way round it?
Entire project source is here: https://github.com/StarfallProjects/tech-writer-toolkit/tree/11ty (the 11ty stuff is in src)
Thanks for any help.
Yes, you can.
{% set myVar = title | lower %}
{% set myVar = title | lower + var2 | upper %}
{% set myVar = (title | lower + var2) | trim %}
...
{% for item in items | sort(false, true) %}
<div>{{ item.title | lower}}</div>
{% endfor %}
The lower, upper and trim filters are applyed to number/string vars. They can't be applyed for some array (or object).
On the another side, the sort-filter expects an array as input.
The filter "type" is obvious by its description in docs.
I am new to Jekyll, and I am working on a site where I want to have a navigation menu that uses the category names as the link text. However, I don't want the cat names ordered alphabetically or reversed, but in a different order. The only thing I could come up with is, defining a hash in the config file like this:
cats:
"a": "dogs"
"b": "cats"
"c": "spiders"
"d": "jiraffes"
and then for the navigation I have something like this (please don't laugh at this noobie, he he):
<ul>{% for cat_hash in site.cats %}{% for cat in cat_hash %}{% for page in site.pages %}{% if cat[1] == page.category %}
<li>{{ page.category }}</li>{% endif %}{% endfor %}{% endfor %}{% endfor %}
</ul>
Now, since I have many pages under each category, I would like to automate the process a bit, so I'm trying to use liquid code in the front matter like this:
---
layout: default
category: {{ site.cats["a"] }}
---
but of course this doesn't work. I've searched SO and found a solution using a plugin, but I can not use plugins for this site. Anybody has any idea? What I would like to do is:
Have the categories sorted in any order I want, (not alphabetically).
Automate the cat name generation in the front matter
Thank you in advance.
A possible solution :
Ordering is not the problem and I think that the _config.yml seems to do it.
The problem is to automatically match a page to a category without having to write the category name in the pages's front matter.
My idea is then to match a category to a folder. Any file present in the cats folder will be considered to be part of the cats category, and then appear in the right menu.
--cats
|--cat1.md
|--cat2.md
|--
--dogs
|--dog1.md
|--dog2.md
|--
--spiders
|--spider1.md
Then the _config.yml can be changed a little to give a match between folder name and display in the menu.
categories:
dogs:
display: Doggies
cats:
display: I love catz
spiders:
display: Spiders
Now we can easily match our pages to a category and display everything in a menu :
{% for cat in site.categories %}
<h2>{{ cat[1].display }}</h2>
<ul>
{% for page in site.pages %}
{% if page.dir contains cat[0] %}
<li>{{ page.title }}</li></li>
{% endif %}
{% endfor %}
</ul>
{% endfor %}
Et voilà !
So i'm basically trying to use the logic of shopify to show an image if the tags of the product contains the words "related"
(there is a json query that picks up the tags containing 'related-x' where x is the name of the product and it uses this to show the related products.)
Preceding the Json query is an image that says "related products" basically. what i would like to do is to only display this when there are "related" tags present.
I have tried this:
{% if product.tags contains 'related' %}
<img src="{{ 'complete-this-look.gif' | asset_url }}" alt="" align="left;" style="vertical-align:top; margin-right:8px; padding-top:0px;" width="130" height="175"/>
{% endif %}
Which doesnt display anything. I also tried:
{% for t in product.tags %}
{% if t contains 'related-' %}
<img src="{{ 'complete-this-look.gif' | asset_url }}" alt="" align="left;" style="vertical-align:top; margin-right:8px; padding-top:0px;" width="130" height="175"/>
{% endif %}
{% endfor %}
However this will display the image every time a related product is returned by the query.
What im after is for it to go (Image) (Query Results) - and if there is no query results then it displays nothing.
Any ideas?
The reason your first piece of code is not working is because contains is looking for a tag called 'related', not a tag containing the substring 'related'.
See the Shopify Wiki for contains where it states:
It can check for the presence of a string in another string, or it can check for the presence of a string in an array of simple strings.
In your instance, contains is checking for a string in an array of simple strings (and is looking for the whole string, not a string containing the specified string as a substring).
See also the Shopify wiki for product.tags:
Returns a list of the product's tags (represented by simple strings).
You can use the contains keyword with an array of simple strings, so
you can use this with a product's tags:
{% if product.tags contains 'custom to order' %}
<!-- Output custom to order form HTML here -->
{% endif %}
So, Gerard Westerhof's suggestion to use Join in the comment above is a good one. If you first join the product.tags array, then contains will search for the 'related' string inside the string of tags returned by join.
Try this:
{% if product.tags | join: ' ' contains 'related' %}
<img src="{{ 'complete-this-look.gif' | asset_url }}" alt="" align="left;" style="vertical-align:top; margin-right:8px; padding-top:0px;" width="130" height="175"/>
{% endif %}
EDIT:
Try this instead:
{% assign product_tags_string = product.tags | join: ' ' %}
{% if product_tags_string contains 'related' %}
<img src="{{ 'complete-this-look.gif' | asset_url }}" alt="" align="left;" style="vertical-align:top; margin-right:8px; padding-top:0px;" width="130" height="175"/>
{% endif %}
I use Twig and I want to make the following content translatable :
{% trans %}
You have actually <span class='messageNumber'>{{messageNumber}} message(s)</span> in your mailbox.
{% endtrans %}
But when this translatable content will be parsed by POEdit and sent to translators, they will see the <span> tags and attributes. What can I do to avoid this ?
I thought about doing this way :
{% messageNumberFormatted = "<span class='messageNumber'>"~messageNumber~"message(s)</span>" %}
{% trans %}
You have actually {{messageNumberFormatted}} in your mailbox.
{% endtrans %}
But isn't it a bit heavy or even bad practice for the translators ? In that case, they can't even see the word "message".
First, you should use transchoice with explicit interval pluralization, like this :
{% transchoice message_count %}
{0}You have {{no messages}} yet|{1}You have {{one message}}|]1,+Inf]You have {{%count% messages}}.
{% endtranschoice %}
Then maybe you could use replace to replace {{ with the opening tag, and }} with the closing tag. I don't know whether you can directly chain like this
{% transchoice message_count | replace('...') %}
Or if you must store in a variable by using set first.
You can use the trans twig filer with keys representing your sentences.
{{ you.have.actually|trans }} <span class='messageNumber'> {{ messageNumber message|trans }} </span> {{ in.your.mailbox|trans }}
I am using the standard jekyll installation to maintain a blog, everything is going fine. Except I would really like to tag my posts.
I can tag a post using the YAML front matter, but how do I generate pages for each tag that can will list all posts for a tag?
Here is a solution with alphabetically sorted tags on a single page.
It uses Liquid only, which means that it works on GitHub Pages:
{% capture tags %}
{% for tag in site.tags %}
{{ tag[0] }}
{% endfor %}
{% endcapture %}
{% assign sortedtags = tags | split:' ' | sort %}
{% for tag in sortedtags %}
<h3 id="{{ tag }}">{{ tag }}</h3>
<ul>
{% for post in site.tags[tag] %}
<li>{{ post.title }}</li>
{% endfor %}
</ul>
{% endfor %}
You can see it in action here.
EDIT:
There's also a way to generate a separate page for each tag without plugins (which will work on GitHub Pages).
I have a more detailed explanation on my blog:
Separate pages per tag/category with Jekyll (without plugins)
First, you need a new layout file:
/_layouts/tagpage.html:
---
layout: default
---
<h1>{{ page.tag }}</h1>
<ul>
{% for post in site.tags[page.tag] %}
<li>
{{ post.date | date: "%B %d, %Y" }}: {{ post.title }}
</li>
{% endfor %}
</ul>
With this layout file, you can add a new tag page by adding a new file with just two lines of YAML front-matter.
Here's an example for the jekyll tag:
/tags/jekyll/index.html:
---
layout: tagpage
tag: jekyll
---
The only disadvantage of this approach: each time you use a new tag for the first time, you have to remember to create a new two-line file for it.
To generate the root index file (i.e. the list of tags that links to /tags/jekyll/index.html etc.), you can use a similar solution like the one on top of this answer where I generate a single page with alphebetically sorted tags:
{% capture tags %}
{% for tag in site.tags %}
{{ tag[0] }}
{% endfor %}
{% endcapture %}
{% assign sortedtags = tags | split:' ' | sort %}
{% for tag in sortedtags %}
{{ tag }}<br>
{% endfor %}
This will generate a list of links like this:
<ul>
<li>.net</li>
<li>authentication</li>
<li>backup</li>
</ul>
Note that this solution uses a blank to split tags, so it doesn't work when your tags contain blanks and Yevgeniy Brikman's comment applies here as well.
This gist will generate a page per category for you: https://gist.github.com/524748
It uses a Jekyll Generator plugin, plus a Page subclass.
Have a look at sites using jekyll. There are a few custom forks which have implemented tagging functionality, hopefully also in the way you want :-)
I had the same question, and stumbled upon this: http://gist.github.com/143571.
It's a rake task which generates a tag list. I modified it slightly, and my version is at:
http://github.com/mattfoster/mattfoster.github.com/blob/master/Rakefile.
Whilst this doesn't give you a page per tag, you can use anchors, which is half way there!
I use the great Jekyll Tagging plugin that automatically generates a tags cloud and tag pages. Easy to install and use.
Here is a page for the "photo" tag on my blog (in french), and you can see the tags cloud in the bottom.
Based on Christian's answer above I made a bash script that does what he described.
https://github.com/ObjectiveTruth/objectivetruth.github.io/blob/master/rebuild_tags.sh
Be sure to have the accompanying 14 line vim script in the /non_website_resources/ directory
AND
Make the /_layouts/tagpage.html shown in Christian's answer above but rename it to /_layouts/tag_pages.html
File structure should be like this:
.jekyll_website_root
├── _posts
├── _layout
│ ├── tag_pages.html
├── rebuild_tags.sh
Run from the root directory ./rebuild_tags.sh
If you get permission denied error be sure to run chmod 777 rebuild_tags.sh
If you look at scripts comments its fairly simple:
Uses sed to find all the tags in every .md file in _post directory
Uses sed to massage the data to proper format
Takes all the unique tags and makes a directory and a index.html for each
This way, if you have any new tags, just run the script to rebuild the pages before pushing to github
A nice simple non-plugin way to do tags
EDIT
Removed dependency on other files. Just need the one script!
I do these with CSS. First lists an element and use the tag name as its id.
<span id="{{ site.posts | map: 'tags' | uniq | join: '"></span><span id="' }}"></span>
And then lists all the post and use its tags as a value for the "tags" custom attribute.
{% for post in site.posts %}
<article class="post" tags="{% for tag in post.tags %}{{tag}}{% if forloop.last == false %}{{" "}}{% endif %}{% endfor %}">
<h3>{{post.title}}</h3>
</article>
{% endfor %}
And then in CSS, hide all the posts by default, and only show posts with tags matches the url id/ hash
.post {
display: none;
}
{% for tag in site.tags %}#{{tag[0]}}:target ~ [tags~={{tag[0]}}]{% if forloop.last == false %}, {% endif %}{% endfor %} {
display: block;
}
/*
The compiled version will look like this
#tagname:target ~ [tags~="tagname"], #tagname2:target ~ [tags~="tagname2"] {
display: block;
}
*/
I made an article about this here.