Following the Timber docs, the single product page does not display the pictures gallery. How can I do that with Timber?
Using {{ product|print_r }}, I have found the answer, considering the product context, you can use:
{% for id in product.gallery_image_ids %}
<img src="{{ Image(id).src }}" />
{% endfor %}
Related
Here is my unfinished site that I have made with pelican using the pelican-bootstrap3 template: http://snoek.ddns.net/~oliver/mysite/
In the pelican-bootstrap3 README, it says can use the AVATAR variable in the pelicanconf.py file to point to an image. I've done this but now the picture of me is on every page, which is a little ridiculous. I would like it only on my "About" page.
In pelican-themes/pelican-bootstrap3/templates/includes I found an aboutme.html file with the following in it:
<div id="aboutme">
{% if AVATAR %}
<p>
<img width="100%" class="img-thumbnail" src="{{ SITEURL }}/{{ AVATAR }}"/>
</p>
{% endif %}
{% if ABOUT_ME %}
<p>
<strong>{{ _('About') }} {{ AUTHOR }}</strong><br/>
{{ ABOUT_ME }}
</p>
{% endif %}
</div>
Maybe it is this file that could be edited to specify that the avatar should only show on the "About" page? But I'm not sure how.
Change
{% if AVATAR %}
To
{% if page and page.title == 'About' and (ABOUT_ME or AVATAR) %}
I have this site structure:
mysite
_artworks
category1
category2
category3
In _config.yml file I have:
collections:
artworks:
output: true
All static files are moved to a folder _site, but I can not refer them through {{ site.artworks.static_files }} in index.html.
In fact, I try to display pictures in cycle like this:
{% for art in site.artworks.static_files %}
<img src="{{ art.path }}">
<br>
{{ art.path }}
<br>
<br>
<br>
{% endfor %}
Why is it not working? And how to best organize a collection to store photos and display them by category, if this is a project gallery?
To access the collection generated pages you need to browse them directly:
{% for art in site.artworks %}
<img src="{{ art.path }}">
{{ art.path }}
{% endfor %}
If you have specified any image with a special tag and the image filename in a category of the collection, then you can access them inside the loop with:
Supposing you have in your collection front matter: my_image: hello.jpg and you have an image in the assets folder /assets/hello.jpg
{% for art in site.artworks %}
<img src="assets/{{art.my_image}}">
{% endfor %}
If your collections will just contain images, I would rather prefer specifying them in Jekyll data files and then include them in posts.
When displaying an image in the collection section and having product preview images associated with a certain product, I receive duplicate copies of the product because I have image previews. Is this because I'm not calling for the first featured image?
<img src="{{ collection.products.first.featured_image | product_img_url: 'medium' }}">
Both images go to the same product. I figured out that because I have a preview image and a featured image it displays two identical products.
Here's the full source:
<div class="collectionfront">
{% for product in products %}
{% for image in product.images %}
<img src="{{ collection.products.first.featured_image | product_img_url: 'medium' }}"><h2><span>{{ product.title }}</span></h2>{{ product.price | money_with_currency }}{% if product.available %}<form action="/products/{{ product.handle }}"><span><button type="submit" class="shop-btn">Shop</button></span></form>{% else %}<p>Sold Out!</p>{% endif %}
{% endfor %}
{% endfor %}
</div>
I think it's because you're looping through each product image. Try removing your inner for loop {% for image in product.images %}.
Also, if you are displaying a featured image for a product and not a collection, you probably want product.featured_image instead of collection.products.first.featured_image.
I'm trying to find a way to get an image to appear form a collections featured image. I'm able to successfully display an image but unable to access the proper location of the image.
{% if template == 'index' %}
{% for frontpage in collections %}
<h2>{{ frontpage.title }} Collection</h2>
{% if frontpage.image %}
<img src="{{ frontpage.image.src | frontpage_img_url: 'medium' }}" />
{% else %}
<img src="{{ frontpage.collections.first.featured_image | product_img_url: 'large' }}" alt="{{ frontpage.title | escape }}" />
{% endif %}
{% endfor %}
{% else %}
{% endif %}
The image link appears as /collections/test-product.png I need it to appear as https://cdn.shopify.com/s/files/1/0593/8633/collections/test-product_small.png?v=1406487979. How can I get this to work?
This article on the Shopify wiki gives an example of how to display a collection's featured image:
{% if collection.image %}
{{ collection.image.src | collection_img_url: 'medium' | img_tag: collection.title }}
{% else %}
{{ collection.products.first.featured_image.src | product_img_url: 'medium' | img_tag: collection.title }}
{% endif %}
Also see the docs for collection.image:
Returns the collection image. Use the collection_img_url filter to link it to the image file on the Shopify CDN.
And collection.image.src:
Returns the relative URL to the collection image.
In your code, use collection_img_url instead of frontpage_img_url.
You should also try frontpage.products.first.featured_image.src instead of frontpage.collections.first.featured_image.
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"...