An if-statement based on src HTML - html

I have big html document with various images with href and src.
I want to make an if statement based on the output of the src.
<img class="img-fluid d-block w-100" src="/static/assets/img/{{ LANGUAGE_CODE }}/actionFlow({% if form.status.value|slugify == '1'%}taak-toegewezen{% else %}{{form.status.value|slugify}}{%endif%}).png" id="workflowVisual">
Example outputs can be:
"/static/assets/img/en/actionFlow(taak-toegewezen).png"
"/static/assets/img/en/actionFlow(firststep).png"
Now, I want to create an if statement like so:
{% if src== "/static/assets/img/en/actionFlow(taak-toegewezen).png"}{{instance.reviewer2}}
{% else src== "/static/assets/img/en/actionFlow(firststep).png"}{{instance.reviewer1}}{%endif%}
How do I do this in HTML?
Best,
Rob

You seem to use django templating, which is not just HTML.
You can set variables using {% with variable = 1 %}:
{% if form.status.value|slugify == '1' %}
{% with SLUG = 'taak-toegewezen' %}
{% else %}
{% with SLUG = form.status.value|slugify %}
{% endif %}
{% with imgSrc = "/static/assets/img/"|addstr:LANGUAGE_CODE|addstr:"/actionFlow("|addstr:SLUG|addstr:").png" %}
And now it's way easier to use in a if statement.
{% if imgSrc == "/static/assets/img/en/actionFlow(taak-toegewezen).png" %}
{{instance.reviewer2 }}
{% else if imgSrc == "/static/assets/img/en/actionFlow(firststep).png" %}
{{instance.reviewer1 }}
{% else %}
Default value
{% endif %}

Related

Idiomatic way in Jekyll to inherit default data if project specific data unavailable

I am completely new to Jekyll. I did something like this:
{% assign top_nav = site.data.menus %}
{% if site.data.orgs[site.orgData].menus %}
{% assign top_nav = site.data.orgs[site.orgData].menus %}
{% endif %}
<ul>
{% for menu in top_nav %}
<li>
{{ menu.title }}
</li>
{% endfor %}
</ul>
Basically, I will grab an array of navigation items from a default folder. But if I notice the existence of a menu for a specific organization, then I will override the menu provided by the default folder.
What I don't like about this approach is I now have hundreds of places in my jekyll templates that does this if statement check. If this were any other scripting programming language, I would define a function like function($org_name,$prop) {return $site.data.orgs[$org_name][$prop] ? $site.data.orgs[$org_name][$prop] : $site.data[$prop]; } . What would be the idiomatic way to achieve the same objective in jekyll?
I tried a variation of David Jacquel's suggestion by doing this
./org_var.html
{% assign prop = include.prop %}
{% assign orgVar = site.data[prop] %}
{% if site.data.orgs[site.orgData][prop] %}
{% assign orgVar = site.data.orgs[site.orgData][prop] %}
{% endif %}
./_include/nav.html
{% include_relative ../org_var.html prop=menus %}
{% for menu in orgVar %}
... print menu items
./_layout/header.html
{% include_relative ../org_var prop='electronics.televisions' %}
{% for tv in orgVar%}
{{ tv.modelName }}
... print tv values
{% endfor %}
But I get a syntax error in ../org_var.html saying {% include_relative file.ext param='value' param2='value' %} . The documentation says I can't use relative path with include or include_relative. How do I make my org_var.html a reusable and global function? And will electronics.televisions even evaluate properly to the proper path of my site.data.org.[site.orgData][...path] variable?
Just realized there is a default: modifier for a variable like smarty templates.
{% assign top_nav = site.data.orgs[site.orgData].menus | default: site.data.menus %}
You can use Jekyll includes.
From anywhere you want to use your include :
{% include nav.html org_name=org_name prop=prop %}
Will call _include/nav.html that can be something like this :
{% assign org_name = include.org_name %}
{% assign prop = include.prop %}
{% if site.data.orgs[org_name][prop] %}
{% assign top_nav = site.data.orgs[site.orgData].menus %}
{% else %}
{% assign top_nav = site.data.orgs[site.orgData].menus %}
{% endif %}
<ul>
{% for menu in top_nav %}
...

Language switching in Hubspot CMS

What is the best way to make custom language switcher to the site.
My problem is that I have a site with two language versions and my custom language switcher is a bit problematic I would say. It doesn't work in all pages for some reason and in my opinion is it coded in very complicated way. In our site the language versions are changed via url. For example mycompany.fi/ is the main language version and the mycompany.fi/en/ is for the english version of the site. Here is the code how I switch language currently by just changing the url. In the code it checks the url and also if the page has translated_content. After that I put the site_language and other_language to links so by pressing the link it changes the language.
{% if absolute_url is string_containing "/en-us/" %}
{% set site_language = 'en' %}
{% set other_language = 'fi' %}
{% if content.translated_content['fi-fi'] %}
{% set other_language_url = '/' + content.translated_content['fi-fi'].slug %}
{% elif content.translated_content['fi'] %}
{% set other_language_url = '/' + content.translated_content['fi'].slug %}
{% else %}
{% set other_language_url = '#' %}
{% endif %}
{% elif absolute_url is string_containing "/en/" %}
{% set site_language = 'en' %}
{% set other_language = 'fi' %}
{% if content.translated_content['fi-fi'] %}
{% set other_language_url = '/' + content.translated_content['fi-fi'].slug %}
{% elif content.translated_content['fi'] %}
{% set other_language_url = '/' + content.translated_content['fi'].slug %}
{% else %}
{% set other_language_url = '#' %}
{% endif %}
{% else %}
{% set site_language = 'fi' %}
{% set other_language = 'en' %}
{% if content.translated_content['en-us'] %}
{% set other_language_url = '/' + content.translated_content['en-us'].slug %}
{% elif content.translated_content['en'] %}
{% set other_language_url = '/' + content.translated_content['en'].slug %}
{% else %}
{% set other_language_url = '#' %}
{% endif %}
{% endif %}
I'm wondering is there any other way to make this happen because for me this seems very complicated solution. I would like to know if there is some global variable or something what defines the current language used in the page.

How can I concatenate a string using Jinja for loop?

I am trying to iteratively concatenate a string to build url params with a 'for' loop, but I believe I am having scoping issues.
The output should be: url_param = "&query_param=hello&query_param=world"
array_of_objects = [{'id':'hello'},{'id':'world'}]
{% set url_param = "" %}
{% set array_of_ids = array_of_objects|map(attribute='id')|list%} // correctly returns [1,2]
{% for id in array_of_ids %}
{% set param = '&query_param='~id %}
{% set url_param = url_param~param %}
{% endfor %}
//url_param is still an empty string
I also tried namespace(), but to no avail:
{% set ns = namespace() %}
{% set ns.output = '' %}
{% set array_of_ids = array_of_objects|map(attribute='id')|list%} // correctly returns [1,2]
{% for id in array_of_ids %}
{% set param = '&industries='~id%}
{% set ns.output = ns.output~param %}
{% endfor %}
//ns.output returns namespace
That is indeed a scope issue. One "hacky" way of dealing with this is using a list that you append to like so:
{% set array_of_objects = [{'id':'hello'},{'id':'world'}] %}
{% set array_of_ids = array_of_objects|map(attribute='id')|list%}
{{ array_of_ids|pprint }} {# output: ['hello', 'world'] #}
{% set ids = [] %} {# Temporary list #}
{% for id in array_of_ids %}
{% set param = '&query_param='~id %}
{% set url_param = url_param~param %}
{{ ids.append(url_param) }}
{% endfor %}
{{ ids|pprint }} {# output: [u'&query_param=hello', u'&query_param=world'] #}
{{ ids|join|pprint }} {# output: "&query_param=hello&query_param=world" #}
The above gets you what you need, but for this specific example I would take a look at using jinja's join filter. It's more declarative and feels a little less hacky.
{% set array_of_objects = [{'id':'hello'},{'id':'world'}] %}
{# set to a variable #}
{% set query_string = "&query_param=" ~ array_of_objects|join("&query_param=", attribute="id") %}
{{ query_string|pprint }}
{# output: u'&query_param=hello&query_param=world' #}
{# or just use it inline #}
{{ "&query_param=" ~ array_of_objects|join("&query_param=", attribute="id") }}
You should change the initialization of your namespace.
Here is an example from the docs that will help you out:
{% set ns = namespace(found=false) %}
{% for item in items %}
{% if item.check_something() %}
{% set ns.found = true %}
{% endif %}
* {{ item.title }}
{% endfor %}
Found item having something: {{ ns.found }}

Twig set reusable piece of html

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

Why Jekyll's Liquid 'contains' returns a string?

I try to assign to a variable a true or false value depending on whether a string contains another string. I use the following code:
{% assign external_link = link.href contains '://' %}
For this snippet the external_link's value will be the same as the link.href's value (I checked the value of the external_link with the command {{ external_link }}).
I will get the same result even if I put parenthesizes around the right side:
{% assign external_link = (link.href contains '://') %}
What is the problem, and how can I get a true/false result of the contains expression?
You can use the capture filter tag to get the result of the contains tag:
{% assign link = "http://example.com "%}
{% capture has_link %}{% if link contains '://' %}Yes{% else %}No{% endif %}{% endcapture%}
{{has_link}}
{% assign link = "example.com "%}
{% capture has_link %}{% if link contains '://' %}Yes{% else %}No{% endif %}{% endcapture%}
{{has_link}}
Another option without capture
{% assign link = "http://example.com "%}
{% if link contains '://' %}
{% assign has_link = "yes" %}
{% else %}
{% assign has_link = "no" %}
{% endif %}
{{has_link}}
{% assign link = "example.com "%}
{% if link contains '://' %}
{% assign has_link = "yes" %}
{% else %}
{% assign has_link = "no" %}
{% endif %}
{{has_link}}
Output:
yes
no