Contentful logo

Contentful Community

How to pass multiple images by GetAssets() function

#1

Hello,

I’m figuring out how to pass multiple images/assets in my ‘GetClientById’ function. Normally I use something like:

clientbase.getEntry(clientId)
  .then(article => {
    **clientbase.getAsset(client.fields.backgroundImage.sys.id)**
      .then(asset => {
        resolve({

But now I have multiple images for the property ‘client’ instead of 1 image…

This is the code that I have, with the bold part where my question is about:

   let getClients = (skip,limit) => {
     return clientbase.getEntries({
        'content_type': 'client',
        skip: typeof skip === 'number' ? skip : 0,
        limit: typeof limit === 'number' ? limit : 100
        })
 .then(data => {
    let clients = [];
    data.items.forEach(item => {
    let logoImageUrlAsset = data.includes.Asset.find(asset => {
      return asset.sys.id === item.fields.logo.sys.id
    })
    let logoColorfullImageUrlAsset = data.includes.Asset.find(asset => {
      return asset.sys.id === item.fields.logoColorfull.sys.id
    })
    let backgroundImageUrlAsset = data.includes.Asset.find(asset => {
      return asset.sys.id === item.fields.backgroundImage.sys.id
    })

    let backgroundImageUrl = backgroundImageUrlAsset ? backgroundImageUrlAsset.fields.file.url : null
    let logoImageUrl = logoImageUrlAsset ? logoImageUrlAsset.fields.file.url : null
    let logoColorfullImageUrl = logoColorfullImageUrlAsset ? logoColorfullImageUrlAsset.fields.file.url : null

    clients.push({
      id: item.sys.id,
      name: item.fields.name,
      caseName: item.fields.caseName,
      description: item.fields.description,
      shortDescription: item.fields.shortDescription,
      imageMaskColor: item.fields.maskColor,
      logoImageUrl: logoImageUrl,
      logoColorfullImageUrl: logoColorfullImageUrl,
      backgroundImageUrl: backgroundImageUrl,
      order: item.fields.order,
      hasSubCase: false,
      hasMultipleSubcases: typeof item.fields.hasMultipleSubcases !== 'undefined' ? item.fields.hasMultipleSubcases : false,
      mainOrChildCase: typeof item.fields.mainOrChildCase !== 'undefined' ? item.fields.mainOrChildCase : false,
      showOnHomepage: typeof item.fields.showOnHomepage !== 'undefined' ? item.fields.showOnHomepage : false
    })
  })

  return {
    items: clients,
    canLoadMore: (skip + limit) < data.total
  };
});

};

  let getClientById = (clientId) => {
    return new Promise((resolve) => {
      clientbase.getEntry(clientId)
       .then(client => {
      **clientbase.getAssets(**
               **[**
               **client.fields.logoColorfull.sys.id,**
               **client.fields.backgroundImage.sys.id**
               **])**
        .then(asset => {
          resolve({
          name: client.fields.name,
          caseName: client.fields.caseName,
          description: client.fields.description,
          shortDescription: client.fields.shortDescription,
          logoImageUrl: asset.fields.file.url,
          logoColorfullImageUrl: asset.fields.file.url,
          imageMaskColor: client.fields.maskColor,
          backgroundImageUrl: asset.fields.file.url,
          order: client.fields.order,
          mainOrChildCase: typeof client.fields.mainOrChildCase !== 'undefined' ? client.fields.mainOrChildCase : false,
          showOnHomepage: typeof client.fields.showOnHomepage !== 'undefined' ? client.fields.showOnHomepage : false
        })
      })
    })
  })
}

Hopefully someone can help me in the right direction.

0 Likes