Q&A AOA Integration

Q:

What’s the different logo_url between medium & thumb & large

"logo_url": {
	"medium": "<https://hungryhub.com/uploads/restaurant/logo/997/12764618_993228954095365_7698085734652638054_o.jpg>",
	"thumb": "<https://hungryhub.com/uploads/restaurant/logo/997/12764618_993228954095365_7698085734652638054_o.jpg>"
}

A:

Previously we use this to differentiate the size

• thumb means thumbnail (small size)
• medium means medium size
• large means large size But right now we don't use it anymore Currently, we use https://imgproxy.net/ to scale up and down the image size You can just pick the biggest size and scale it up and down using imgproxy Example in js:

const baseUrl = "<https://imgproxy.hungryhub.com/insecure>";

export function mutatorService(
  resizingType = "fill",
  width: number | string,
  height: number | string,
  gravity = "ce",
  enlarge = 0,
  url: string,
  format: string
) {
  try {
    const encodedUrl = btoa(url);
    const parsedUrl = `${baseUrl}/${resizingType}/${width}/${height}/${gravity}/${enlarge}/${encodedUrl}`;
    if (format) {
      return `${parsedUrl}.${format}`;
    }
    return parsedUrl;
  } catch (err) {
    // if encode process failed, use plain url (usually file name contain Thai charcter)
    const parsedUrl = `${baseUrl}/${resizingType}/${width}/${height}/${gravity}/${enlarge}/plain/${url}`;
    if (format) {
      return `${parsedUrl}@${format}`;
    }
    return parsedUrl;
  }
}

Usage:

mutatorService("fill", 50, 50, "ce", 0, finalUrl, "webp");

This will return the image URL with size 50px * 50px