Any wappler tutorial or info that explains how add an image to a table generator from a database or from a folder

Wappler General How To
#1

Image to a table generator from database or folder.

Or anyone knows how to do it.

Thanks

#2

Generate your table first, set the content type to custom and then after the table is generated add your images in the <td> tags.

#3

And if I want to show a blob image from database?

Is always a problem for me backend front end I do not have any problem :slight_smile:

Thanks

#4

Have you already started storing the images as blobs. I tend to store the images on S3 and save the URL in the DB, rather than the actual picture.

#5

That’s a really bad idea.
Store your images as files on the server and only store their names/paths in the database.

#6

I’m experimenting because real I do not know how to do it I try it with blob.

#7

As @Teodor says, DON’T save the blob. Upload the file, resize/adjust as you want and then save to the server or S3 storage. You then save the location to the DB.

#8

Ok I have all images stored at the moment. How i can show them in a table together with other information.

image
image2312Ă—522 39 KB

#9

If you save the image path in the DB, add an image to your <TD> . Then choose dynamic attributes > Image source and choose the field in the repeat where the path has been saved

#10

How many images are stored, would it be too problematic to change it? If you’re near the beginning of the project, I would recommend changing your approach now before you get too far in…

#11

I’m just experimenting in in a sub domain. They are 123 images. I’m still learning back end in wappler . Another question, where is dynamic attributes?

I’m changing all design and structure of this project

thanks

#12

Check out adding images/galleries here:

Although aimed at masonry, the principles are the same for tables.

#13

bjp Thank you I was in a meeting I’m going to check this for sure.

Have a great day.

#14

Hi Teodor, can you give an example of what you saying.

i was in a meeting.

Thank you

#15

@Teodor has many examples already as per

  1. Uploading Single File to your Server
  2. Inserting Uploaded File Names in a Database

For more, go to https://docsdev.wappler.io/

#16

Hi, Ben Thank you.
To populate images into a table generator, How I do that? Wappler does that? See this experiment below. On the right side of the table where it says fittings image, I want to have pictures they are 123; I have to do it by hand?

image
image2952Ă—976 154 KB

#17

After you generate the table add the image tag in the td…

#18
  1. Make a Server Connect query to load the dbase table with your images
  2. In APP connect > Data > Server Connect: make a connection to you query
  3. In your column where you want to show the table: Generators > Bootstrap 4 Table Generator
  4. Populate from your Data > Server Connect
    1_generator
    1_generator748Ă—602 48.9 KB

Then this should be your result:

1_table
1_table1473Ă—806 264 KB

  1. Find the table cell where it says <td dmx-text="image"></td> and inside it add <img> and remove “dmx-text=“image”” so it reads : <td><img></td>
  2. Select the img tag and click on Dynamic Attributes > Image Source.
  3. Select the Lightning bolt and add the folder where your images are stored.
    1_selectfolderimg
    1_selectfolderimg470Ă—767 54.3 KB

You can adjust width etc in Image Properties.

The result should be:

1_result
1_result962Ă—809 112 KB

1 Like
#19

Thank you this can be a great help. I am going to try.

Inside the database images as BLOB will be enough to connect the images, or we need to have them in a a server folder?

Thank you

#20

Placing the images as a blob in the database is a bad idea. Place them in a folder and the image name (and path) in the database.