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.
Related
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
My test site has a huge loading time and test shows I can cut performance by minifying JS and CSS assets.
What Shopify uses to minimize JavaScript and CSS?
Thanks
Shopify doesn't have the ability to auto-minify your Javascript (you need to do that yourself), but it does have the ability to auto-minify your CSS by giving it an 'scss' suffix, then including it in your site with the suffix .scss.css
So if your CSS file is currently named theme.css.liquid and included in your site with {{ 'theme.css' | asset_url | stylesheet_tag }}:
Change the name of your CSS file to end with .scss (or .scss.liquid, if the file in question ends with .css.liquid) - so in this case, the file becomes theme.scss.liquid
Change the reference to the file to end in .scss.css - so in this case, the include becomes {{ 'theme.scss.css' | asset_url | stylesheet_tag }} (Note that a .liquid suffix, if any, is not included here)
The result will be a minified CSS file built from your un-minified source code.
As John Bell mentions in a comment to your main post, though, minification alone probably won't resolve the underlying problems. If you look at the waterfall results from your speed test, look for files that have a long 'Waiting' or 'TTFB' time - those are files that are taking a long time for Shopify to compile, and indicate that your Liquid code is what needs to be optimized. Also look for files with a long 'Downloading' time, and see if those files could be compressed or only deferred so that they only load after the initial page has completed.
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
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.