Title: Sorting table by image
Last modified: August 22, 2016

---

# Sorting table by image

 *  Resolved [MikeSammels](https://wordpress.org/support/users/mikesammels/)
 * (@mikesammels)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/sorting-table-by-image/)
 * Hi Tobias,
 * Fantastic plugin, has everything I’m looking for. I am however running into an
   issue, though it’s probably due to my own stupidity.
 * I’m looking to have my table sorted by an image, the image would be a star rating.
   I know that I can use display:none somehow in order to assign a value that is
   sortable. What I can’t figure out is where, within the call it should be situated
   and how to present it. For instance, if I want a difficulty rating of between
   1-10, sortable but not displayed and alongside an image tag then where would 
   it slot into this?
 * `<a href="IMAGE"><img src="SOURCE" alt="ALT" width="60" height="60" class="alignnone
   size-full wp-image-7" /></a>`
 * Thanks for any help and sorry if I’m just being incredibly thick.
 * [https://wordpress.org/plugins/tablepress/](https://wordpress.org/plugins/tablepress/)

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

 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/sorting-table-by-image/#post-5679093)
 * 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
 *  Thread Starter [MikeSammels](https://wordpress.org/support/users/mikesammels/)
 * (@mikesammels)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/sorting-table-by-image/#post-5679100)
 * That works perfectly, thanks a lot for the speedy response!
 * Cheers,
 * Mike
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/sorting-table-by-image/#post-5679103)
 * Hi,
 * no problem, you are very welcome! 🙂 Good to hear that this helped!
 * Best wishes,
    Tobias
 *  [ziyaindia78](https://wordpress.org/support/users/ziyaindia78/)
 * (@ziyaindia78)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/sorting-table-by-image/#post-5679421)
 * 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
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/sorting-table-by-image/#post-5679422)
 * 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
 *  [ziyaindia78](https://wordpress.org/support/users/ziyaindia78/)
 * (@ziyaindia78)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/sorting-table-by-image/#post-5679423)
 * Please check following URL
 * [http://www.gamesage.co.uk/?page_id=8](http://www.gamesage.co.uk/?page_id=8)
 * I need to display image into “Box Art” and “Buy Link”.
 * Thanks,
    Ziya
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/sorting-table-by-image/#post-5679424)
 * 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
 *  [ziyaindia78](https://wordpress.org/support/users/ziyaindia78/)
 * (@ziyaindia78)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/sorting-table-by-image/#post-5679425)
 * So I need to insert image tag for all column values?
 * If yes……Could you please give me steps, How I can do this?
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/sorting-table-by-image/#post-5679426)
 * 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 `http://` 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://wordpress.org/support/topic/adding-html-to-tables?replies=15](https://wordpress.org/support/topic/adding-html-to-tables?replies=15))
 * Regards,
    Tobias
 *  [ziyaindia78](https://wordpress.org/support/users/ziyaindia78/)
 * (@ziyaindia78)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/sorting-table-by-image/#post-5679427)
 * 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
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/sorting-table-by-image/#post-5679428)
 * 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
 *  [ziyaindia78](https://wordpress.org/support/users/ziyaindia78/)
 * (@ziyaindia78)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/sorting-table-by-image/#post-5679429)
 * Dear Tobias,
 * Please check following URL
 * [https://wordpress.org/support/topic/adding-html-to-tables?replies=16#post-6542384](https://wordpress.org/support/topic/adding-html-to-tables?replies=16#post-6542384)
 * for my latest query
 * Thanks,
    Ziya
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/sorting-table-by-image/#post-5679430)
 * Hi,
 * yes, as your question is related to the code there, that’s going to be the best
   approach.
 * Regards,
    Tobias

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

The topic ‘Sorting table by image’ is closed to new replies.

 * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944)
 * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/tablepress/)
 * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/)

 * 13 replies
 * 3 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [11 years, 3 months ago](https://wordpress.org/support/topic/sorting-table-by-image/#post-5679430)
 * Status: resolved