{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{%- if section.settings.adapt_height_first_image and section.settings.image != blank -%}
{%- style -%}
#media screen and (max-width: 749px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before,
#Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
#media screen and (min-width: 750px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
{%- endstyle -%}
{%- endif -%}
{%- style -%}
#Banner-{{ section.id }}::after {
opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
}
{%- endstyle -%}
<div id="Banner-{{ section.id }}" class=" {{ section.settings.show_on_device }} banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.adapt_height_first_image and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}">
{%- if section.settings.image != blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
{%-liquid
assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
if section.settings.image_2 != blank
assign image_class = "banner__media-image-half"
endif
if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
assign sizes = "(min-width: 750px) 50vw, 100vw"
elsif section.settings.image_2 != blank
assign sizes = "50vw"
else
assign sizes = "100vw"
endif
-%}
{{ section.settings.image | image_url: width: 1500 | image_tag:
loading: 'lazy',
width: section.settings.image.width,
height: image_height,
class: image_class,
sizes: sizes,
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
alt: section.settings.image.alt | escape
}}
</div>
{%- elsif section.settings.image_2 == blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
{%- if section.settings.image_2 != blank -%}
<div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}">
{%-liquid
assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
if section.settings.image != blank
assign image_class_2 = "banner__media-image-half"
endif
if section.settings.image != blank and section.settings.stack_images_on_mobile
assign sizes = "(min-width: 750px) 50vw, 100vw"
elsif section.settings.image != blank
assign sizes = "50vw"
else
assign sizes = "100vw"
endif
-%}
{{ section.settings.image_2 | image_url: width: 1500 | image_tag:
loading: 'lazy',
width: section.settings.image_2.width,
height: image_height_2,
class: image_class_2,
sizes: sizes,
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
alt: section.settings.image_2.alt | escape
}}
</div>
{%- endif -%}
<div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width">
<div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
<h2 class="banner__heading {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
<span>{{ block.settings.heading | escape }}</span>
</h2>
{%- when 'text' -%}
<div class="banner__text {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
<span>{{ block.settings.text | escape }}</span>
</div>
{%- when 'buttons' -%}
<div class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
{%- if block.settings.button_label_1 != blank -%}
<a{% if block.settings.button_link_1 == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link_1 }}"{% endif %} class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}">{{ block.settings.button_label_1 | escape }}</a>
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
<a{% if block.settings.button_link_2 == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link_2 }}"{% endif %} class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}">{{ block.settings.button_label_2 | escape }}</a>
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>
I tried adding on min-width: 750px display: none; but didn't work. I'm looking to hide this section on shopify theme (dawn).
even tried with !important. Tried also doing banner-{ display none.
Add this to the bottom of your snippet, this should hide the section wrapper that Shopify wraps your section code with, if screen width is 750px or more.
<style>
#media screen and (min-width: 750px){
#shopify-section-{{ section.id }} {
display: none;
}
}
</style>
Related
I created product cards to display on a collection page in shopify where variants are displayed as different poducts. Everything is working well ( its displayed the correct price of each variant / name and everything ) but the variant image that I have to provide through background-image shows the default product image not the variant image. I tried to place the background-image assignement to inline style and than it worked. The problem is that I cannot assign the background image for the :before pseudo class through inline.
<div class="custom-card-product-folder">
<div class="custom-card-product-folder-2"></div>
<h6 class="custom-card-product-product-title" >{{ card_variant.title | escape }}</h6>
<div class="custom-card-product-product-price {% unless card_variant.compare_at_price == blank %}red{% else %}black{% endunless %}"><span class="grey line-through {% unless card_variant.compare_at_price == blank %}margin-right-ten{% endunless %}">{{ card_variant.compare_at_price | money}}</span> {{ card_variant.price | money}}</div>
<div class="custom-card-product-toggle-wrapper">
{% for option in card_product.options_with_values %}
{% if option.name == "Anzahl" %}
{% for value in option.values %}
<div class="custom-card-product-toggle-value {{ value }}" {% for variant in card_product.variants %}{% if variant.title contains value %}variant-title="{{ variant.title }}" variant-price="{{ variant.price | money }}" variant-image="{{ variant.image | img_url }}"{% break %}{% endif %}{% endfor %}>{{ value | escape }}</div>
{% endfor %}
<div class="custom-card-product-toggle-active-value-overlay"></div>
{% endif %}
{% endfor %}
</div>
</div>
<script>console.log({{ card_variant | json }});</script>
<style>
.custom-card-product-folder-2:before {
background-image: url({{ card_variant.featured_image.src | product_img_url: '700x'}}) !important;
}
.custom-card-product-product-image {
background-image: url({{ card_variant.featured_media.preview_image.src | product_img_url: '700x'}});
}
</style>
I don't fully understand the problem of your code. But regarding assigning a before without using inline style, you can do something like this.
...
<div id="variant-card-{{variant.id}}"
...
<style>
{% for variant in card_product.variants %}
#variant-card-{{variant.id}}:before {
background-image: url('{{ variant.featured_image.src | product_img_url: '700x'}}') !important;
}
{% endfor %}
</style>
My code will capture items from the data file. I need those to be comma separated. I've had no luck!
Data File socialmedia.yml
facebook:
id: 'dpcgco'
href: 'https://www.facebook.com/'
title: 'Facebook'
fa-icon: 'fa-facebook-square'
twitter:
id: 'DenverProphitJr'
href: 'https://www.twitter.com/'
title: 'Twitter'
fa-icon: 'fa-twitter-square'
I have tried this. It doesn't comma separate them, though:
"sameAs":[
{% if site.data.socialmedia %}
{% assign sm = site.data.socialmedia %}
{% for entry in sm %}
{% assign key = entry | first | split%}
{% if sm[key].id %}
{% capture social %}{{ sm[key].href }}{{ sm[key].id }}{% endcapture %}
{{ social | replace: " ", "," | jsonify }}
{% endif %}
{% endfor %}
{% endif %}
],
Desired Output Format:
"sameAs": [
"http://www.facebook.com/your-profile",
"http://instagram.com/yourProfile",
"http://www.linkedin.com/in/yourprofile",
"http://plus.google.com/your_profile"
]
Actual Invalid Output:
"sameAs":[ "https://www.facebook.com/dpcgco" "https://www.twitter.com/DenverProphitJr" ],
You have to check if an item is the last in the forloop.last.
{% if site.data.socialmedia %}
{% assign sm = site.data.socialmedia %}
"sameAs":[
{% for entry in sm %}
{% assign key = entry | first %}
{% if sm[key].id %}"{{ sm[key].href }}
{{ sm[key].id }}",
{% if forloop.last %}
"{{ sm[key].href }}{{ sm[key].id }}"
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
],
My Jekyll version is 3.8.6.
If I have too many elseif I get a for logic error where no for loop was written. If I remove one elseif, it works.
This does not work:
{% if page.jsontype == "page" %}
{% include pageJSONLD.html %}
{% elsif page.jsontype == "collection" %}
{% include collectionJSONLD.html %}
{% elsif page.jsontype == "post" %}
{% include postJSONLD.html %}
{% elsif page.jsontype == "about" %}
{% include aboutJSONLD.html %}
{% elsif page.jsontype == "lawyer" %}
{% include lawyerJSONLD.html %}
{% elsif page.jsontype == "contact" %}
{% include contactJSONLD.html %}
{% else %}
{% include homeJSONLD.html %}
{% endif %}
This Works!
{% if page.jsontype == "page" %}
{% include pageJSONLD.html %}
{% elsif page.jsontype == "post" %}
{% include postJSONLD.html %}
{% elsif page.jsontype == "about" %}
{% include aboutJSONLD.html %}
{% elsif page.jsontype == "lawyer" %}
{% include lawyerJSONLD.html %}
{% elsif page.jsontype == "contact" %}
{% include contactJSONLD.html %}
{% else %}
{% include homeJSONLD.html %}
{% endif %}
The error I get with the additional elsif is
Jekyll Feed: Generating feed for posts
Liquid Exception: Liquid syntax error (/home/xxxxx/repositories/legal/_includes/_head.html line 100): 'for' tag was never closed included in /_layouts/default.html
Error: Liquid syntax error (/home/xxxx/repositories/legal/_includes/_head.html line 100): 'for' tag was never closed included
Error: Run jekyll build --trace for more information.
Line: 100 is {% elsif page.jsontype == "lawyer" %}.
Edit 1:
I have got the same error when using case/when
{% case page.jsontype %}
{% when 'page' %}
{% include pageJSONLD.html %}
{% when 'collection' %}
{% include collectionJSONLD.html %}
{% when 'post' %}
{% include postJSONLD.html %}
{% when 'about' %}
{% include aboutJSONLD.html %}
{% when 'lawyer' %}
{% include lawyerJSONLD.html %}
{% when 'contact' %}
{% include contactJSONLD.html %}
{% else %}
{% include homeJSONLD.html %}
{% endcase %}
It still shows the same error pointing to the end of the head file.
In my tests with Jekyll 3.8.5 and Jekyll 4.0.0 both scenarios worked like a charm, no errors, no limitations:
If/else:
{% if page.jsontype == "page" %}
{% include 1.html %}
{% elsif page.jsontype == "collection" %}
{% include 2.html %}
{% elsif page.jsontype == "post" %}
{% include 3.html %}
{% elsif page.jsontype == "about" %}
{% include 4.html %}
{% elsif page.jsontype == "lawyer" %}
{% include 5.html %}
{% elsif page.jsontype == "contact" %}
{% include 6.html %}
{% else %}
{% include 7.html %}
{% endif %}
Case/When:
{% case page.jsontype %}
{% when 'page' %}
{% include 1.html %}
{% when 'collection' %}
{% include 2.html %}
{% when 'post' %}
{% include 3.html %}
{% when 'about' %}
{% include 4.html %}
{% when 'lawyer' %}
{% include 5.html %}
{% when 'contact' %}
{% include 6.html %}
{% else %}
{% include 7.html %}
{% endcase %}
Any missing {% endfor %}, also within the includes files, showed the same error message but the correct line:
Liquid Exception: Liquid syntax error (C:/Users/User/Desktop/ruby_projects/jekyll_test/testpage/_includes/3.html line 9): 'for' tag was never closed included in /_layouts/default.html
jekyll 3.8.6 | Error: Liquid syntax error (C:/Users/User/Desktop/ruby_projects/jekyll_test/testpage/_includes/3.html line 9): 'for' tag was never closed included
One of my last thoughts was that you added and removed a specific page, e.g. collectionJSONLD.html every time when testing this (as you confirmed).
There must be a specific thing we can't see as you haven't posted the complete code of the project. Nevertheless, great to read that you solved it! This was a hard one :)
The file collectionJSONLD.html was missing {% endfor %}
{% for member in site.data.members %}
{
"#type": "ListItem",
"name": "{{ member.name }}",
"url": "{{ member.permalink }}",
"position": "{{ forloop.index }}"
{% if forloop.first %}
},
{% elsif forloop.last %}
}
{% endif %}
{% endfor %}
],
I have the following vars inside of my ansible playbook I got the following structure
domains:
- { main: 'local1.com', sans: ['test.local1.com', 'test2.local.com'] }
- { main: 'local3.com' }
- { main: 'local4.com' }
And have the following inside of the my conf.j2
{% for domain in domains %}
[[acme.domains]]
{% for key, value in domain.iteritems() %}
{% if value is string %}
{{ key }} = "{{ value }}"
{% else %}
{{ key }} = {{ value }}
{% endif %}
{% endfor %}
{% endfor %}
Now when I go in the VM and see the file I get the following:
Output
[[acme.domains]]
main = "local1.com
sans = [u'test.local1.com', u'test2.local.com']
[[acme.domains]]
main = "local3.com"
[[acme.domains]]
main = "local4.com"
Notice the u inside of the sans array.
Excpeted output
[[acme.domains]]
main = "local1.com"
sans = ["test.local1.com", "test2.local.com"]
[[acme.domains]]
main = "local3.com"
[[acme.domains]]
main = "local4.com"
Why is this happening and how can I fix it?
You get u' ' because you print the object containing the Unicode strings and this is how Python renders it by default.
You can filter it with list | join filters:
{% for domain in domains %}
[[acme.domains]]
{% for key, value in domain.iteritems() %}
{% if value is string %}
{{ key }} = "{{ value }}"
{% else %}
{{ key }} = ["{{ value | list | join ('\',\'') }}"]
{% endif %}
{% endfor %}
{% endfor %}
Or you can rely on the fact, that the string output after sans = is a JSON and render it with to_json filter:
{{ key }} = {{ value | to_json }}
Either will get you:
[[acme.domains]]
main = "local1.com"
sans = ["test.local1.com", "test2.local.com"]
[[acme.domains]]
main = "local3.com"
[[acme.domains]]
main = "local4.com"
But the first one is more versatile.
I am trying to output a list of blog posts for a certain author. I tried this where Jekyll filter:
{% for post in (site.posts | where:"author", "mike") %}
{{ post.title }}
{% endfor %}
But it outputs every post. I'm not clear what I'm doing wrong.
Supposing that your post author is in your front matter, like this :
---
author: toto
...
---
If you want two last post by author == toto, just do :
{% assign counter = 0 %}
{% assign maxPostCount = 2 %}
<ul>
{% for post in site.posts %}
{% if post.author == 'toto' and counter < maxPostCount %}
{% assign counter=counter | plus:1 %}
<li>{{ counter }} - {{ post.title }}</li>
{% endif %}
{% endfor %}
</ul>
Et hop !
EDIT :
And another solution using the where filter instead of the if clause :
{% assign posts = site.posts | where: "author", "toto" %}
{% assign counter2 = 0 %}
{% assign maxPostCount2 = 3 %}
<ul>
{% for post in posts %}
{% if counter2 < maxPostCount2 %}
{% assign counter2=counter2 | plus:1 %}
<li>{{ counter2 }} - {{ post.title }}</li>
{% endif %}
{% endfor %}
</ul>
RE-EDIT: Justin is right I don't need my two vars (counter2 and maxPostCount2), I can use Liquid for loop limit:n option.
{% assign posts = site.posts | where: "author", "toto" %}
<ul>
{% for post in posts limit:3 %}
<Ol>{{ post.title }}</ol>
{% endfor %}
</ul>
Better !
You need to do an assign first for the filtered items
{% assign posts = site.posts | where:"author", "mike" %}
{% for post in posts %}
{{ post.title }}
{% endfor %}
It seems filters are to be used only inside output tags (those surrounded by {{ and }}. Which mean you could use something like :
{{ site.posts | where "author", "mike" }}
But you can't use it the way you're doing.
Source: liquid documentation on Filters