Liip Imagine Bundle behind a reverse proxy. How to fix the redirects to https

Liip Imagine Bundle behind a reverse proxy. How to fix the redirects to https

TL;DR;

Warm cache

Change the template

The problem

When you use the Liip Imagine Bundle behind a reverse proxy (e.g., Traefik), the generated URLs for the final cached images are not correct. The generated URLs redirect to HTTP instead of HTTPS

It may cause a few issues:

  • The browser may block the image because of mixed content
  • The image may not be displayed because the browser does not follow the redirect
  • Google Search may not index the image because of the redirect

The solution

The solution is to use the imagine_filter_cache instead of imagine_filter.

What is the difference?

  • imagine_filter generates the URL to the image with the filter applied
  • imagine_filter_cache generates the URL to the final cached image.

Important: In case of using imagine_filter_cache you need to warm the cache.

Step 1: Warm the cache

With Commands:

php bin/console liip:imagine:cache:resolve path1

path1 - the path to the image from public directory

Or with a queue: See documentation

Step 2: Change the template

Use

imagine_filter_cache

instead of

imagine_filter

Example

    <img src="{{ vich_uploader_asset(app, 'logo') | imagine_filter_cache('preview_app_logo_filter') }}" alt="{{ app.name }}">

That`s it. Now the generated URLs will be correct.