Image sort

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 https://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 https://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 <span> element?) a CSS class instead, Google will probably not recognize this.)

Regards,
Tobias

thank you! I found what I need:

[ Moderator Note: Please post 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

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!

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!

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/ Then, modify BOTH the fiels jquery.datatables.sorting-plugins.js and jquery.datatables.sorting-plugins.min.jslike 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

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.
<img src="https://website.net/assets/image.png" alt="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! ??

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

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

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

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??

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