Title: Image sort Last modified: August 20, 2016 --- # Image sort * Resolved [TBpnav](https://wordpress.org/support/users/tbpnav/) * (@tbpnav) * [13 years, 1 month ago](https://wordpress.org/support/topic/image-sort/) * Hi Tobias, * we use table press for reviews and often have only images in the colums for exaple ++ image for very good etc. but when using images, we do not find any way to sort theses images. We found a workaround with display:none hidden text but this is not the best way and google do not like these hidden text. The best way would by if it would be possible to sort with the alt tag from the image. Is there any way to sort images in table press? Thanks, * Best R. Tobias * [http://wordpress.org/extend/plugins/tablepress/](http://wordpress.org/extend/plugins/tablepress/) Viewing 11 replies - 1 through 11 (of 11 total) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [13 years, 1 month ago](https://wordpress.org/support/topic/image-sort/#post-3471974) * Hi, * thanks for your post! * The easiest way is indeed the hidden text, as that is directly recognized by the sorting algorithm, which is coming from the external DataTables JavaScript library that TablePress uses. * If you want to sort directly on “alt” tags, you’ll need to use the DataTables API (see [http://www.datatables.net](http://www.datatables.net) for the documentation) and develop a custom sorting algorithm, that extracts the necessary values from the image HTML code. Unfortunately, I’ve never really done this before, so I can’t help with that 🙁 You could maybe use the JS code of the TablePress Sorting plugin Extension from [http://tablepress.org/extensions/datatables-sorting-plugins/](http://tablepress.org/extensions/datatables-sorting-plugins/) as an example. * (Oh, and if you move the `display:none;` to a CSS file (or the “Custom CSS”, and give the invisible text in the cells (probably a `` element?) a CSS class instead, Google will probably not recognize this.) * Regards, Tobias * Thread Starter [TBpnav](https://wordpress.org/support/users/tbpnav/) * (@tbpnav) * [13 years, 1 month ago](https://wordpress.org/support/topic/image-sort/#post-3472001) * thank you! I found what I need: * _[ Moderator Note: [Please post code](http://codex.wordpress.org/Forum_Welcome#Posting_Code) or markup snippets between backticks or use the code button. ]_ * ``` "alt-string-pre": function ( a ) { return a.match(/alt="(.*?)"/)[1].toLowerCase(); }, "alt-string-asc": function( a, b ) { return ((a < b) ? -1 : ((a > b) ? 1 : 0)); }, "alt-string-desc": function(a,b) { return ((a < b) ? 1 : ((a > b) ? -1 : 0)); } ``` * Works perfekt! * Best R. Tobias * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [13 years, 1 month ago](https://wordpress.org/support/topic/image-sort/#post-3472013) * Hi, * awesome! Very nice! 🙂 Yes, that looks good, indeed! * Best wishes, Tobias * P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks! * [sinco039](https://wordpress.org/support/users/sinco039/) * (@sinco039) * [12 years, 11 months ago](https://wordpress.org/support/topic/image-sort/#post-3472143) * I tried the display:none and it works but I would like to use the alt text as well. * To what file specifically would I add the code * ``` "alt-string-pre": function ( a ) { return a.match(/alt="(.*?)"/)[1].toLowerCase(); }, "alt-string-asc": function( a, b ) { return ((a < b) ? -1 : ((a > b) ? 1 : 0)); }, "alt-string-desc": function(a,b) { return ((a < b) ? 1 : ((a > b) ? -1 : 0)); } ``` * I looked at wp-content>plugins>tablepress>js>jquery.datatables.min.js and quickly realized I’m no programmer… * Any help would be much appreciated! 😀 * THANK YOU!! Great plugin! * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [12 years, 11 months ago](https://wordpress.org/support/topic/image-sort/#post-3472144) * Hi, * thanks for your question! * So, just to clarify: You have a column with images and would like the sorting algorithm to sort that column on the text in the “alt” attribute of the image HTML? Then that code should indeed be helpful. To use it, please download and install the Sorting Plugins Extension from [https://tablepress.org/extensions/datatables-sorting-plugins/](https://tablepress.org/extensions/datatables-sorting-plugins/) Then, modify BOTH the fiels `jquery.datatables.sorting-plugins.js` and `jquery. datatables.sorting-plugins.min.js`like this: At the end of these two files, add * ``` jQuery.extend( jQuery.fn.dataTableExt.oSort, { /** * "alt" string sorting in images */ "alt-string-pre": function ( a ) { return a.match(/alt="(.*?)"/)[1].toLowerCase(); }, "alt-string-asc": function( a, b ) { return a - b; }, "alt-string-desc": function(a,b) { return b - a; } } ); ``` * After that, you’ll just need to activate this sorting type for the column with the images, by adding this to the “Custom Commands” text field on the “Edit” screen of the table with the image column: * ``` "aoColumnDefs": [ { "sType": "alt-string", "aTargets": [ 3 ] } ] ``` * The 3 in that code indicates that the images column is the fourth column of the table (counting starts with 0), so just adjust that as necessary. * Regards, Tobias * [sinco039](https://wordpress.org/support/users/sinco039/) * (@sinco039) * [12 years, 11 months ago](https://wordpress.org/support/topic/image-sort/#post-3472145) * ok so…it isn’t working yet :/ * To clarify, Yes I want to sort by the “alt” attribute of an image. I followed your directions exactly- 1) installed the sorting plugin 2) Added the above code to the very end of both the .js files 3) Added in the custom commands code to the appropriate table 4) Changed the [ 3 ] to the appropriate number for the column. * So maybe my alt text is off. I tried adding ALT text in both wordpress’s media gallery and manually like the example below. Maybe how I am posting code in the cell is where I am messing things up, Here is an example of what I am putting in a cell of the table. Ex. `sortname` * Everything still looks fine but when I click the sort button nothing happens, both the up and down arrow stay the same. If I click sort on another image column, that is not included in the custom commands, it will show an up or down arrow like it is trying to sort (but obviously cannot due to not being specified in the custom commands). This brings me to my final question and then I will leave you alone. Is there a way to tell it to sort multiple columns? something like..`" aoColumnDefs": [ { "sType": "alt-string", "aTargets": [ 3,4,6,7 ] } ]` * I don’t know js at all so that is just a shot in the dark. * Thank you so much for responding to me! I GREATLY appreciate it and will most certainly credit your plugin on my site! 😀 * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [12 years, 11 months ago](https://wordpress.org/support/topic/image-sort/#post-3472146) * Hi, * from what I can see, you did everything in the correct way. * My assumption is that there’s some sort of JS error happening. To find out more about that, I’d need to take a direct look at the page with the table. Could you therefore please post a link? Thanks! * (And about your final question: Yes, that’s correct, multiple columns are written as a comma-separated list in that “Custom Commands” parameter.) * Regards, Tobias * [sinco039](https://wordpress.org/support/users/sinco039/) * (@sinco039) * [12 years, 11 months ago](https://wordpress.org/support/topic/image-sort/#post-3472147) * Since it is new and still in development I don’t want to post the link here just yet. * If you dont mind emailing me, I will reply with the link and login info I have setup for you. * My email is my username at gmail. * _[ Reminder: please be aware that support is offered via the forum and not email]_ * Thank you, * Will * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [12 years, 11 months ago](https://wordpress.org/support/topic/image-sort/#post-3472148) * Hi, * just for everybody following this thread: I worked on this directly with Will, and we found that the code above is not optimal. This version fixed things: * ``` jQuery.extend( jQuery.fn.dataTableExt.oSort, { "alt-string-pre": function ( a ) { a = a.match(/alt="(.*?)"/); if ( a ) return a[1].toLowerCase(); else return ''; }, "alt-string-asc": function(a,b) { return ((a < b) ? -1 : ((a > b) ? 1 : 0)); }, "alt-string-desc": function(a,b) { return ((a < b) ? 1 : ((a > b) ? -1 : 0)); } } ); ``` * Regards, Tobias * [emile](https://wordpress.org/support/users/emile13/) * (@emile13) * [12 years, 10 months ago](https://wordpress.org/support/topic/image-sort/#post-3472151) * Hi Tobias and Sinco039, thanks you for this code its working very well * did you think we can implement this code to the tablepress-datatables-column- filter-widgets to have the alt name in the dropdown menu of this column?? * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [12 years, 10 months ago](https://wordpress.org/support/topic/image-sort/#post-3472152) * Hi, * thanks for your question. * Unfortunately, I don’t really know how to add this to the ColumnFilterWidgets. That’s an external plugin to the (also external) DataTables JavaScript library that TablePress uses. I’m not really familiar with that JS code, so I don’t know where modifications would be necessary. Sorry 🙁 * A different approach would be to add another column to the table, which just has the value of the “alt” attribute as its content. You can then hide that column from the table via CSS but show the drop down for it in ColumnFilterWidgets ( see the description for this on the Extension’s webpage), and instead hide the drop down for the actual column with the images. * Regards, Tobias Viewing 11 replies - 1 through 11 (of 11 total) The topic ‘Image sort’ 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/) * 11 replies * 4 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [12 years, 10 months ago](https://wordpress.org/support/topic/image-sort/#post-3472152) * Status: resolved