Static files - Where should I place images and fonts? #43

skyriverbend · 2021-02-06T21:27:19Z

skyriverbend
Feb 6, 2021

Where should I place static files like images and fonts?

And how do I make sure that images used in liquid templates get placed in the dist/ folder? I assumed placing them in a folder like src/images/ would be fine, but webpack isn't adding them to dist/ because they aren't being used in a css file.

Also, placing fonts in src/ seems to be causing an error with webpack, but I'll post the details of that in a separate issue.

By the way, great project, super handy. Thanks for making it. :-)

Answered by sergejcodes

Feb 7, 2021

Hi Jon 👋.

You should place the images inside shopify/assets/ directory. There is no need to process them through webpack. Add the static keyword to their file name e.g. file-name.static.png. That way they won't be cleaned by webpack during builds and git will track them.

To include them in a .liquid file use:

<img src="{{ 'file-name.static.png' | asset_url }}">

<!-- or -->

<img src="{{ 'file-name.static.png' | asset_img_url: '300x' }}">

View full answer

skyriverbend · 2021-02-06T21:57:09Z

skyriverbend
Feb 6, 2021
Author

My current workaround is adding this to webpack.common.js:

    new CopyPlugin({
      patterns: [
        {
          from: "src/images/**/*",
          to: '[name].[ext]'
        },
      ],
    }),

0 replies

sergejcodes · 2021-02-07T09:45:14Z

sergejcodes
Feb 7, 2021

Hi Jon 👋.

You should place the images inside shopify/assets/ directory. There is no need to process them through webpack. Add the static keyword to their file name e.g. file-name.static.png. That way they won't be cleaned by webpack during builds and git will track them.

To include them in a .liquid file use:

<img src="{{ 'file-name.static.png' | asset_url }}">

<!-- or -->

<img src="{{ 'file-name.static.png' | asset_img_url: '300x' }}">

8 replies

ScottJr Apr 9, 2021

It might be worth including .static for assets in the docs.

sergejcodes Apr 12, 2021

It's already mentioned in the docs. I included an additional .static file in the shopify/assets/ directory for the latest release. That way the .static concept might be easier to spot.

CaseJnr Apr 21, 2021

Im using shopify-theme-lab version 2.6.0 and am having issues loading fonts in development. I have followed the instructions above and placed the font files in src/fonts and set the paths to via src: url('../fonts/fancy.woff').

npm run start adds the css to <head> and the bundle.css returns a 404 (as expected). If I navigate to a product page, say https://mystore.shopify.com/products/example the font returns a 404 as the font path is converted to src: url(./fancy.woff) and therefore the font is trying to be retrieved from https://mystore.shopify.com/products/fancy.woff.

Hows do I get fonts loading in development?

sergejcodes Apr 21, 2021

Just tested a couple of things and found a better way of including custom fonts.
You don't need webpack as they are treated as static files (example without Tailwind):

add your fonts to the shopify/assets/ directory with the static keyword e.g.:
indie-flower-v12-latin-regular.static.woff2
indie-flower-v12-latin-regular.static.woff
create a Shopify snippet shopify/snippets/fonts.liquid with the following content:

{% style %}
  @font-face {
    font-family: 'Indie Flower';
    font-style: normal;
    font-weight: 400;
    src: url('{{ 'indie-flower-v12-latin-regular.static.woff2' | asset_url }}') format('woff2'),
         url('{{ 'indie-flower-v12-latin-regular.static.woff' | asset_url }}') format('woff');
  }
{% endstyle %}

render the fonts snippet above/below the bundle.css in shopify/layout/theme.liquid

...
{{ 'bundle.css' | asset_url | stylesheet_tag }}
{% render 'fonts' %}
...

Create a css file and import it into src/css/main.css with the following content:

body {
  font-family: 'Indie Flower', serif;
}

CaseJnr Apr 22, 2021

Thanks for getting back to me @sergejcodes, I really appreciate it.

I ended up moving the file-loader from webpack.common.js to webpack.prod.js and updating the test value for all image and font extensions.

{
        test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              publicPath: './',
              outputPath: './'
            }
          }
        ]
      },

Then I added the following url loader to webpack.dev.js

{
        test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 9999999999,
              name: 'pack-[name].[ext]'
            }
          }
        ]
      },

This allows all fonts and images to remain in assets as all paths will be converted to base64 values for development. I added a @assets alias to webpack.common.js to assist with the imports.

'@assets': path.resolve(__dirname, '../../shopify/assets')

Fonts and images can simply be imported with

src: url('@assets/myfont.woff')

I also updated CleanWebpackPlugin to only check for files that will be generated by webpack so the static prefix isn't required.

cleanOnceBeforeBuildPatterns: ['bundle.js', 'bundle.css', 'pack-*.*']

Static files - Where should I place images and fonts? #43

Uh oh!

skyriverbend Feb 6, 2021

Replies: 2 comments · 8 replies

Uh oh!

Uh oh!

skyriverbend Feb 6, 2021 Author

Uh oh!

sergejcodes Feb 7, 2021

Uh oh!

ScottJr Apr 9, 2021

Uh oh!

sergejcodes Apr 12, 2021

Uh oh!

Uh oh!

CaseJnr Apr 21, 2021

Uh oh!

sergejcodes Apr 21, 2021

Uh oh!

Uh oh!

CaseJnr Apr 22, 2021

skyriverbend
Feb 6, 2021

Replies: 2 comments 8 replies

skyriverbend
Feb 6, 2021
Author

sergejcodes
Feb 7, 2021