Hey there, Awesome Customers!

Just a heads up: We'll be taking a breather to celebrate International Workers' Day (May 1st and 2nd - Wednesday and Thursday) and Orthodox Easter from Good Friday (May 3rd) through Easter Monday (May 6th). So, from May 1st to May 6th, our team will be off enjoying some well-deserved downtime.

During this time, our customer support will be running on a smaller crew, but don't worry! We'll still be around to help with any urgent matters, though it might take us a bit longer than usual to get back to you.

We'll be back in action at full throttle on May 7th (Tuesday), ready to tackle your questions and requests with gusto!

In the meantime, you can explore our documentation for Amelia and wpDataTables. You'll find loads of helpful resources, including articles and handy video tutorials on YouTube (Amelia's YouTube Channel and wpDataTables' YouTube Channel). These gems might just have the answers you're looking for while we're kicking back.

Thanks a bunch for your understanding and support!

Catch you on the flip side!

Warm regards,

TMS

Okay
  Public Ticket #3540991
Pictures on tables: alt element & mobile visibility
Closed

Comments

  • Vieira started the conversation

    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?

  •  1,692
    Miloš replied

    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 :

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

    7934916690.png
    9683691428.png

    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

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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

  •  1,692
    Miloš replied

    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

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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

  • Vieira replied

    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.

  •  2,498
    Aleksandar replied

    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 | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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