Another text overlay display on an image

As @tsuji_koichi already published, I think the trick of displaying text overlay on an image is very popular.
I tried a similar trick using Cloudinary (@LeventK seems to like it too :grinning_face_with_smiling_eyes:).

Preparation before working with AppSheet
Upload your images to Cloudinary.

I won’t go into details, but Cloudinary allows you to do various image manipulations on demand by setting the URL parameters as follows

Original Image URL


https://res.cloudinary.com/tmiyai/image/upload/v1612613900/ghibli/mononoke046.jpg

Custom Image URL


https://res.cloudinary.com/tmiyai/image/upload/l_v1612613900:black_bar,g_south,w_1.0,h_0.1,fl_relative,o_50,y_30/g_south,l_text:montserrat_80:AppSheet,y_40,co_rgb:CCCCCC/v1612613900/ghibli/mononoke046.jpg

Setting up in AppSheet
If you’re an AppSheet Developer, you’ve probably figured out the trick the moment you saw Cloudinary’s custom URL

You can create a variety of images by simply configuring the VC according to Cloudinary’s syntax

ex)

"https://res.cloudinary.com/tmiyai/image/upload/"&
IFS([isShowBackground], [BackgroundOption]) &
"c_fit,g_"&[Text_position]&
",l_text:"&[Font]&"_"&[FontSize]&
":"&ENCODEURL([Subtitle])&
",y_"&[Text_y]&",co_"&[FontColor]&
"/v1612613900/ghibli/"&[Image]. [File Name].

If you are interested, you can create a subtitle with the sample application to see how it works.
https://www.appsheet.com/samples/Sample-App?appGuidString=88c65761-0a53-4315-83d4-88f21c11a62d

Finally, Thanks to Studio Ghibli for the great Image!

Inspired by Post

7 Likes

Thank you for sharing @Takuya_Miyai

The fact that one can change the font type, font size, font color text position in the image, and finally even background can be optionally shown or hidden create multiple possibilities of using these options.

The sample app you have shared is also very neat- it immediately demonstrates the various capabilities of text overlay options.

Thank you.

6 Likes