Glide is restricting display of placehold.co URLs

[gannonatwork]

Glide is prohibiting the display of placehold.co URLs due to missing OpenGraph tags even though these tags are present. Below are sample image URLs and and a description to document the issue:

Placeholder image generated by dummyimage.com

![](upload://nZ9pEUA5KbAzcNHRn9dq1UERBUV.png)

Placeholder image generated by Placehold.co

https://placehold.co/960x540/ebebeb/000?text=372&font=roboto

You’ll see the dummyimage URL displays without issue, but we get an error msg when using the placehold URL stating there are OpenGraph tags missing.

However, if you look at the source of placehold.co the referenced og:tags are clearly present:

Our use case is we need to display a series of metrics in an analytics dashboard and we can’t use the Big Numbers component because of the lack of actions and inability to display BNs in a Collection. Instead, we’re using a Template column to dynamically create these placeholder images to display individual data points inside a Collection component.

Thank you in advance for your time and assistance to fix this bug.

[Eric_Penn]

One workaround is to make your own big number with html in a rich text component and then put the rich text in a custom collection.

One of the v88’s shared this one

<p style =";border-width:1px; border-style:solid; border-color:#DCDCDC;padding: 1em;border-radius: 10px;text-align:left"><b>Notes</b>

[gannonatwork]

@Eric_Penn I appreciate you reaching out and making the suggestion…a good workaround. The issue we’re having is the continued limitations of the custom collection component — as outlined here — and use of the CC component would break the overall design of our app as @Jeff_Hager points out in that thread.

Can’t style a custom collection using Design > Width > Narrow. Ugh. Can’t put a custom collection in a container to restrict width. Ugh and a sigh.

Thanks again for the suggestion though! We’ll likely use v88’s styling suggestion and just manually set actions to individual RTs to mimic a collection as a workaround for now until things change.

Our temporary workaround using HTML and RT components:

[ThinhDinh]

That’s weird placehold.co doesn’t work. Place-hold.it has the same setup (without the extension) but it works.

I haven’t found a way to change the font family though.

[gannonatwork]

Hey @ThinhDinh. I appreciate you recommending place-hold.it and testing that it indeed works. Yeah, the lack of font control is kind of a deal breaker for us. I think we’re going to stick with the design you see above for now (even though it’s more work and maintenance) with the hopes Glide will allow for more control over custom collections in the future. Thx again.

[Jeff_Hager]

Ask ChatGPT for some javascript. Generating images like this is not overly complicated. You can ask for javascript that will take in text as a parameter and return an image uri. That coded uri can then be used anywhere you display an image…as an image. Completely removes the need for any third party services, which are basically doing the same thing your javascript would. Then you can tweak it to show text in the format you want.

[ThinhDinh]

Here you go.

function generateImageURI(text, options = {}) {
  // Set default values
  const {
    width = 960,
    height = 540,
    backgroundColor = 'ebebeb',
    textColor = '000',
    font = 'Roboto',
    fontSize = 100, // Fixed font size in pixels
    fontWeight = 'bold'
  } = options;

  // Create a canvas element
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');

  // Draw background
  ctx.fillStyle = `#${backgroundColor}`;
  ctx.fillRect(0, 0, width, height);

  // Set up text
  ctx.fillStyle = `#${textColor}`;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.font = `${fontWeight} ${fontSize}px ${font}, sans-serif`;

  // Draw text
  ctx.fillText(text, width / 2, height / 2);

  // Convert canvas to data URI
  return canvas.toDataURL('image/png');
}

return generateImageURI(p1)

Set p1 to the column where you store the text you want to display. Thanks to Jeff for the idea.

[gannonatwork]

Thx, @Jeff_Hager. I’ll give this a try and see if I can achieve the same result as what I’ve shown above. I appreciate the suggestion.

[gannonatwork]

@ThinhDinh This is awesome! I appreciate you testing out the concept and posting the resulting layout and javascript. Quick question — did you end up using ChatGPT to generate or did you write it yourself? Thx again, very kind of you to continue to provide input on this.

[ThinhDinh]

I almost exclusively use Claude these days to generate code. You can get OpenAI, Claude, LLaMA and other models on Abacus’ ChatLLM at $10, I think that’s a great deal.