Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: Get multiple image sizes for populated fields #119

Open
rubenheymans opened this issue Mar 2, 2020 · 5 comments
Open

Comments

@rubenheymans
Copy link

rubenheymans commented Mar 2, 2020

I have a schema 'realizations' with field 'images'. For every image I want a small and a large image to use in a lightbox.
I managed to do this with a workaround:

this.realisations = await this.flamelinkService
      .getApp()
      .content.get({
        schemaKey: 'realizations',
        fields: ['date', 'category', 'images'],
        populate: [
          'category',
          {
            field: 'images',
            size: {
              width: 375,
              height: 9999,
              quality: 1
            }
          }
        ]
      })
      .then(results => {
        if (!results) {
          return [];
        }
        results = Object.values(results);

        results.map(result =>
          result.images.map(async image => {
            image.largeUrl = await this.flamelinkService.getApp().storage.getURL({
              fileId: image.id,
              size: {
                width: 1440,
                height: 9999,
                quality: 1
              }
            });
            return image;
          })
        );
        return results;
      });

A better solution, as suggested by @jperasmus , would be to use a an array of sizes to the populate field:

sizes: [
        {
          width: 375,
          height: 9999,
          quality: 1
        },
        {
          width: 500,
          height: 9999,
          quality: 1
        }
      ]

Which then returns the entries with a sizes array that includes the url for each size.

@nrgnrg
Copy link

nrgnrg commented Aug 20, 2020

I think good solution to this would be if the image URL's for each size could be cached on the document so they are downloaded with the original request, that way there is no need to specify an array of sizes on the request and there is no additional network ingress from the internal call to getDownloadUrl() which I am finding a bottleneck. This solution would also make using srcset trivial.

@thelazyindian
Copy link

I would also like to know if its possible to implement this feature. It'd be great.

@thelazyindian
Copy link

@gitdubz Can you please let us know if you're adding this in near future ?

@gitdubz
Copy link
Contributor

gitdubz commented Jun 15, 2021

Hi @nrgnrg @thelazyindian

I will investigate what changes need to be made. From an ease of use perspective this makes sense. In the event that we do make the changes for this functionality it would make sense to handle an array of sizes to populate the value.

In addition to this, an update to the schema builder will be done later this year to choose between storing file/image data as a reference or the value itself. This will reduce network calls as mentioned, but can also cause issues if access tokens are revoked or expire. We are looking into the last part before making these changes in the CMS.

@thelazyindian
Copy link

Good to know!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants