Working with your apps local image assets in Symfony 5+

This article is mostly about managing your apps personal images and SVG files that it uses in your User Interface. It also explains how the Assets system works to the best of my abilities and discoveries.

This is the best info about assets, I have found in the docs about assets. It doesn’t mention some things that are handy to know. Like where is the configuration? There appears to be some sort of configuration in /config/packages/assets.yaml.

framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'

It looks like this just points to the manifest.json file location.

I believe this is used when you call the template functions.

encore_entry_link_tags() and encore_entry_script_tags() functions

If you open that file you will you see a long list of all of your Javascript and CSS files that Webpack Encore manages.

{
  "build/app.css": "/build/app.css",
  "build/app.js": "/build/app.js",
  "build/app~registration~sogiDraw.js": "/build/app~registration~sogiDraw.js",
  "build/editAboutUser.js": "/build/editAboutUser.js",
  "build/featuredImage.js": "/build/featuredImage.js",
  "build/modalAction.js": "/build/modalAction.js",
  "build/registration.js": "/build/registration.js",
  "build/runtime.js": "/build/runtime.js",
  "build/sogiDraw.css": "/build/sogiDraw.css",
  "build/sogiDraw.js": "/build/sogiDraw.js",
  "build/vendors~app.js": "/build/vendors~app.js",
  "build/vendors~app~featuredImage~modalAction~registration.js": "/build/vendors~app~featuredImage~modalAction~registration.js",
  "build/vendors~app~featuredImage~modalAction~registration~sogiDraw.js": "/build/vendors~app~featuredImage~modalAction~registration~sogiDraw.js",
  "build/vendors~app~featuredImage~registration~sogiDraw.js": "/build/vendors~app~featuredImage~registration~sogiDraw.js",
  "build/vendors~app~registration.js": "/build/vendors~app~registration.js",
  "build/vendors~app~registration~sogiDraw.js": "/build/vendors~app~registration~sogiDraw.js",
  "build/vendors~editAboutUser.css": "/build/vendors~editAboutUser.css",
  "build/vendors~editAboutUser.js": "/build/vendors~editAboutUser.js",
  "build/vendors~editAboutUser~sogiDraw.js": "/build/vendors~editAboutUser~sogiDraw.js",
  "build/vendors~featuredImage~sogiDraw.js": "/build/vendors~featuredImage~sogiDraw.js",
  "build/vendors~sogiDraw.js": "/build/vendors~sogiDraw.js"
}

There is more than one way to work with assets in Symfony 5+. I use Webpack for my CSS and Javascript, so I use the related tags with those to import them into my templates.

Files that you let users upload are handled differently from files your app uses. Files your app uses will always be needed and won’t change, they are static in nature. Files your users upload will need to be edited, deleted etc. Also if you need assets like JS or CSS you should absolutely use Webpack and asset versioning it is way easier.

I won’t be using Webpack to handle my image and svg files. If I was doing a single page app, then that would maybe be my route.

What I need is access to some basic default images my app uses. Like an avatar for a user who hasn’t uploaded an image, or various SVG files used in the interfaces. These files can be stored in your apps public folder or in a CDN. If you are using something like Varnish cache or CloudFlare or both it doesn’t really matter if you keep them locally.

This article covers how I prefer to work with images and SVG’s my app will use. I’ll write another article about working with user uploaded images later.

You can display a SVG inside an img tag, which is what I do sometimes when I don’t need JS interaction with the SVG.

There might be more than one way to do this. I will cover what I  have found here so I can review it later if  I need to.

Using the Package class is easy. You do it like this.

 $package = new Package(new EmptyVersionStrategy());
 $defaultImage = '/images/app_art/click-edit.png';
        if(!empty($profileImageId)){
            //update this to get actual user image.
            $profileImageUrl = $package->getUrl($defaultImage);
        }

Here I have my images located in app/public/images/app_art/  This works if you know your files will never change. This lacks versioning(EmptyVersionStrategy()), so if you change the image, your users might never see it. This is because reverse proxy servers and other servers between your server and the users browser will cache the image and send the cached version. If you think you might make changes to the image in the future use the ( StaticVersionStrategy ) or else a large portion of your users will not see the new image.

Here is the Package class source code on github.

To say it another way it means that users who have downloaded the image before, their browsers will never download it again until the expires header or something similar. A new visitor or person who cleared their cache would get the new image. Versioning fixes this. This becomes a major PITA when working CSS and JS, so always use versioning with those or you will get magic errors due to the browser using cached versions.

I should note here that this also works because I have the configuration set in my nginx to serve images from the public folder like this.

location /media/ {
	root /var/www/sogi/sogizmo/public;
	}

That opens the public folder to serve assets. When you use webpack encore to manage your JS and CSS it takes your files from the /assets/ folder and compiles them then stores them in the related folders inside the public folder usually inside the build folder.

As you can see above I have another folder within the public folder named images/ which I keep my app related images in. Inside the images folder I further break it down into the related images. Above you can see I am using an image from the app_art/ folder.

Also notice when I build the URI/URL for the image I don’t include the “/public/” part. The symfony template linking functions know where the file I need is located from the assets.yaml configuration file. All I need to do is include the subfolder “/image/” and the actual file name. I keep my assets in many subfolders named after the page or object that uses them.