Copying Files

Hey Kensley,

Yes, actually you can point any image at any directory in your css or scss files. You can use whether relative or absolute path - the only requirement is that the path should be valid. Then Encore will notice it and copy to your build directory, and also will *rewrite* the paths in your css/scss files for you. So, make sure you're using correct paths to images, and it just should work :)

Cheers!

Hey Eric!

Yea... this is the "expected" behavior 🙃. Encore parses your CSS files to know which images it needs to copy. But it does not parse your Twig templates to know that it should copy these files. The two solutions for this are:

A) Use copyFiles() from Encore. Then you should be able to reference those. If you're trying to figure out exactly which path to use in asset(), look at public/build/manifest.json, find the file, and use the "key".

B) Randomly import the file you want to reference from a JS file... then don't use the value. Importing it will be enough to make that file be copied. Then, use the same trick about manifest.json.

Let me know if that helps!

Cheers!

Hey Ryan, thanks for the reply. I had added copyFiles(), that's why I was so confused. I missed to mention that in my question. I also missed to restart Encore obviously. Now it all works just fine... :D

Hey Eric!

Ah, I'm just happy you've got it working 😎.

Cheers!

Hey Javier Quintana!

Thanks for sharing that - we'll add a note! When Encore went 1.0, we changed how assets are imported, which means that file-loader doesn't come automatically anymore (hence, you need to install it). But I love that the error was so clear!

Cheers!

Hey Akavir S.

The whole point of using a hash as part of the file name is just for caching purposes. If you didn't change your image, then its name will be the same but whenever you change it, it will get a new name as soon as you compile your assets, so then, a browser will think it's a new image and will download it (and actually it is a new image)

Cheers!

Hey Anton Bagdatyev

Great question! Of course we can, and you will learn it at the end of this course! So keep learning!

Cheers!

Cool! Thank you!

Hey Francisco C.

I think you just have to point to the "from" path, e.g. ./assets/admin/media/bg and Webpack should take care of the rest. Let me know if it worked :)

Cheers!

Hey MolloKhan

It doesnt work.

My from path is already set to from: './assets/admin/media/bg' pero the CSS file points to bg-default.jpg
Inside the "to" folder 'build/admin/media/bg/' the file is bg-default.XXXXXXXX.jpg

Any ideas?

Ah ok, let's try something. In your CSS class, point directly to the "from" path. e.g.

.item--fluid.bg{
    background-image: url(/assets/admin/media/bg-default.jpg)
}

I think, if you do that, Webpack will take care of the rest. Oh, but I think you have to be using SASS instead of CSS files

Hey Dan_M!

Cool question :). The answer... depends a bit about the nature of these images. This get_image endpoint... is it returning an image path to some dynamic (e.g. uploaded?) icon image? Or is it literally just returning the path to some "static" asset that's committed to your repository? I think it's the second (because you mentioned the path is /build/static/image1.png). If so, follow-up question: does this get_image endpoint always return the exact same icon path? Or is this... dynamic (?) based on the user login or something different?

And, in case you have the simplest situation (where you just want to get the image path to a static, committed image in your project), i'll give you the answer :). Let's assume the source, committed image (before Encore copies it) is assets/images/image1.png and you're JavaScript file lives at assets/js/app.js. In that case, the solution is this:

// yes, you can import images! Use the relative path between the source files
// imageUrl will be the final, "built" path - e.g. /build/static/image1.png
import imageUrl from '../images/image1.png';

 showIcon() {
    writePage(data) {    
        const html = eval(template)(data);
        this.$wrapper.append($.parseHTML(html));
    }

    const template = (data) => `
        <img src="${imageUrl}"/>
    `;

Let me know if this helps... or if you have a more complex situation :).

Cheers!

Hey Ryan,

Thanks for that answer, but my situation is a little more complicated than that. Based on user input, the get_image endpoint returns the path to one of five "static" assets that are committed to my repository. Because the jquery app does not know at compile time which image path will be returned, I can't import and display the image as directly as you showed.

So...I can't wait for the more complex answer!

Cheers!

Hey Dan_M!

Ah... ok! In that case, the trick to getting this right will all be in the controller for that get_image AJAX call: it needs to return the full, final URL to the image so that your JavaScript can "dumbly" just print it. It will probably be something like this:

use Symfony\Component\Asset\Packages;

public function getImage(Packages $asset)
{
    $imageUrl = $asset->getIUrl('static/image1.png');

    return $this->json([
        'image' => $imageUrl
    ]);
}

There are two keys here:

1) That Packages service is basically the way that you call the asset() function (the one you normally use in Twig) from inside a controller. That's important because, assuming your app is setup correctly, the asset() function is smart enough to look in the Encore manifest.json file to get the final path to the image (including a version hash if you enable versioning).

2) Am I assuming correctly that these static files are copied via copyFiles()? The second key is what string to pass to the getUrl() function. The easiest way to see what path you should pass here is to open up public/build/manifest.json and find the "image1.png" item in there and use whatever its "key" is. You should find something that looks something like "static/image1.png": "/build/static/image1.png". Whatever the key on the left is, that's what you should pass to getUrl().

Let me know how that goes!

Cheers!

Ryan,

That was the missing link! I had no idea there was an asset() function that I could use outside of Twig. It works like a charm now.

Thanks!

Hey Dan,

That sounds very cool! About your problem - the easy fix! You just need to specify a relative path to the image in your CSS file - Webpack will automatically rewrite the relative path to the proper path with hash from the build/ directory. So, for example if you have this structure:

assets
/
- css/
-- app.css
- images/
-- static/
--- background.jpg

Then, you just need to specify path like "../images/static/background.jpg", i.e.:

#container {
    min-height:100vh;
    position:relative;
    background: black url('../images/static/background.jpg') center top no-repeat;
}

Cheers!

Thanks for the explanation Victor!

I see now that the issue was discussed two chapters back. I guess I missed it!

Hey Dan,

Thanks for your feedback! Glad it works for you now.

Cheers!

Hey Krzysztof K.

Why you don't use Font awesome PRO from npm? In oficial fontawesome docs there are section how to instal PRO version with your personal token.

Cheers!

Thanks Vladimir, I will check it. But I am really curious, why this works like that, I have checked npm folder for that package, but there wasn't anything special.

Difficult to say, it depends on how you are including you font-awesome version. Are you using compiled css or it's scss version? probably your fonts files are placed in wrong directory, or you misconfigured fonts directory var, Fonts should be copied automatically.

Cheers.

Here is the kludge that I am using for the dev environment. I modified the webpack.config.js like this:

`
const Encore = require('@symfony/webpack-encore');

const assetDestinationProd = '[name].[hash:8].[ext]';
const assetDestinationDev = '[name].[ext]';
const destinationFilename = Encore.isProduction() ? assetDestinationProd : assetDestinationDev;

Encore
...

.copyFiles({
  from: './assets/images',
  to: 'images/[path]' + destinationFilename
})
.configureFilenames({
  images: destinationFilename,
})

...
`

I got this idea from https://github.com/Haehnchen/idea-php-symfony2-plugin/issues/1020

Hey Scottie,

Thanks for sharing this example, but it really looks complicated. I just donwloaded the course code of this tutorial, went to the finish/ directory, ran "yarn install" & "yarn watch" and when "ls -l public/build" - I didn't see any hash in files, here's my output:

-rw-r--r--  1 victor  staff    1952 May 16 13:39 0.css
-rw-r--r--  1 victor  staff    5357 May 16 13:39 0.js
-rw-r--r--  1 victor  staff  207206 May 16 13:39 1.js
-rw-r--r--  1 victor  staff    5233 May 16 13:39 account.css
-rw-r--r--  1 victor  staff   26630 May 16 13:39 admin_article_form.js
-rw-r--r--  1 victor  staff  754963 May 16 13:39 app.css
-rw-r--r--  1 victor  staff    7029 May 16 13:39 app.js
-rw-r--r--  1 victor  staff    3226 May 16 13:39 article_show.css
-rw-r--r--  1 victor  staff    4570 May 16 13:39 article_show.js
-rw-r--r--  1 victor  staff    1167 May 16 13:39 entrypoints.json
drwxr-xr-x  6 victor  staff     192 May 16 13:39 fonts
drwxr-xr-x  8 victor  staff     256 May 16 13:39 images
-rw-r--r--  1 victor  staff    2154 May 16 13:39 login.css
-rw-r--r--  1 victor  staff    1740 May 16 13:39 manifest.json
-rw-r--r--  1 victor  staff   26138 May 16 13:39 runtime.js
-rw-r--r--  1 victor  staff   30873 May 16 13:39 vendors~admin_article_form.css
-rw-r--r--  1 victor  staff  688827 May 16 13:39 vendors~admin_article_form.js
-rw-r--r--  1 victor  staff  103969 May 16 13:39 vendors~admin_article_form~app.js
-rw-r--r--  1 victor  staff  769144 May 16 13:39 vendors~admin_article_form~app~article_show.js
-rw-r--r--  1 victor  staff  578820 May 16 13:39 vendors~app.js

I only see hashes when build assets for production, i.e run "yarn build". So, probably some misconfiguration on your side.

Cheers!

The hash files in this case are in the images folder.

Hey Scottie,

Ah, sorry, now I see! Totally makes sense, thanks for clarification and shared solution ;)

Cheers!

Cool, thanks for sharing it!

Hey Scottie,

Yes, there's a trick with it... Well, actually, not with asset() function in particular but with paths to files. First of all you need to install and *enable* Symfony Plugin. In its preferences, specify "public" (or the public directory for your Symfony project - it's web for old Symfony versions). And it should help IIRC. You can find how to do it in our free course about PhpStorm: https://symfonycasts.com/sc... .

Another trick is right click on your public/ folder and in context menu choose "Mark directory as" -> "Resource route". After this PhpStorm will check all paths relative to the public folder and if it found a file - it won't highlight it.

Cheers!

Thank you for the reply. But the problem is that I am using the image source to filename-with-hash conversion provided by the manifest.json. The link specified does not actually have a file. For example, using this tutorial, in the show.html.twig file, you will find {{ asset('build/images/alien-profile.png') }}. But the actual file is build/images/alien-profile.da9d186f.png. The manifest.json has the mapping for this conversion. And, because the file does not exist, phpstorm is "angry". I was hoping there might be a plugin to read the manifest.json to resolve this.

Hey Scottie,

Actually, you can enable versioning for production only and disable it for development, then you won't have this problem. Check the last chapter: https://symfonycasts.com/sc... - see ".enableVersioning(Encore.isProduction())" option. It should fix the problem you have :)

Cheers!

Hey Scottie,

Ah, now I see! It wasn't clear enough in your first comment :) Unfortunately, I don't know any plugin that would help with it. :/ Probably a good idea to suggest such improvement to Symfony Plugin.

Cheers!

Hey Marcel D.

It may cause an overhead but just at build time. Another thing to consider is that you will have duplicate images on your system, so if your production server is very low on disk space it might be a problem but I would not worry too much.

Cheers!