Add Timestamp for Theme Images in Liferay 7.2.10

Scenario: If we are trying to load the static resources when we have Cache Server (Varnish) in front of  Liferay Tomcat Server,  the request first goes to the Cache Server. If the resource is not available in cache server then it will get it from the Liferay Tomcat Server and loads into the cache for the subsequent requests. 

Though if we deploy the theme with the updated image still image will get load from the cache itself instead of loading from liferay server for the same image. 

In browser Developer Tools ->Network tab we can see the images loaded with the theme,

Request URL: http://localhost:8080/o/theme/images/arrow.png

The theme images are cached at users browsers, proxies or other internet caches for 10 years because at HeaderFilter the expire/cache-control is set to 315360000 seconds.

This causes trouble when you modify and redeploy a custom theme, the old theme images are cached until you execute a manual clean of the caches.

At JS and CSS this problem is not happening because a additional &t=1416843722707 parameter is added with the modified date of file at disk

When ever deploy the theme, in-order to load the updated images from the server instead of loading from the cache server then we need to make changes in the image url by appending the Timestamp.

Request URL: http://localhost:8080/o/theme/images/arrow.png?t=1597813940632

Note: By default Liferay will append the timestamp for the documents (images/documents uploaded through document and library). 

Solution:  Add the below script in build.gradle file and run the Gradle Task deploy. In each deployment before generate the war it will append the timestamp for the images by replacing the placeholder in main.css file. You can customize as per your need.

build.gradle:

import java.util.Calendar;

import java.util.Date;

 

def getTimestamp() {

       Calendar calendar = Calendar.getInstance();

       calendar.setTime(new Date());

    return calendar.getTimeInMillis();

}

war {

    eachFile { copyDetails ->

             println ':'+copyDetails.path+':'+getTimestamp()

              if (copyDetails.path == 'css/main.css') {

                    println '>'+copyDetails.path;

                   filter { line ->

                       line.replace('?t=', '?t='+getTimestamp())

                   }

               }

    

    }

   }