Use thumbnail URLs in search indexes to avoid them expiring
ClosedPublic
Actions

Authored by Anna Sirota (railla) on Oct 14 2020, 12:54 PM.

Details

Reviewers

Francesco Siddi (fsiddi)

Commits

rBLS3c3ffcd77f14: Use thumbnail URLs in search indexes to avoid them expiring

Summary

Goals of this patch

Fixing search images disappearing after a certain time passes after a search index is created.
See also https://developer.blender.org/T80115

Before:

After:

What it does

All media URLs in Blender Studio are CloudFront's signed URLs with a fixed expiry time, so when stored in a search index, they are only usable for a fixed amount of time after a ./manage.py index_documents command is called.
There's one exception from the "sign all media URLs" rule, and that is /cache/ path used by thumbnailing system, so using thumbnails instead FileField.url while indexing makes sure that only static media URLs end up in the search index.

Diff Detail

Repository: rBLS Blender Studio

Event Timeline

Anna Sirota (railla) requested review of this revision.Oct 14 2020, 12:54 PM

Anna Sirota (railla) created this revision.

Anna Sirota (railla) added a reviewer: Francesco Siddi (fsiddi).

Looks great. I only have one remark/question:

Can we support 2 thumbnail sizes (enforcing 16:9)?

1280x720 (called M)
640x360 (called S)

For asset listing or search, 360px is enough. When linking on social media 720p is better.
If this introduces more work I'm fine with 640x360 for now.

In D9208#227538, @Francesco Siddi (fsiddi) wrote:

Looks great. I only have one remark/question:

Can we support 2 thumbnail sizes (enforcing 16:9)?

1280x720 (called M)

640x360 (called S)

For asset listing or search, 360px is enough. When linking on social media 720p is better.
If this introduces more work I'm fine with 640x360 for now.

Would it make sense for to replace .thumbnail_url with .search_thumbnail_url that does the same, but with dimensions 640x360 instead of 400x used in the patch now?
At this point I've no idea how the templating of social media cards will work, but it seems to be not connected to the search thumbnails in any way

In D9208#227538, @Francesco Siddi (fsiddi) wrote:

Looks great. I only have one remark/question:

Can we support 2 thumbnail sizes (enforcing 16:9)?

1280x720 (called M)

640x360 (called S)

Not sure if it's important though, but it appears that there's already a selection of thumbnail sizes in the templates, none of their sizes match the 2 above, mostly it's

350x
576x
758x
992x
1200x
1920x

$ ack image_set.html
training/templates/training/home_authenticated.html
21:    {% include "common/components/helpers/image_set.html" with classes="jumbotron-bg" img_source=XXX xsmall_width="576" small_width="758" medium_width="992" large_width="1200" xlarge_width="1920" %}

training/templates/training/home_not_authenticated.html
22:    {% include "common/components/helpers/image_set.html" with classes="jumbotron-bg" img_source=XXX xsmall_width="576" small_width="758" medium_width="992" large_width="1200" xlarge_width="1920" %}

common/templates/common/home.html
11:    {% include "common/components/helpers/image_set.html" with classes="jumbotron-bg" img_source=XXX xsmall_width="576" small_width="758" medium_width="992" large_width="1200" xlarge_width="1920" %}

common/templates/common/welcome.html
10:    {% include "common/components/helpers/image_set.html" with classes="jumbotron-bg" img_source=XXX xsmall_width="576" small_width="758" medium_width="992" large_width="1200" xlarge_width="1920" %}
76:    {% include "common/components/helpers/image_set.html" with classes="jumbotron-bg" img_source=XXX xsmall_width="576" small_width="758" medium_width="992" large_width="1200" xlarge_width="1920" %}
240:            {% include "common/components/helpers/image_set.html" with classes="jumbotron-bg" img_source=XXX xsmall_width="576" small_width="758" medium_width="992" large_width="1200" xlarge_width="1920" %}

common/templates/common/components/file.html
9:      {% include "common/components/helpers/image_set.html" with alt=asset.name classes="file-image" img_source=asset.static_asset.preview xsmall_width="350" small_width="350" medium_width="350" large_width="350" xlarge_width="350" %}

common/templates/common/components/cards/card_blog.html
6:        {% include "common/components/helpers/image_set.html" with alt=post.title classes="card-image" img_source=post.thumbnail xsmall_width="350" small_width="350" medium_width="350" large_width="350" xlarge_width="350" %}

common/templates/common/components/cards/card_blog_large.html
4:{% include "common/components/helpers/image_set.html" with alt="alt" classes="card-image" img_source=post.thumbnail xsmall_width="350" small_width="350" medium_width="350" large_width="725" xlarge_width="725" %}

common/templates/common/components/cards/card_jumbotron.html
7:    {% include "common/components/helpers/image_set.html" with classes="jumbotron-bg" img_source=img xsmall_width="576" small_width="758" medium_width="992" large_width="1200" xlarge_width="1920" %}

common/templates/common/components/cards/card_training_masonry.html
7:        {% include "common/components/helpers/image_set.html" with alt=training.name classes="card-image" img_source=training.thumbnail xsmall_width="350" small_width="350" medium_width="350" large_width="350" xlarge_width="350" %}

common/templates/common/components/cards/card_training_masonry_large.html
4:{% include "common/components/helpers/image_set.html" with alt=training.name classes="card-image" img_source=training.thumbnail xsmall_width="350" small_width="350" medium_width="350" large_width="725" xlarge_width="725" %}

common/templates/common/components/modal_asset.html
44:          {% include "common/components/helpers/image_set.html" with alt=asset.name classes="img-fluid" img_source=asset.static_asset.preview xsmall_width="576" small_width="768" medium_width="768" large_width="870" xlarge_width="780" %}

films/templates/films/components/card_film.html
6:        {% include "common/components/helpers/image_set.html" with alt=film.title classes="img-fluid" img_source=film.poster xsmall_width="250" small_width="300" medium_width="375" large_width="400" xlarge_width="500" %}

films/templates/films/components/jumbotron_film.html
3:    {% include "common/components/helpers/image_set.html" with classes="jumbotron-bg" img_source=film.picture_header xsmall_width="576" small_width="758" medium_width="992" large_width="1200" xlarge_width="1920" %}

rBLSfe84a391117f Configure crop mode
rBLS98e155c7ff4b Two thumbnail sizes: s/m

Noticed a few things about thumbnailing:

crop="smart" mode on my machine freezes indefinitely on a "ToS Wallpaper";
omitted crop doesn't respect the Y dimension, generating 400x219, for example, instead of 400x225;
neither "smart" nor "center" generate suitable results for all the asset images (see below), so we might need to re-uploaded original previews of some of the assets later.

crop center: