Cannot serve images requested in one path (parent_theme) from another (child_theme) using nginx-includes

trellis
1

Hi all,

I want to serve a set of optimized images from my child_theme, as a response to the requests in the parent_theme

To do that i’ve created the following file (under trellis/nginx-includes/all)

── nginx-includes
│   └── all
│       └── rewrites.conf.j2

The file contain this…

location ~* ^/app/themes/perfetta/images/(.*) {
	rewrite ^/app/themes/perfetta/images/(.*) /app/themes/_lasrecetasdeguada/images/$1 last;
}

I’m not 100% sure if this is correct, but i’m trying different approaches and none of them seem to work. The idea is to capture all requests to the folder images in the parent theme (perfetta) and instead of those files, serve the ones at my child theme (_lasrecetasdeguada) => these images in my child theme are compressed and optimized

After this i’m doing vagrant provision and evertyhing goes ok with the provision.

If i check the virtual machine (with vagrant ssh) i can verify that te proper files are being created in the proper location

── etc
│   └── nginx
│       └── includes.d
│           └── all
│               └── rewrites.conf

But when i request http://lasrecetasdeguada.test/app/themes/perfetta/images/bg-desktop.jpg (domain part of multisite)
or
http://juanmaguitar.test/app/themes/perfetta/images/bg-desktop.jpg (path with main domain of multisite), the original file (the one in the parent theme) is served instead of the one in the child theme

Any idea? I haven’t seen this solution anywhere but i think it could be a good solution to serve optimized assets (images, css, js) of plugins or themes from our child_themes

Thanks in advance!!!

  • JuanMa

Note: I’m trying this in my local multisite installation. Being juanmaguitar.test the main domain and lasrecetasdeguada.test the domain of one of the sites

2

The problem were a few things combined i think…

Cache

I think the cache was interfering with my attempt of getting a different file so i cleaned the nginx cache
Just by removing the folder /var/cache/nginx the cache was cleared and rebuilt with fresh items after every new request from that moment.

Order of nginx-includes

I actually had the following files under nginx-includes

── nginx-includes
│   └── all
│       └── cache.conf.j2
│       └── rewrites.conf.j2

The cache.conf.js contains this…

location ~*  \.(jpg|jpeg|png|gif|ico|css|js|svg)$ {
    expires 365d;
}

location ~*  \.(pdf)$ {
    expires 30d;
}

I think, because at some point of wordpress-site.conf.js it does

include includes.d/all/*.conf;
include includes.d/{{ item.key }}/*.conf;

That the files generated by my nginx-includes were being loaded in the wrong order. Somehow the cache.conf.js was cancelling the efects of rewrites.conf.j2

So, to force the order i need i renamed the files in that folder like this…

.
└── all
    ├── 01-rewrites.conf.j2
    └── 02-cache.conf.j2

Conclusion

After doing these 2 things (not really sure about the real impact of removing the cache), both rules are being applied properly (file served from a different location and with cache max-age added