I'm just to display an image i have uploaded into files with <img src="{{ 'defaultcollection.jpg' | asset_url }}" /> It's just displaying the broken image icon. If I copy in the url https://cdn.shopify.com/s/files/1/1396/0463/files/defaultcollection.jpg?13042980317671635283 it displays fine. I'm wanting to do it the first way so it is able to be changed easily rather than go into the code and adjust it. How am I able to get this to display?
Try something like this:
<img src="{{ 'defaultcollection.jpg' | file_url }}" />
The file_img_url filter would also work (and has the added feature of allowing you to resize the image):
https://help.shopify.com/themes/liquid/filters/url-filters#file_img_url
Related
So I am wondering how I can change the image under an accordion section for just one product page and not the others. I see in the code of the product page template where the image is located but I am not experienced enough to know how to change it for just the one product. Is there a way to do this without needing to create a whole new template?
Website: https://auntethels.com (I'm trying to change the image under "heating instructions" for just the Lentil Chili Pot Pie product page)
Not sure if it helps but here is the code snippet I found: 1
(I need the 'directions.png' to be different for just the one page.)
I've been able to make other changes she needed but this one has stumped me :( I tried to reach the developer who made the custom site but he has stopped replying so I'm on my own for this one.
you can conditionally render the accordion with product handle
{% if product.handle == 'cumin-lentil-pot-pie-vegetarian'%}
<div class="accordion">
<h4>Heating Instructions</h4>
<button class="x">✕</button>
<p class="answer"><img src="//cdn.shopify.com/s/files/1/0332/6997/3128/t/15/assets/directions.png?v=63874448465039500411650314323" alt="Directions"></p>
</div>
{% endif %}
I have an image in my theme in a .tpl file defined like this:
<img class="logo" src="/public/img/Logo.svg">
However the image is not found even though it is in this directory:
/themes/theme_name/assets/img/Logo.svg
The result in the console is thus
GET http://localhost/public/img/Logo.svg 404 (Not Found)
Even though my url to the shop is this:
http://localhost/prestashop/en/
How do I get prestashop 1.7 to display this image or know where exactly to look for it?
In TPL try with : <img class="logo" src="{$urls.img_url}Logo.svg">
Regards
I currently face the following problem:
I included a couple of assets (PNG images) in src/assets/images/img.png. Inside the snippet where I want to display the image, I wrote this (as defined in the documentation):
<img src="{{ '../assets/images/img.png' | asset_url }}"/>
When executing slate build I can also see those images show up during the build process in the log. But when I start my dev server (npm run start:dev) the link to the image is broken and it doesn't get displayed. Any thoughts on how to solve this issue?
Your link is built all wrong. The Liquid filter asset_url resolves the path for you. All you need to provide is the name of the asset. So if you rewrite your Liquid correctly it would look like this:
{{ 'img.png' | asset_url }}
Reads as hey Shopify, go find img.png in the assets and return for me the complete path to it.
I've included the package, the pdf gets generated but somehow the images dont appear on the pdf. The HTML content and CSS works like expected.
When i return the view as how you'd normally return a view in laravel, the receipt displays nicely along with the images.
But when i:
return PDF::html('receipt.show', $data);
The images dont appear.
My view file has the image like so:
<img class="img-responsive" src="img/receipt/banner.jpg">
The image is within:
public/img/receipt/banner.jpg
This is a laravel app running on homestead environment.
You need to use absolute path in image src attribute instead of relative. Smth like:
<img class="img-responsive" src="http://your-domain.com/img/receipt/banner.jpg">
You can use
<base href="http://your-domain.com/" />
into your head and it will help for all your links
My problem is that when trying to insert some kind of a background image in Shopify, it never shows anything.
I have a navigation bar that has a pattern which the client wants and when I try to enable it, again nothing happens.
The code I'm using on that css background line (from googling around) is
background:url( "{{'navBggreen.jpg' | asset_url }}")
I've also tried
background:url( {{'navBggreen.jpg' | asset_url }} )
and nothing. Tutorials or any kind of documentation is extremely scarce for Shopify so...
Anyway, does anyone know how to get this working?
Make sure your css file has .liquid extension so that it can process liquid code as asset_url is part of liquid. so make sure, your css file name is something like style.css.liquid.
You call it like this from your CSS file in Assets:
.nav{background: url("navBggreen.jpg");}
if you want to include images in your layout you will have to use the asset_url filter. However, if your images are called via a CSS stylesheet then you do not need to use asset_url - except if they are used in a theme settings form. Take out the asset_url and it should work ok.