Cropped images and missing inline pdfs

Wondering if anyone knows how to fix the issue. I have some icons I want to display in a circle image component- they keep getting cropped doesn’t matter what size I pick. I’ve had to revert to squares but it’s not what I wanted.

This is just to show the image my app won’t load so I can’t show what the image looks like cropped.

Then I also have an issue with pdf links. I’m fetching the image as inline by displaying in an image component but also using the link component. Ok some it works and others it doesn’t. Thank you for the help😊.
Missing inline pdf- just showing link to pdf

Successfully embedded inline pdf using image component

Are you saying the image does not load at all, or that this is the image that gets cut off when you change to a circle container? Curious why you can’t show a screenshot of it being cut off. The only advice I can provide is to make sure your image is a 1:1 ratio (square), and that you have enough of a border to account for any cutoff around the edges that may occur.

The fact that you can show a PDF in an image component is an unintentional feature that has always existed, but was never planned or officially supported by Glide. Generally whenever it does work, it’s only going to show the first page of multi-page PDF, so it’s not always beneficial. In your case, there may be something unique with the PDF itself that prevents it from rendering as an image. Hard to say without having a copy of the PDF.

I think most of us tend to use a web embed component to view and interact with PDFs. Even then, it is a little bit of setup, but makes for a nice way to view multi-page PDFs within the app.

1 Like


The web image loads this is this screenshot above, however last night when I was trying to show what it looks like cropped Glide wasn’t loading for me to change. Right now this is a square- there are no issues with a square. I want a circle component and that crops the icon. Thank you for replying.

I do just want the first page to show not the whole pdf so that solution was adequate. I haven’t done a paid plan as I was still checking feasibility. Also it’s just annoying the some work and others don’t. I’m going to resort to cropping an image and uploading the file since a url redirect can fail if the file is moved.

This is

Can you share a copy of that image here so we can try it ourselves and see what it looks like in a circle container?

Can you share a copy here of a PDF that’s not working so we can try it?

I’m not sure what you mean by this. If you are referring to the web embed solution that uses a template column…it is dynamic, so file location doesn’t matter if it’s moved. Add long as the url is in the table is current, then the template column will build accordingly based on the values in that url column.

So here are the circles and the component setting that cause cropping (doesn’t matter which size I use).


Screenshot 2023-11-16 at 19.05.45

If I use the Title in Design to display the name, the text wraps in a way that isn’t UI friendly and I can’t see how to sort it out except to use description which takes the bold takes that I want out.

Regarding the pdf url- The url I am directing to is not somewhere I have control over. So if the move the file people will lose access (which happens a lot and the url will point to a broken link). All I was saying is it’s better for me to store the file to reduce the risk of my app being redundant because the original authors have moved the file. Hope that makes sense.

OK, I was hoping for an actual image and an actual PDF that I could plug into an app to try it for myself.

Hard to say without an actual image in front of me, but on the surface it looks like they are square 1:1 ratio images. Like I mentioned earlier, have you tried to edit the images to add a larger border around the edges? I think that would help solve the cropping issue. If you put a circle on top of a square image, it is going to cut off the corners so you have to add enough of a border to account for that.

That’s a separate issue, but basically if the text can’t fit in the container, and can’t fit in the allotted screen space, then something is going to get cut off. I do agree in that I wish there was more control over text size, color, style, etc. but we have what we have and just have to adjust for it.

If you are storing the PDF file yourself in glide storage, then I’m still not sure what the problem is. You already have control over it’s location. So I’m not really sure how that relates to my earlier suggestion for using the web embed to view a PDF, or how it relates the the image of the PDF not showing. I feel like we got of track on this part of the conversation.

So, at this point, my only suggestions are:

  • Photoshop your images so they have enough space around the edges to accommodate putting a square peg in a round hole.
  • If a PDF doesn’t properly render as an image, then maybe there is an issue with the PDF. Either find a service that can convert a PDF to an actual image, or use the web embed method to show the PDF in a web embed component on the screen instead of an image component.
1 Like

This url doesn’t render: https://investor.bang-olufsen.com/static-files/39ffb45c-dbd4-4e12-a6e4-5d468a12d1d8

This one is ok: https://assets.bose.com/content/dam/Bose_DAM/Web/consumer_electronics/global/content_pages/corporate/about_us/sustainability/sustainability_2022_refresh/Bose_2022_Sustainability_Report.pdf

Thank you for your helpful suggestions :slight_smile:

OK, I did 4 tests.

  • Test 1 - B&O with original URL
  • Test 2 - Bose with original URL
  • Test 3 - B&O with URL of file uploaded to glide storage
  • Test 4 - Bose with URL of file uploaded to glide storage

As you can see, Test1 was the only one that did not work and I think I know why. The original B&O URL is not a direct url to the PDF. The B&O server is probably taking that url, searching on their system for the file and returning a PDF in the HTTP response, but the url itself is not the actual PDF. This is apparent when you download the file and it’s obviously a normal file name instead of the GUID code that is part of the url.

On the other hand, the Bose URL is in fact pointing directly to a PDF and because of that the image is rendered.

For Tests 3 and 4 I downloaded each PDF and then uploaded them directly to my Glide storage. As you can see they both worked because the URL is in fact referring directly to the PDF document and not some arbitrary url. If you are going to store the file yourself as you say you are, then I don’t think you should have any problem using the url from your glide storage.

So I guess the question is this…have you actually uploaded the PDF documents yourself and pointed the image component to the url of your uploaded document, or have you only tested with the urls directly from B&O and Bose?


As a side note, just to show what I do with the web embed, here is the url from Test3 being shown in a web embed. Here you can scroll and interact with the PDF directly inside of the app.

2 Likes

Thank you for taking the time to test this. The web embed looks good, I would enable it for a paying customer.

1 Like