I have a Jinja macro defined as follows.
globalmacros.html
{% macro SUINavMenu(leftlist=[],logo="images/Logo_WEB_450_250.png") %}
<div class="ui pointing secondary menu">
<div class="item">
<img src="{{ static({{ logo }}) }}">
</div>
{% for item in leftlist %}
<a class="item" href="{{ item[1] }}">
{{ item[0] }}
</a>
{% endfor %}
</div>
{% endmacro %}
dashboard.html
{% from "macros/globalmacros.html" import SUINavMenu %}
{% block navigation %}
{{ SUINavenu(leftlist=[["Home","/home/"],["New Bill","/newbill/"]],
logo="images/web_logo.png") }}
{% endblock navigation %}
I am importing the macro defined in "globalmacros.html" into "dashboard.html" and trying to pass the logo location. However I am not sure how to do it.
In a non-macro version, the following code works.
<img src=" {{ static('images/logo_web.png') }} "></img>
The above code in "globalmacros.html" doesnt work as Jinja does not process an {{}} inside another {{}}
What is the work around for this?
I've strong supposition that <img src="{{ static(logo) }}"> should work. If it doesn't I would report this as a bug.
Related
In the following code, I have a category by the name "ml" defined in my yml file frontmatter. For some reason, the {% unless cat == "ml" %} is not working properly. See this html, and the output image below. Clearly, the category is ml (I have tried to remove any whitespace with the strip filter, which did not work), but it is not working (the unless statement, that is).
Please help!
<div class="posts">
<h1>Recent Posts: </h1>
{% for post in paginator.posts %}
{% assign cat = post.categories %}
{% unless cat == "ml" %}
<div class="post">
<h1 class="post-title">
<a href="{{ post.url }}">
{{ post.title }}: {{ cat }}
</a>
{% if post.image %}
<img src={{post.image}}>
{% endif %}
</h1>
<span class="post-date">{{ post.date | date_to_string }}</span>
</div>
{% endunless %}
{% endfor %}
</div>
I still am not completely sure on the why here, but I found that using contains rather than == solved my issue.
I am having hard time adding navbar to the github page.
I downloaded Monophase jekyll theme via this link :
http://jekyllthemes.org/themes/monophase/
I saw a navbar in the demo, but when i applied to the github.io page, I am missing navbar.
Index.markdown:
---
layout: default
---
If I set layout to default, nothing shows up and if I set to home all the posts are displaying but it does not navbar.
And there is no such thing as _data/navigation.yml in the monophase package zip I downloaded.
_site is set to .gitignore from what I received so I did not include the _site folder to the git as it was originally set, but do I need to add _site to git and create _data and navigation.yml inside this folder? to make the navigation bar?
I tried doing this but it did not work out so I'm not sure if I'm doing things right but would be nice if someone can explain what I'm doing wrong ;~;
default.html:
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: 'en' }}">
{% include head.html %}
<body>
<div class="container">
{% include header.html %}
<div>hello</div>
<main>{{ content }}</main>
{% include footer.html %}
</div>
{% if page.math %} {% include mathjax.html %} {% endif %} {% if
jekyll.environment == 'production' and site.google_analytics %} {% include
google-analytics.html %} {% endif %}
</body>
</html>
Header.html :
<header class="masthead">
<div class="masthead-title">
{{ site.title }}
<small class="tagline">{{ site.tagline }}</small>
</div>
{% if site.data.navigation %}
<nav class="nav">
<ul class="nav-list">
{% for item in site.data.navigation %}
<li class="nav-item">
<a href="{{ item.url | relative_url }}" class="{% if page.url == item.url %}current{% endif %}">
{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
</nav>
{% endif %}
</header>
Home.html:
---
layout: default
title:home
---
<div class="posts">
{% assign posts = site.posts %} {% if paginator %} {% assign posts =
paginator.posts %} {% endif %} {% for post in posts %}
<div class="post">
<h2 class="post-title">
{{ post.title }}
</h2>
<time datetime="{{ post.date | date_to_xmlschema }}" class="post-meta"
>{{ post.date | date_to_string }}</time
>
<p class="post-excerpt">
{% if post.description %} {{ post.description | strip_html }} {% else %}
{{ post.excerpt | strip_html }} {% endif %}
</p>
</div>
{% endfor %}
</div>
{% if paginator %}
<div class="pagination">
{% if paginator.next_page %}
<a
class="pagination-item older"
href="{{ paginator.next_page_path | relative_url }}"
>Older</a
>
{% else %}
<span class="pagination-item older">Older</span>
{% endif %} {% if paginator.previous_page %}
<a
class="pagination-item newer"
href="{{ paginator.previous_page_path | relative_url }}"
>Newer</a
>
{% else %}
<span class="pagination-item newer">Newer</span>
{% endif %}
</div>
{% endif %}
Yes, or at least it's possible, but unclear given what you've shared.
With Jekyll on your desktop, you are locally building an html directory which would be a static version of your site. This is very likely the _site folder. If this is what you did (successfully), then the contents of that directory are a complete website; *.html files, etc.. Copy the content of this folder to your Git Pages repo, and they should work as-is. _site is in .gitignore because it is a by-product of your code, and in a sense, a duplicate, just in different format.
The advantage of this route is you can view the built html and iterate on your code more quickly, without taking your site down or testing changes live. More to the point, you can open the _site folder and view index.html or similar in your browser to see how things are working. The Demo for this style wasn't working when I tried to access it, and I wasn't able to find the source code for the default implementation (which DID have a nav bar), to be able to tell you how they set it up.
The alternative route is to maintain your Git repo with Jekyll-themed files, and Github will build the site for you. Assuming up-to-date versions, this should be the same as what you did on your desktop.
For this route, I'd suggest reading documentation on how to add a menu/navigation to your _config.yml file. This is usually where the navigation is specified, but you can certainly override it or customize a navigation in supporting css files. This is also something that you'll want to consult documentation for.
I am looking to show a custom field (using the app Shopify Custom Fields) to show another image other than the collection image (we cannot use the collection image for reasons that are too long to write about). Right now using the custom field which is a text field (which we have as an absolute URL to the image we want to use) here:
<img src="{{ collection.metafields.custom_fields["collection_list_image_url"] }}" alt="{{ link.title }}"/>
To get the Collection image like normal, which does work I used:
<img src="{{ link.object.image.src | collection_img_url: 'master' }}" alt="{{ link.title }}"/>
For some reason the image is not showing up and after inspection it says img src is unknown. It does work if we use the normal collection image though. Is there something I need to add to get this custom field to show up dynamically for each collection in the menu nav (link list)?
I have the following code written:
<div class="collection-list">
{% for link in linklists.collection-list.links %}
<div class="box">
<a href="{{ link.url }}">
<img src="{{ collection.metafields.custom_fields["collection_list_image_url"] }}" alt="{{ link.title }}"/>
<div class="heading">
<h2>{{ link.title }}</h2>
<button type="button" class="btn btn-dark">shop now</button>
</div>
</a>
</div>
{% endfor %}
</div>
You need to reference link.object (and maybe account for the fact that it might not be a Collection). Nesting single quotes within the double quotes when you reference the metafield key is also better syntax:
<div class="collection-list">
{% for link in linklists.collection-list.links %}
{% if link.object == 'collection' %}
{% assign cf = link.object.metafields.custom_fields %}
<div class="box">
<a href="{{ link.url }}">
<img src="{{ cf['collection_list_image_url'] }}" alt="{{ link.title }}">
<div class="heading">
<h2>{{ link.title }}</h2>
<button type="button" class="btn btn-dark">shop now</button>
</div>
</a>
</div>
{% endif %}
{% endfor %}
</div>
I've got a few images, and I want to make a carousel of that.
But I do not want to loop over the images twice.
Can this be done?
My code is:
<div id="main-slider">
{% for image in images %}
<img src="/images/{{ image.url }}"/>
{% endfor %}
</div>
<div id="main-slider-nav">
{% for image in images %}
<img src="/images/{{ image.url }}"/>
{% endfor %}
</div>
As you can see, the loop is in there now twice. Is there a nice way to not do this?
If you prefer, you can build a string with the dynamic values (the lists of image tag) then use in the container div, as example:
{%set accumulator = '' %}
{% for image in images %}
{%set accumulator = accumulator ~ '<img src="/images/'~image.url~'"/>' %}
{% endfor %}
<div id="main-slider">
{{ accumulator|raw }}
</div>
<div id="main-slider-nav">
{{ accumulator|raw }}
</div>
Here a working twigfiddle sample
Hope this help
I am trying to pull only the products from a collection that have a certain tag. This is my way of creating sub-collections since Shopify doesn't do this. My code doesn't seem to be working, and I can't figure out why it isn't working. I am doing this on the collection.liquid page. It is just printing the headings to the screen, but not the list of products. Any ideas?
{% if collection.handle == "all" %}
<!-- All Collections -->
<div id="collections">
<h2>Brave Bracelets</h2>
<div class="product-list clearfix">
<h3>Cerulean</h3>
<ul>
{% for product in collections.brave-bracelets.products %}
{% capture alt_attr %}{{ product.title }} by The Brave Collection{% endcapture %}
{% if product.tags contains "cerulean" %}
<li>
<img src="{{ product.featured_image | product_img_url: 'compact' }}" alt="{{ alt_attr }}" />
<h3>{{ product.title }}</h3>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div><!-- #collections -->
{% endif %}
There is a minor mistake on your capture line, which should be:
{% capture alt_attr %}{{ product.title }} by The Brave Collection{% endcapture %}
But other than that, your code worked fine for me. I pasted it into collection.liquid and changed the collection "brave-bracelets" and tag "cerulean" to a collection and tag of my own, and it displayed the list of products as expected. Maybe double check that you do have products with the tag "cerulean" in the collection "brave-bracelets"...