digitalfabrik / integreat-cms

Simplified content management back end for the Integreat App - a multilingual information platform for newcomers
https://digitalfabrik.github.io/integreat-cms/
Apache License 2.0
56 stars 34 forks source link

Provide different image sizes for media endpoint #2359

Open ztefanie opened 1 year ago

ztefanie commented 1 year ago

Motivation

A lot of images are downloaded in a "big" size and then are scaled down in the frontend. So with this feature we can increase loading time/performance, use mobile data of users economical and save resources in general.

Proposed Solution

Serve images via the "/media" endpoint in different sizes. Also the size of the image needs to be provided, so the frontend can easily decide, which image should be downloaded. So for example response could look like this (of course old endpoint needs to stay for backwards compatibility):

"thumbnail": [
     { 
       size: "70px",
       url: "https://integreat-test.tuerantuer.org/media/regions/2/2017/03/icon_events_multi-s.png"
     },
     { 
       size: "150px",
       url: "https://integreat-test.tuerantuer.org/media/regions/2/2017/03/icon_events_multi-m.png"
     },
     { 
       size: "300px",
       url: "https://integreat-test.tuerantuer.org/media/regions/2/2017/03/icon_events_multi-l.png"
     },
     { 
       size: "900px",
       url: "https://integreat-test.tuerantuer.org/media/regions/2/2017/03/icon_events_multi-xl.png"
     },
]

Alternatives

We can maybe also have an endpoint like this: https://integreat-test.tuerantuer.org/media/regions/2/2017/03/icon_events_multi-xl.png?size=55px. Where frontend sends the needed size and backend provides the correct response, but I highly prefer the first idea, because: 1) We can use browsers srcset functionality 2) Caching will work worse with this solution

User Story

As a user I want to use mobile data economically. As a user I want to get a fast response, also my internet connection is slow. As a user on desktop with good internet connection, I want to get images with a good resolution

steffenkleinle commented 6 months ago

I thought this was already implemented for event thumbnails with the featured_image property, but it shows neither in the endpoint nor in the results anymore. Was this feature removed?

PeterNerlich commented 1 month ago

It seems like this never made it to the code base, as far as the current state of our git history goes:

$ git log -S featured_image
$ 

842 mentions it, though only as null in the example JSON output, so maybe that's where the impression that it should exist comes from?

steffenkleinle commented 1 month ago

It seems like this never made it to the code base, as far as the current state of our git history goes:

$ git log -S featured_image
$ 

842 mentions it, though only as null in the example JSON output, so maybe that's where the impression that it should exist comes from?

Hmm, I am sure that it was implemented in the CMS at some point. Might be that it was still the old wordpress CMS though.

Anyway, then lets tackle this together with the issue.