NSM Asset Rev plugin for Craft CMS 3.x

Asset Models

Rev Asset model urls with date modified timestamps. Its simple… just call the function and pass the asset and an optional transform., _(*1)

Before:, _(*2)

Template: {{ asset.url(transform) }}
Output: https://local.craft3/uploads/biggie.jpg

After:, _(*3)

Template: {{ nsm_rev_asset_url(asset, transform) }}
Output: https://local.craft3/uploads/biggie.1496670969.jpg

Manifest Files

Additionally NSM Asset Rev can check a manifest file for urls and return the marching revved url., _(*4)

Manifest:, _(*5)

{ "app.css": "app.1e9915c1398b2ba2fcc2.css" }

Before:, _(*6)

Template: {{ url(app.css) }}
Output: https://local.craft3/app.css

After:, _(*7)

Template: {{ nsm_rev_manifest_url('app.css') }}
Output: https://local.craft3/app.1e9915c1398b2ba2fcc2.css

Manifest files will most likely be created from a build process., _(*8)

Here's some examples:, _(*9)

Note: NSM Asset Rev only supports one level key: value pairs., _(*10)

Installation

Step 1: Download the Bundle

Open a command console, enter your project directory and execute the following command to download the latest stable version of this bundle:, _(*11)

$ composer require newism/craft3-asset-rev

This command requires you to have Composer installed globally, as explained in the installation chapter of the Composer documentation., _(*12)

Step 2: Install

Install plugin in the Craft Control Panel under Settings > Plugins., _(*13)

Usage

Twig template functions

This plugin provides two twig functions., _(*14)

Asset Models

{{ nsm_rev_asset_url(asset, transform) }}

Manifest Files

{{ nsm_rev_manifest_url(url) }}

Helper

There's actually three twig functions :). The third is a helper that either calls nsm_rev_asset_url or nsm_rev_manifest_url based on the arguments., _(*15)

If the first argument is an Assetl then nsm_rev_asset_url will be called internally:, _(*16)

Template: {{ nsm_rev_url(asset, transform) }}
Output: https://local.craft3/uploads/biggie.1496670969.jpg

If the first argument is an string model then nsm_rev_manifest_url will be called internally:, _(*17)

Template: {{ nsm_rev_url('app.css') }}
Output: https://local.craft3/app.1e9915c1398b2ba2fcc2.css

Server Configuration

Important: This plugin doesn't actually change the the filename on the server. You'll need to implement rewrite rules in your apache conf or nginx access., _(*18)

Apache

See: https://github.com/h5bp/server-configs-apache/blob/master/dist/.htaccess#L968-L984, _(*19)

# ----------------------------------------------------------------------
# | Filename-based cache busting                                       |
# ----------------------------------------------------------------------

# If you're not using a build process to manage your filename version
# revving, you might want to consider enabling the following directives
# to route all requests such as `/style.12345.css` to `/style.css`.
#
# To understand why this is important and even a better solution than
# using something like `*.css?v231`, please see:
# http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

# <IfModule mod_rewrite.c>
#     RewriteEngine On
#     RewriteCond %{REQUEST_FILENAME} !-f
#     RewriteRule ^(.+)\.(\d+)\.(bmp|css|cur|gif|ico|jpe?g|js|png|svgz?|webp|webmanifest)$ $1.$3 [L]
# </IfModule>

NGINX

See: https://github.com/h5bp/server-configs-nginx/blob/master/h5bp/location/cache-busting.conf#L1-L10, _(*20)

# Built-in filename-based cache busting

# This will route all requests for /css/style.20120716.css to /css/style.css
# Read also this: github.com/h5bp/html5-boilerplate/wiki/cachebusting
# This is not included by default, because it'd be better if you use the build
# script to manage the file names.
location ~* (.+)\.(?:\d+)\.(bmp|css|cur|gif|ico|jpe?g|js|png|svgz?|webp|webmanifest)$ {
  try_files $uri $1.$2;
}