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.
Related
I'm trying to figure out if it's possible to add a specific class to an image in Jekyll depending on the image's dimensions. Basically I want to loop through a couple of images in a folder and add the correct class to the image depending on if the image is in landscape or portrait mode (i.e. if the width is bigger than the height and vice versa).
I've tried to do it with JavaScript, but I would prefer a method that would add the classes during the build process of the site instead of on page load.
This is the image loop:
<div class="model-gallery">
{% capture gallery_path %}pics/models/gallery/{{ page.title | slugify | replace: '-','' | replace: 'å','a' | replace: 'ä','a' | replace: 'ö','o' }}{% endcapture %}
{% for image in site.static_files %}
{% if image.path contains gallery_path %}
{{image.size}}
<img class="gallery-item" src="{{ site.baseurl }}{{ image.path }}" alt="{{page.title}}, {{site.title}}" />
{% endif %}
{% endfor %}
</div>
Any ideas?
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 %}
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'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"...