i'm pretty new to Shopify and I'm facing a strange issue in linklists.
Yesterday I changed the featured image for a category I displayed into a linklist, but I cannot see the changes in the page that prints the linklist.
I analyze the .liquid file that prints the linklists and I found the snippet that produces the divs:
{% for link in linklists[linklist].links cols: 4 %}
<div class="products item {{ link.handle }}">
<a href="{{ link.url }}" title="Browse our {{ link.object.title | escape }} collection.">
<img src="{{ link.object.image.src | collection_img_url: 'large' }}" alt="{{ link.object.title | escape }}" />
<big>{{ link.title }}</big>
</a>
</div>
{% endfor %}
After some shots I tried to add a data attribute to the image to print again the link.object.title:
{% for link in linklists[linklist].links cols: 4 %}
<div class="products item {{ link.handle }}">
<a href="{{ link.url }}" title="Browse our {{ link.object.title | escape }} collection.">
<img src="{{ link.object.image.src | collection_img_url: 'large' }}" alt="{{ link.object.title | escape }}" data-test="{{ link.object.image.src | collection_img_url: 'large' }}" />
<big>{{ link.title }}</big>
</a>
</div>
{% endfor %}
The strange fact is that it prints two different values for the same object!
<img src="https://cdn.shopify.com/s/files/1/0407/7545/files/trousers-woman_c4633f02-59f7-4a4b-809b-91662635ddc0.jpg?22734" alt="Women's Trousers" data-test="//cdn.shopify.com/s/files/1/0407/7545/collections/DSC_9685_grande_df826b7f-5645-4491-b866-8819c9ad8983_large.jpg?v=1429273629">
The src attribute shows the old image, and the test attribute shows the new one.
Is that because Shopify postprocess the src attributes of the image for caching them into their cdn? How can I fix this?
thanks to #Jason input I found a javascript script that changed the attribute "src" of the image:
$('.collection-woman .webshop .trousers a img').attr('src','https://cdn.shopify.com/s/files/1/0407/7545/collections/DSC_9685_grande_df826b7f-5645-4491-b866-8819c9ad8983_large.jpg?v=1429273629');
Related
I'm building a component which checks the character count of a custom product metafield; if it's above 24 characters, the data is output as an accordion, otherwise the metafield content is printed in its entirety. The conditional below fails as the metafield size always returns 0, but I can see the content printing via the else statement so I'm certain the path is valid:
{% if product.metafields.custom.product_note.size >= 24 %}
<div class="product-note has--dropdown">
<span class="item__heading item__trigger">Product information</span>
<div class="item__content">
{{ product.metafields.custom.product_note }}
</div>
</div>
{% else %}
<div class="product-note">
<div class="item__content">
{{ product.metafields.custom.product_note }}
</div>
</div>
{% endif %}
I'm not sure it's relevant, but the product_note metafield is a multi-line text field. If anyone could point me in the right direction as to why size is failing to produce a value, I'd appreciate it massively.
You could always try working off the value contained in the metafield. It appears you are short-cutting by referring to just the combo of namespace and key, without actually saying: what is the length of the value stored at that namespace and key. Just a thought. You could at least try that.
Final answer, courtesy of #David Lazar's suggestion:
{% assign data_product_note = product.metafields.custom.product_note.value %}
{% if data_product_note.size >= 24 %}
<div class="product-note has--dropdown">
<span class="item__heading item__trigger">Product information</span>
<div class="item__content">
{{ data_product_note }}
</div>
</div>
{% else %}
<div class="product-note">
<div class="item__content">
{{ data_product_note }}
</div>
</div>
{% endif %}
On a Shopify product page, I can loop through all the variants and get information about them like this:
{% for variants in product.variants %}
{{ variants.id }}<br>
{{ variants.sku }}<br>
{{ variants.title}}<br>
{{ variants.price | divided_by: 100}}<br>
{% endfor %}
This works perfectly fine, however when I try and get the variant image in the loop like this:
{{ variants.image}}
I have also tried using:
{{ variants.featured_image.src}}
Which produces exactly the same result.
The output is simpy products and then the name of the image file. For example 'products/my-image.jpg'.
This is obviously not the path to the image and when I try and display this within an image tag, a broken image is produced.
I am trying to get the path to the image that is stored on Shopify's CDN for this variant product, which will look something like https://cdn.shopify.com/s/files/1/0022/4572/2212/products/WI1M1L1F1B1_grande.jpg?v=1656698226.
Does anyone know how this can be achieved within the loop I am using above?
You are looking for this
{{ variant.image.src | product_img_url: '200x' }}
I suggest you to take a look here to find many other useful functions: https://www.shopify.ca/partners/shopify-cheat-sheet
Also is useful to download a free theme (Dawn for example) and use it as reference.
Here is a code example to show each variant image and url :
<div class="product_thumbnails">
{% for variant in product.variants %}
<a href="{{ variant.url }}">
<div class="h-[50px] w-[50px] bg-[#E6ECEB] rounded shrink-0 p-1">
{{ variant.image | image_url: width: 50 | image_tag }}
</div>
</a>
{% endfor %}
</div>
I'm using pelican to create a website. I'm trying to add an image to the summary so that the summary always starts with an image.
I tried adding the image to the summary in the metadata (using markdown) but it only shows up on the index page and not on the other pages (in the example below the image does not show in the Posts page). I also have to add the image in the same line as the text which sometimes renders in a weird way (some text is to the side of the image depending on the image size).
Here is an example of the metadata:
Title: this is my title
Slug: slug
Date: 2017-05-04 23:00
Category: Posts
Tags: pelican
Author: Eyal
Summary:  and this is my post summary
I also tried to use the summary plugin but that but that did not work at all.
What is the easiest way to add an image to the summary? I was hoping to avoid modifying the html code if possible.
Add the image as a field metadata in your article, say it "Cover", like this:
Title: this is my title
Slug: slug
Date: 2017-05-04 23:00
Category: Posts
Tags: pelican
Author: Eyal
Cover: images/fig1.png
Summary: and this is my post summary
So you can use it in your template in this way.
{% if article.cover %}<img src="{{ article.cover }}" alt="">{% endif %} {{ article.summary }}
This line looks for Cover key in the metadata, and if there is one, create the img tag. If is not, then simply pass.
Ad it there where article.summary already is used. I use pelican-theme alchemy (that uses bootstrap) and article.summary is in index.html. I extended it as follows:
<div class="col-sm-8">
<h4 class="title">{{ article.title }}</h4>
<div class="content">
{{ article.summary|striptags }}
{% if article.cover %}
<div class="container"><div class="col-md-6" style="padding-left: 0px; padding-right: 0px;">
<img src="{{ article.cover }}" class="img-fluid">
</div></div>
{% endif %}
</div>
</div>
This works for me with the pictures in the images-folder.
But I have an other problem: the posts do not find the pictures in the same images-folder :-(
For those using the AboutWilson template in Pelican I have managed to make it work as well by adding the following code in the index.html file (in the template folder)
{% if article.cover %}
Cover:
<span>
<img src="{{ article.cover }}" alt="">
</span>
{% endif %}
I have variant images in a shopify account, each image has its own alt tag. I want to have the individual alt tags display under each image. If I use the {{ image.alt | escape }}, it just displays one alt name for all the variant images. So if image 01 has "alt 01", and image 02 has "alt 02", and I try to display them on the page, both display "alt 01". Any things on utilizing the images alt fields?
{% for image in product.images %}
<li data-thumb="{{ image | product_img_url: 'large' }}" data-title="{{ image.alt | escape }}">
<a href="{{ image | product_img_url: '1024x1024' }}" class="fancybox" rel="group" title="{{ image.alt | escape }}">
<img src="{{ image | product_img_url: 'large' }}" alt="{{ image.alt | escape }}" itemprop="image" data-cloudzoom="zoomImage: '{{ image | product_img_url: '1024x1024' }}', tintColor: '{{ settings.shop_bg_color }}'" class="cloudzoom" /><br />
{{ image.alt | escape }}
</a>
</li>
{% endfor %}
Make sure you have provided alt tags for each of the images in the Products page of the Admin.
See here:
I tested your code, and when alt tags are not set it outputs the product title under each image. After entering alt text for each image (from the Products page in the Admin area), your snippet worked as expected and outputted the corresponding alt tag under each product image.
reading in a JSON for sport. using a partial for matchup markup.
awayteam and home team for most part share identical markup but the JSON properties which I have no control are such below:
<div class="away {{game.awayTeam_last_name|slugify}}">
<a href="#" title="{{game.awayTeam_first_name}} {{game.awayTeam_last_name}}">
<span class="{{league}}-logo"></span>
<span class="city">{{game.awayTeam_first_name}}</span>
{% if game.event_status != "pre-event" %}
<span title="score">{{game.awayTeam_score}}</span>
{% else %}
<span title="record entering game">(0-0)</span>
{% endif %}
</a>
</div>
<span>#</span>
<div class="home {{game.homeTeam_last_name|slugify}}">
<a href="#" title="{{game.homeTeam_first_name}} {{game.homeTeam_last_name}}">
<span class="{{league}}-logo"></span>
<span class="city">{{game.homeTeam_first_name}}</span>
{% if game.event_status != "pre-event" %}
<span title="score">{{game.homeTeam_score}}</span>
{% else %}
<span title="record entering game">(0-0)</span>
{% endif %}
</a>
</div>
is there a way to shrink/refactor the above like some expression valuator to make home and away passed via a variable.
didn't answer own question but i did get Data guys to better format the data, so became..
awayteam: { first_name:'', last_name:'', score:'' }
hometeam: { first_name:'', last_name:'', score:'' }
allowing me to shrink in half the template =)