Sorting table by image

Hi,

thanks for your post, and sorry for the trouble.

I don’t really recommend the display:none; approach anymore, as there’s a better and easier to use solution for this. It basically uses an extra column that is hidden from the visitor, but that is used by the sorting algorithm when the column with the image is to be sorted.
To use this, I suggest to add a new column to your table, directly to the left of the column with the images.
Then, add this to the “Custom Commands” textfield on the “Edit” screen of the table:

"columnDefs": [ { "visible": false, "targets": [ 2 ] }, { "orderData": [ 2 ], "targets": [ 3 ] } ]

The 2 (appearing twice is a reference to the third column (in this example). As counting the columns starts with 0, this would have to be adjusted to “(number of the new column) – 1”. The 3 references the column with the images, and that would have to be adjusted to “(number of the image column) – 1”.

Regards,
Tobias

That works perfectly, thanks a lot for the speedy response!

Cheers,

Mike

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

Dear Tobias,

My client was installed TablePress plugin when server has old php version. Now php version on server has been updated.

Previously images was displaying into a column but after update php version only image path is displaying into this column.

I want to display images again into this column.

Could please help me to do this?

Thanks in Advance,
Ziya

Hi,

thanks for your post, and sorry for the trouble.

I can’t really imagine that this is caused by an updated version of PHP.
Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Please check following URL

https://www.gamesage.co.uk/?page_id=8

I need to display image into “Box Art” and “Buy Link”.

Thanks,
Ziya

Hi Ziya,

thanks for the link!

From what I can see, those columns only contain the URL of the image, but no HTML code (like <img ...>). Thus, the image is not displayed. This is not related to the update of the PHP version.

You will either have to add the HTML code for these images in the cells, or maybe develop a custom Extension for TablePress that does this automatically. (Now, you are saying that the images where showing previously, so could it maybe be possible that there was some custom code for this before, but that has been deactivated?)

Regards,
Tobias

So I need to insert image tag for all column values?

If yes……Could you please give me steps, How I can do this?

Hi,

yes, each cell must have the correct <img> HTML tag. The easiest way for this probably is to use the “Insert Image” below the table input fields. There, you could use the URL source and then insert the image URL to generate the HTML code.

As your table however has many rows already, an automatic solution might be better, as it would require less time. For example, you could export the table to CSV, open that in a text editor and then play around with search and replace to prepend e.g. <img src=" before each https:// in the file. In a similar way, you could append " /> to all .jpg endings.

Another solution would be to use some custom PHP code (as I’m very busy, I can not develop the exact code for you at the moment), which could use the tablepress_table_content filter hook, which gets each cell’s content (the URL), as well as the table ID and column number. With that information, you could change the cell content to have the HTML. (Something similar, not with images though, is done in this thread: https://www.ads-software.com/support/topic/adding-html-to-tables?replies=15 )

Regards,
Tobias

Dear Tobias,

Thanks for your reply

My problem is that:

I have already image src value in the column, I just want to assign these value into image src tag.

Could you please suggests me any easy way to do it?

Thanks,
Ziya

Hi Ziya,

that is what I was describing above. Either try something with search/replace on an exported CSV file, or use some custom PHP code that hooks into the tablepress_table_content filter hook to add the HTML.

Regards,
Tobias

Dear Tobias,

Please check following URL

https://www.ads-software.com/support/topic/adding-html-to-tables?replies=16#post-6542384

for my latest query

Thanks,
Ziya

Hi,

yes, as your question is related to the code there, that’s going to be the best approach.

Regards,
Tobias