I've a table where I display images of artists in a column. I'm failing to see how to add the Alt attribute to the image. As of now, I'm using a database query to build the table, and that column targets a CDN URL which retrieves the link to the image. The column is set as an image. This works fine to display the image.
But how/where do I define the alt text?
Also, the image looks fine on desktop, but it's too large for mobile, so I hide it. That being said, it seems that I can't discharge it, so even if it isn't displayed, this is still loaded, which hurts performance results of the page to no benefit. How can I prevent them from loading on mobile?
Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.
-
1. When it comes to adding an "alt" property to your images in Tables;
If you use our Image column, in that case, currently, it is not possible to input the Alternate Text as a built-in option.
This is a valid suggestion for future improvement though, so
to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there, and as more people vote, the feature will move higher on the priority list.
You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;
and our newsletter, so you're informed about new features, bug fixes, freebies, etc.
2. But if you use a String Column ( with a one line or multi line String Editor Type),
then you can input Alt Text as part of Custom HTML with an Image Tag in the cells, for example :
<img src="img_girl.jpg" alt="Girl in a jacket">
In my Table i added a String Column and since this main Image link does not work, it provides the alternate text.
You can also use tables linked from Source data such as Excel, CSV, and others ,
just in that case the table won't be editable from our Plugin's end,
so you need to input this Custom HTML Image tag with Alternate Text in the source cells from your data file.
-
You can also try our new Feature "Transform Value" to make this easier, so depending on how your source Data comes in, you could combine placing one Field for the "alternate text" of the Image;
and another Field that provides the "Main URL of the Image".
Then, you could add some Custom HTML in order to 'wrap' everything inside an "img" HTML tag, and you can use actual Column value placeholders inside the "transform Value" String Column, in order to get a custom cell like that.
Apologies, i sent that message without finishing to write about your point #2 , in regards to mobile visibility :
2. Also, the image looks fine on desktop, but it's too large for mobile, so I hide it.
That being said, it seems that I can't discharge it, so even if it isn't displayed, this is still loaded, which hurts performance results of the page to no benefit.
How can I prevent them from loading on mobile?
Can you please open a new/separate ticket for this issue of the image on mobile visibility?
If you can just copy the same description as you did here; but please add some details, if you can show me what you did to hide it;
Did you perhaps hide it from being loaded on front-end on the Column Display settings;
Or maybe just made the Responsiveness collapse it?
Or perhaps you tried with some Custom CSS, etc?
If you can elaborate a bit more what you tried so far on the new ticket, and we can try to advise, i am not 100% sure if we currently have a valid solution to stop it completely from loading on Mobile, if it loads on Desktop version of the Table.
Thank you for your reply. For the 1st point, I tried switching to String to write directly the Alt tag and it works fine! The image still displays and the alt is there, thanks!
As for point 2, sure, I created another ticket, see 3543895.
Hello,
I've a table where I display images of artists in a column. I'm failing to see how to add the Alt attribute to the image. As of now, I'm using a database query to build the table, and that column targets a CDN URL which retrieves the link to the image. The column is set as an image. This works fine to display the image.
But how/where do I define the alt text?
Also, the image looks fine on desktop, but it's too large for mobile, so I hide it. That being said, it seems that I can't discharge it, so even if it isn't displayed, this is still loaded, which hurts performance results of the page to no benefit. How can I prevent them from loading on mobile?
Hi Vieira,
Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.
-
1. When it comes to adding an "alt" property to your images in Tables;
If you use our Image column, in that case, currently, it is not possible to input the Alternate Text as a built-in option.
This is a valid suggestion for future improvement though, so
Please feel free to search on our suggestions page,
to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there, and as more people vote, the feature will move higher on the priority list.
You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;
and our newsletter, so you're informed about new features, bug fixes, freebies, etc.
2. But if you use a String Column ( with a one line or multi line String Editor Type),
then you can input Alt Text as part of Custom HTML with an Image Tag in the cells, for example :
In my Table i added a String Column and since this main Image link does not work, it provides the alternate text.
You can also use tables linked from Source data such as Excel, CSV, and others ,
just in that case the table won't be editable from our Plugin's end,
so you need to input this Custom HTML Image tag with Alternate Text in the source cells from your data file.
-
You can also try our new Feature "Transform Value" to make this easier, so depending on how your source Data comes in, you could combine placing one Field for the "alternate text" of the Image;
and another Field that provides the "Main URL of the Image".
Then, you could add some Custom HTML in order to 'wrap' everything inside an "img" HTML tag, and you can use actual Column value placeholders inside the "transform Value" String Column, in order to get a custom cell like that.
Please check more about our Transform Value here.
Let me know if that helps.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Hi Vieira,
Apologies, i sent that message without finishing to write about your point #2 , in regards to mobile visibility :
2. Also, the image looks fine on desktop, but it's too large for mobile, so I hide it.
That being said, it seems that I can't discharge it, so even if it isn't displayed, this is still loaded, which hurts performance results of the page to no benefit.
How can I prevent them from loading on mobile?
Can you please open a new/separate ticket for this issue of the image on mobile visibility?
If you can just copy the same description as you did here; but please add some details, if you can show me what you did to hide it;
Did you perhaps hide it from being loaded on front-end on the Column Display settings;
Or maybe just made the Responsiveness collapse it?
Or perhaps you tried with some Custom CSS, etc?
If you can elaborate a bit more what you tried so far on the new ticket, and we can try to advise, i am not 100% sure if we currently have a valid solution to stop it completely from loading on Mobile, if it loads on Desktop version of the Table.
-
On this ticket, please respond to the point #1.
Thank you.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Hi Milos!
Thank you for your reply. For the 1st point, I tried switching to String to write directly the Alt tag and it works fine! The image still displays and the alt is there, thanks!
As for point 2, sure, I created another ticket, see 3543895.
Hi again Vieira.
I just responded to the other ticket, so please check it out.
I'll close this one as it seems there are no active topics here. Do let me know if I'm mistaken.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables