Sort by Images

Resolved Ayumi
(@lovebelle)

2 months ago

Hi! Would it be possible to sort a column by images alone, without any text in the cell?

I’ll just start by saying, before a TablePress update a few months ago, it was somewhat possible to sort by images. Prior to the update: clicking the sort button would move any row with an image to the bottom, and any row without an image to the top. (or vice versa.) However, now Tablepress doesn’t recognize images at all and sorts the table alphabetically using a completely different column.

Would it be possible to restore this function? Or even better, would it be possible to sort images by their meta data, such as image titles, alt text, file names, or anything else? Any help would be appreciated, thanks!

The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Author Tobias Bäthge
(@tobiasbg)

2 months ago
Hi!

Thanks for your post and sorry for the trouble!

Sorting by images is indeed a challenge, as it’s not always clear what to sort on. Therefore, the modern sorting algorithms usually strip out the HTML code. It is then usually the best to turn off sorting for the image column or to instruct the sorting algorithm to sort that column using the data of another column (which can also be hidden to the visitor).

This is for example possible using this small code snippet: Just add this to the “Custom Commands” text field on the table’s “Edit” screen.
```
columnDefs: [
  { visible: false, targets: [ 3 ] },
  { orderData: [ 3, 2 ], targets: [ 2 ] },
],
```
In this example, an extra (and then hidden) column would be column 4 of the table (indicated by the 3 in the code), and column 3 would be the image could (indicated by the 2 in the code).

Best wishes,
Tobias
Thread Starter Ayumi
(@lovebelle)

2 months ago

Thank you for the assistance, that’s an interesting solution and works just fine! There’s a small issue with the hidden column being visible for a brief moment when the page loads, but still, I appreciate the help!
Plugin Author Tobias Bäthge
(@tobiasbg)

2 months ago
Hi,

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

In addition, to hide that flicker, you could hide the column “another time” with CSS code:
```
.tablepress-id-123 .column-3 {
  display: none;
}
```
where 123 is the table ID and 3 is the column number.

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress in the plugin directory. Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.