Pull Image column pics into LongText columns

[Kirk_Masden]

Today I made a little template app the I hope some of you will find to be of interest:

Image Hack:
https://www.appsheet.com/templates?appGuidString=ac4fda82-c8cb-4b6b-8a67-983251ea4c98

Here's how I explain the idea on the template page:

This app shows how to use a LongText column to display the image data collected via an Image column. Unlike an ordinary image column, the height of an image in a LongText column is not predetermined. So, portrait image are significantly larger when displayed in a LongText column and wide images that have little height waste less space.

Here are some images to help illustrate the idea.  First, what you see below illustrates the problem.  The first image on the right is what a portrait-oriented image looks like when used as the "Main image" for a Detail_view and the "Image style" is set to "Fit."  This is fine.  The problem is with the image below it.  Because image columns in AppSheet require images to be shrunk to whatever will fit in pre-determined landscape-type box, portrait-type images wind up being tiny.

Now, for the solution.  Here's what the same image looks like in a LongText column:

In other words, it's not necessary to tap on the image to see it properly.

In the app I made, everything you need to display whatever image you upload in the LongText column is in the app so all you have to do is upload an image and see how it looks.

I also like the fact that it works very well with flat images:

Notice all of the wasted white space above and below the image in the conventional image column.  In the LongText column, very little space is wasted.

Actually, I didn't want to stop here.  I also wanted to show how an image from the Image column could be displayed in a Show column but I couldn't get that to work.  😞 I figured out how to add a Show column.  It's now part of the app.  The dimensions of an image in a show column depend on the width of the area available, as follows:



AppSheet offers display options for what they call the "Main image" (What is display at the top of a Detail view).  That's fine but why don't we have similar options for displaying images in the body our views?  Clearly, this little hack of mine shows that it shouldn't be difficult.

This tip is an extension of a previous tip of mine:

Display images in LongText columns via HTML (rich text)
https://www.googlecloudcommunity.com/gc/Tips-Tricks/Display-images-in-LongText-columns-via-HTML-rich...

The problem with that "tip" that I tried to solve here was coming up with a way to add this images that would be easy to implement.  I hope you'll agree that this does the trick.

Techniques used:

1. Take image from image column and display as link (by @Grant_Stead ) https://www.googlecloudcommunity.com/gc/AppSheet-Q-A/Take-image-from-image-column-and-display-as-lin...

2. Context("AppName"): https://support.google.com/appsheet/answer/10107885

3. Rich Text Formatting - in Preview Program: https://www.googlecloudcommunity.com/gc/Announcements/Rich-Text-Formatting-in-Preview-Program/m-p/35...

[Kirk_Masden]

I've just added a Show column to the types of columns displaying images in my template app.  (And there's a new gif video showing how the display of images in Show columns changes depending on the width of the space available.) All of the data in each row comes from a single image column but this app shows 4 ways in which the image can be displayed via different column types, etc.  At the risk of being rather immodest, I think this should be of interest in to newbies (and some experienced AppSheet creators) who need to decide just how they want to display their images in their apps.  Personally, I learned a few things about how to handle images in in AppSheet that I didn't know until doing this.

Of course, there's another important type of image -- the SVG image.  Many people have written about these images but here's a link to something I wrote on the topic:
Using SVG "interface" images