How to flow text around an image in LC?

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: Klaus, FourthWorld, heatherlaine, kevinmiller

ValiantCuriosity
Posts: 63
Joined: Thu Jun 30, 2016 3:08 am

How to flow text around an image in LC?

Post by ValiantCuriosity » Sun Feb 10, 2019 4:13 am

I would like to use a scrolling field or field widget in LC. Within the widget, I would like to place an image on the left side of the text. I'd like the text to flow around the image. How do I approach this using LC?

Should I use a grid/table? Should I use grouping? I've tried inserting my image widget in the field but it work. It is on a different LC layer. I'm kind of lost on this one.

Oh, and while I'm at it, what about text justification. I don't see it listed in the object --> text (A) area. Surely, there must be some way to apply it to the text. :?:

Again,
TIA
-Rachel
May I never be cured of my curiosity! :D

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 2969
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria
Contact:

Re: How to flow text around an image in LC?

Post by richmond62 » Sun Feb 10, 2019 11:16 am

This is probably not on the cards as TEXT is, normally held in a field, while an IMAGE is another
object.

If I were to try for this type of thing I would CHEAT by making up the text with it flowing
round the image somewhere else (e.g. a word-processing package), take a screenshot of
that and then import it into my stack as an image.

While that may appear a bit wonky, it has the added advantage that you will have
100% consistency with your font and how your text flows across all platforms you
wish to deliver your finished work.
-
wrap.png
-
I used Apache Open Office for this.
Attachments
WrappedUP.livecode.zip
Here's the stack
(120.03 KiB) Downloaded 5 times

bogs
Posts: 2817
Joined: Sat Feb 25, 2017 10:45 pm

Re: How to flow text around an image in LC?

Post by bogs » Sun Feb 10, 2019 12:01 pm

ValiantCuriosity wrote:
Sun Feb 10, 2019 4:13 am
Oh, and while I'm at it, what about text justification. I don't see it listed in the object --> text (A) area. Surely, there must be some way to apply it to the text.
If by 'justification' you mean 'aligning' the text, that is the textAlign property at the bottom of that (A) area.

You can stick an image into a field, using imageSource, but I've only ever used it on one line. Not sure if text would flow around it or not.

You can also target the forums in your favorite search engine using, in this case, this type of search -
site:forums.livecode.com image in field
... where the site is the address to the forums, then a space, then quoted or unquoted search terms. In duckduckgo , the result shows like this -
Selection_004.png
Find me!
Image

ValiantCuriosity
Posts: 63
Joined: Thu Jun 30, 2016 3:08 am

Re: How to flow text around an image in LC?

Post by ValiantCuriosity » Sun Feb 10, 2019 6:43 pm

Thank you again Bogs. I swear that I searched the forum. I did find a few things, but not the link that you sent. Also, all this time, and I didn't know about the search feature for the browser. Thanks for that too.

A "thank you" to richmond62 as well. Interesting way of working around the issue. Never would have thought of it.

Now, I'm off to play with the newly planted information. :D

-Rachel
May I never be cured of my curiosity! :D

Klaus
Posts: 10639
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: How to flow text around an image in LC?

Post by Klaus » Sun Feb 10, 2019 6:54 pm

"imagesource" or not, there is no build-in and/or easy way to have "flowing text" around images. These layout-features are not available in LC like in a dedicated layout-app like Pages, InDesign etc.

bogs
Posts: 2817
Joined: Sat Feb 25, 2017 10:45 pm

Re: How to flow text around an image in LC?

Post by bogs » Sun Feb 10, 2019 10:30 pm

ValiantCuriosity wrote:
Sun Feb 10, 2019 6:43 pm
I swear that I searched the forum.
Oh, I was sure of that before I even posted. I've yet to see a forum that had a really (what I would consider) great set of search tools, which is why I usually drop back to a search engine for searching things whenever possible :D
Klaus wrote:
Sun Feb 10, 2019 6:54 pm
there is no build-in and/or easy way to have "flowing text" around images.
I actually agree with this statement, but I have 'wrapped text around images' in goofy and clunky kludgey ways. Mind you Rachel, I am absolutely *not* suggesting you use this kind of method unless you become desperate :D

Having said that, heh, here we go having some fun :mrgreen:
Selection_004.png
The measure of DOOM!
As you can see, this is nothing more than 1 field which everything sits on and is only there for looks (a backdrop, you might say). On top of that is an 'image', and 3 more fields positioned where you want the text.
Selection_005.png
Looking behind the curtain...
Once you have it setup satifactorily, disable the borders on the 3 fields the text would be entered in, then group the whole shebang. Make sure if your fields go below the groups 'border', you have a vertical scrollbar on it :wink:

This absolutely works best if you have static, pre-planned text (well, it is easier that way, anyway), but if your going to be dynamically changing text, you'll be reading about formatted heights, widths, and all kinds of other goodies to get that text to the right boxes :D
Image

ValiantCuriosity
Posts: 63
Joined: Thu Jun 30, 2016 3:08 am

Re: How to flow text around an image in LC?

Post by ValiantCuriosity » Mon Feb 11, 2019 12:00 am

I've spent the day trying to get the imageSource script to work. Blah... nope!

Really, <small whine> text and images should be able to be easily mixed. I've spent hours on, again, a relatively simple thing to do in HTML5. That said, I noticed that LC can use HTML5 for inserting images, but how would you do that with an imported LC image? I'm guessing that imported images are the way to go for iOS apps.

I've tried the following recommended imageSource code. The image never even displays in the field.

Code: Select all

set the imageSource of char thisChar of "About the Video Exercises" to "videoImage.png"
set the imageSource of char 1 of line 2 of field "This" to "videoImage.png"
set the imageSource of char 1 of line 1 of field "About the Video Exercises" to 1095
I've also looked at Images and Multimedia.livecode (one of the scripting conferences that Klaus recommenced). It shows Logo headers in the content area. I've tried to find the code there that would help me, but I don't see any that displays the Logo image.

The field within the collapsible that I am using provides only static information, but it needs to include images.

Bogs solution may be what I need. Though, I'm nervous about trying it since he isn't recommending it for real world use.

Maybe richmond62's suggestion will be my next try, but I'm worried about pixelation there. Plus, I need the collapsible so an image might not work with that.

Guess tomorrow is another day...

Thanks guys... -Rachel
May I never be cured of my curiosity! :D

bogs
Posts: 2817
Joined: Sat Feb 25, 2017 10:45 pm

Re: How to flow text around an image in LC?

Post by bogs » Mon Feb 11, 2019 11:58 am

ValiantCuriosity wrote:
Mon Feb 11, 2019 12:00 am
I've spent the day trying to get the imageSource script to work. Blah... nope!
Hmm, not sure why it wouldn't work, but I can take some guesses !

First, though, I really don't think image source is going to do what (I think) your looking to do. In this example, the image is set to 100 x 100. This is what the text would look like without a LOT more work.
Selection_004.png
The high and mighty!
For the above picture, the actual code used in the openCard script was -

Code: Select all

set the imageSource of char 1 of line 2 of field 1 to 1005 // the cute penguin...
Things I had to know in advance were -
Where line 2 was going to be (not as simple as it always sounds)
The id of the image (1005 in this case)

As you can see, though, it isn't exactly 'beauty on the roll' going about it this way.
ValiantCuriosity wrote:
Mon Feb 11, 2019 12:00 am
Bogs solution may be what I need. Though, I'm nervous about trying it since he isn't recommending it for real world use.
Aside from learning this language, you will (at some point) learn Bogs is a wise guy who thinks he is funny, in a goofy corny type of way. You'll also find out he talks about himself in the third person a lot :twisted:

Mostly the target of the previous 'joking around' wasn't you, it was Klaus. While I have nothing but the utmost respect for Klaus and his abilities in many areas, not to mention how he has made my own (and MANY OTHERS) introduction to this language much easier than it might have been otherwise, for some reason he always makes me want to make him chuckle, so I tend to 'poke' him a bit Image

In this case, the line -
there is no build-in and/or easy way to have "flowing text" around images.
did the trick Image Image Image

To sort of 'make up' for my previous attempt at joking (which obviously failed), I'll show you yet another way to get the magical 'text flowing around an image' using only 1 field and 1 image!
Selection_005.png
It is MAGIC!
Now, in the above picture, you can see I used the underscore ( _ ) character to make it really obvious what is going on in the contents pane. The setup was as simple as -
drag a field onto the stack
drag an image onto the field
set the size of the image to whatever you find appropriate
lock the images size so it doesn't do something you don't expect, like take up 50 rows/columns
format your text ( in this case using underscores ) so that it flows around the image.

Now, of the 2 methods I've shown here, my preference tends to lean towards the first method for a couple of reasons.
  1. When you enter text in the 'contents' pane of the property inspector, you have to keep clicking out of it to see the results, which gets tedious.
  2. With the 1st method (positioning text fields), you can simply hit the 'Run' (browse tool) and click on each field and enter what you want.
  3. After the field(s) are filled with your text, simply size them so you don't have any cut off text (usually [g] or [q]
Hope that straightens everything out :mrgreen:
Last edited by bogs on Mon Feb 11, 2019 7:14 pm, edited 1 time in total.
Image

bogs
Posts: 2817
Joined: Sat Feb 25, 2017 10:45 pm

Re: How to flow text around an image in LC?

Post by bogs » Mon Feb 11, 2019 2:25 pm

You know, in all of this thread, I also forgot to mention that you can use a browser object and just display the html pages you already created previously Image

Not only that, but that same browser object can display any new pages you decide to make in html or any changes you made as well ImageImage
Image

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 2969
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria
Contact:

Re: How to flow text around an image in LC?

Post by richmond62 » Mon Feb 11, 2019 6:54 pm

AND . . . one could import snapshots from the browser object to guarantee
cross-platform parity.

Of course there ain't much difference, when push comes to shove, of displaying
snapshots of a browser object and snapshots of a word-processing package:

in both cases the actual word-wrapping was done outwith LiveCode. 8)
Last edited by richmond62 on Mon Feb 11, 2019 9:20 pm, edited 1 time in total.

bogs
Posts: 2817
Joined: Sat Feb 25, 2017 10:45 pm

Re: How to flow text around an image in LC?

Post by bogs » Mon Feb 11, 2019 7:12 pm

Yup yup :D
Image

ValiantCuriosity
Posts: 63
Joined: Thu Jun 30, 2016 3:08 am

Re: How to flow text around an image in LC?

Post by ValiantCuriosity » Mon Feb 11, 2019 8:17 pm

Bogs,
I like your sense of humor and your willingness to go the extra mile for beginners. Thank you. Never lose your welcoming nature. I may not hang around, but this forum always makes me want to come back. That is due to you and the people here.

I'm still struggling with the imageSource code. I did get the original layout that you showed to me/us to work. I grouped it thinking that the code to collapse it would work for the entire group of fields and images. It doesn't. I'm beginning to think that I need to give up on collapsible fields and just use more cards.

I haven't even begun to explore the browser object. Since I'm trying to move to a coding environment that solves some of the bugs that seem to be popping up in my app, I suspect that using my older technology might not be the best solution unless LC compiles everything differently than using the Apache Cordova wrapper with Xcode. That said, I do like working with HTML5, CSS, and javascript (not so much). I've dabbled in a lot of other frameworks that use tech like Angular, React, etc, and the UIs are spectacular, but things breakdown for me with the coding. Plus, there is no forum as warm and friendly as this one...

Even when one misspells Klas', err, Klaus' name. :D

Off I go to practice some more stuff with LC.

-Rachel
May I never be cured of my curiosity! :D

Klaus
Posts: 10639
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: How to flow text around an image in LC?

Post by Klaus » Mon Feb 11, 2019 8:33 pm

Even when one misspells Klas', err, Klaus' name. :D
Thin ice, Ma'am, very thin ice! :D

bogs
Posts: 2817
Joined: Sat Feb 25, 2017 10:45 pm

Re: How to flow text around an image in LC?

Post by bogs » Mon Feb 11, 2019 11:17 pm

Klaus wrote:
Mon Feb 11, 2019 8:33 pm
Even when one misspells Klas', err, Klaus' name. :D
Thin ice, Ma'am, very thin ice! :D
See how much he grins when you do that? Fun ain't it?
:mrgreen:
ValiantCuriosity wrote:
Mon Feb 11, 2019 8:17 pm
I grouped it thinking that the code to collapse it would work for the entire group of fields and images. It doesn't. I'm beginning to think that I need to give up on collapsible fields and just use more cards.
I'm pretty sure you can collapse a group, but groups or more cards, the easiest way for you that fits your style is the way you want to go. That demo I posted with the effects should work on almost any objects you can use, although I didn't personally test it out on every one myself :D

The suggestion about the browser object was just another way to literally do what you want (flow text around images) just as you would in html without the learning curve. You don't have to program the browser widget, it is already programmed, you just feed it the html you already wrote. I am a HUGE believer in code reuse, why chuck whats already done and setup the way you want?
Image

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4814
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: How to flow text around an image in LC?

Post by jacque » Tue Feb 12, 2019 6:08 pm

It's possible to collapse whole groups. The basic idea is to lock the screen, set the height of the group to something small, and unlock the screen. You can add an animation effect when unlocking if you want. To expand, do the same thing only set the height back to the original height before unlocking the screen.

While the screen is locked you can move other controls or adjust the layout to accommodate the new size of the group. To keep the top of the group pinned, change the last item of the rect of the group to adjust the height rather than just setting the height property itself. If you only reset the height, the group will resize around its center. Changing the group's rectangle ensures the top and sides remain fixed.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”