Scaling image in freeform List control

[simeatan]

Re: Scaling image in freeform List control

David and others that might be interested in this small find,
Got on my laptop and started with the genie. The previous setup was still bothering me as why it wasn't working. Had to look for any solution, if possible, before going to bed (00:35 here in Syracuse, NY).

Again, the gist was to show an image in the freeform list:

- Does not work:
<img style="width:70%;" src="{image}" />
<img style="width:70%;" src="{image}" >
combinations without quotes, with @ in front of the curly bracket.

- Works:
// exactly like the image field in my table
<img style="width:90%;" src="{images.dialog.listNav}" />

<img style="width:70%;" src="https://lh3.googleusercontent.com/-VuJYohRz1pU/VN_2K1ZgPAI/AAAAAAAADCk/iZOYCyLGM5M/s800-Ic42/autorooper_02.jpg">

{image} , later changed into {imageph}, is the varchar 150 field in mysql which holds the path and filename of the image.

-----------------------------------------------------

Found out (in inspecting the element and the rendered source in the web browser) why it wasn't working. As David said, the image had its own span, properties and span. Still didn't know if there's any workaround. Then in the video for amazonlistlayout.swf there was something similar, and after applying the same parameters the picture didn't spill out of the borders anymore. The syntax is

<div style="float: left;"> <img src="{data:imageph}" style="width: 200px;" /> </div>

I'm yet to see why replacing 200px with 70% didn't work (it seems to consider 70% as 70px) but I'll be happy with limiting the border in pixels too. Will check that tomorrow.

I know many people probably already knew about the div structures inside freeform when image is used. I hope this will help someone else like me.
David, thanks again!

[simeatan]

Re: Scaling image in freeform List control

I'll try that. I started that way but veered off when wanted to use the File path of the image to store in a folder, not base64 and for some reason had troubles to seek for some of the records/pictures. Necessarily went to the server events and came up with the spaghetti code :) Add to it scaling the pictures in the list itself, using the freeform. You're right, it'll be easier to start from the beginning than fixing a bad component.

[Davidk]

Re: Scaling image in freeform List control

If you start with a new UX, add a List Control and just walk through it's Quick Setup Genie... including the Detail View... you'll see that's all you need as a basic, updateable List.

[simeatan]

Re: Scaling image in freeform List control

I see. I realized I'm probably doing it wrong with an overkill when you said that the list has it's own data operations. I knew they're there but wasn't sure how built-in they are and if I needed to add it to the UX's server side events. I guess it'll be easier to start from scratch or a template. Thanks David!

[Davidk]

Re: Scaling image in freeform List control

The List Control is a fully contained data bound control... you don't need anything outside the List Control to perform CRUD operations on a table. You may be over-thinking the whole process.

[simeatan]

Re: Scaling image in freeform List control

I'm not in front of the a5wcmp now but I thought I'll need to Load primary keys (just the record counter ID) and Update them, in the UX's server side events, I think ondialoginitialize and ondialogvalidate? So the entried synchronization to the mysql table is correct.

[Davidk]

Re: Scaling image in freeform List control

Unsure what you mean by... "(along with the server side to load primary key and update table)". Load what primary key and update what in which table? Is this something completely separate you're doing from the List and images?

[simeatan]

Re: Scaling image in freeform List control

I'll take a look at the video during the weekend - thanks for the video finder link! I think in order to simplify the testcase, I made a wrong mixture of the two, i.e static and mysql data, along with the data binding. After the video, I'll try to make a simple component, with a list and two fields in the mysql table: - Descript and Imageph. Three, including the auto-incrementing numeric table1_ID key. Imageph C 150 for storing the path c:\temp\images\ , plus the filename. Not a blob base64.
Detail view to add records (along with the server side to load primary key and update table) and the list - Column or Freeform. Preferably Freeform.

[Davidk]

Re: Scaling image in freeform List control

I think part of the problem is that the testimage UX you posted is using static data with no image data... and your List Layout is using an <img> tag with an image URL... and you refer to using a direct drive, path, and filename for your images.

In your posted UX you also have Server-side Actions for Loading and Saving data. If these actions have anything to do with your List Data then it's all set up wrong.
The List Control has it's own data binding. Including UX data binding makes a horrible mess of things.

I think you need to start over and create a new UX. Have a look at the Alpha Video UXL_V12--11 (Help, Video Finder). The video is: List Control - Working with Images - Data Bound Images.

[simeatan]

Re: Scaling image in freeform List control

Sorry David - I didn't explain well that I keep the path and the filename in the field, when I said that original component values / image files are kept in a folder, not base64.
And, that's right - I'm adding new records/pictures in a detail view, pretty much like in customerList of the photoapp sample.Minus the thumbnails.
When I get back to my laptop this weekend, I'll see if I can extract that panel and zip it with the sql data, which is empty now and pics going to c:\temp -like directory.
Or, maybe switch back to blob type / base64, if that's easier.
Thanks again - I appreciate your help on this!

[Davidk]

Re: Scaling image in freeform List control

I feel there's too much information missing here.

You're using MySQL, Varchar field for the image URL, and the data in that field is "https://lh3.googleusercontent.com/-V..."

There are a thousand properties of the List Control that you get to mix and match without Alpha caring what you do... for the most part.

It seems you are using a Detail View on the List in order to see "Image capture and storage properties".

You've not said what the List Control Field name Control type was for the Character Image URL field you're accessing.

At this point it's all guessing as to what you have and how you're using it. The only way to proceed is for you to provide a sample UX and a sample MySQL table dump. Post a zip file containing those items.

[simeatan]

Re: Scaling image in freeform List control

I haven't even noticed the RawData type.
It's still using the path and filename, right? Because now I see just the small square picture holder in the list.
I don't know if I need to adjust anything else when switching from type Image to RawData type?
I lost the option for "Image file transformation template" now while "Image capture and storage properties" is still there with the untouched correct folder and "<Filename>" as a transformation expression value.
The Image field is still Varchar 150 in the mysql db and I can see the values stay correct. I thought maybe I need to start with new records/picture storageing under the new storage format but that didn't help.
PS I know what you mean by not assigning the fieldname Image for Image - got burned in my early days using Foxpro :) Probably other languages too.

[Davidk]

Re: Scaling image in freeform List control

Alpha is "processing" the data... which causes an issue sometimes. Get into the Fields tabs of the List Control and change the "image" field, Control type, to RawData.

Also, use a better, more descriptive, name than "image"... way too dangerous.

[simeatan]

Re: Scaling image in freeform List control

David, I knew there will be a follow-up question.
Putting the style in the individual <img> worked as advertised in that example.

What I can't understand now is why it's not working for the {image}, where {image} is a field in the list. The image shows up, but not honoring the width (goes off borders), and displaying extra characters, like the img src syntax is wrong.

- Does not work:
<img style="width:70%;" src="{image}" />
<img style="width:70%;" src="{image}" >
combinations without quotes, with @ in front of the curly bracket.

- Works:
// exactly like the image field in my table
<img style="width:90%;" src="{images.dialog.listNav}" />

<img style="width:70%;" src="https://lh3.googleusercontent.com/-VuJYohRz1pU/VN_2K1ZgPAI/AAAAAAAADCk/iZOYCyLGM5M/s800-Ic42/autorooper_02.jpg">

I tried to use the freeform template, with putting the image in the list's rows - no luck again. Or just plain html in the freeform:
{image}<br>
At least in that case I don't see the extra characters (shown in the attachment) as a leftover of wrong syntax.

I'm Ok with using plain html, html table, img src. Am I off with the syntax?

Thanks!

[simeatan]

Re: Scaling image in freeform List control

I see. I thought the <img> inherits the style from the div.