As mentioned on my previous ticket, I would like to prevent images to load on mobile. They look fine on desktop (see main table of listed URL), but it's too large for mobile, so I hide it. To do that, I use the "Show/Hide on mobile" option from the column list. I can't entirely click on "Show/Hide the column" since I still want it to display on desktop. The option "allow collapsing on mobile and tablets" is checked, as there are other hidden field that I do want to display on mobile when the row is clicked.
That being said, it seems that I can't discharge the image completely, so even if it isn't displayed, this is still loaded, which hurts performance results of the page to no benefit.
So sum it up:
- displaying images is fine (both mobile/desktop)
- hiding a column on mobile and making it visible on click is fine
- hiding a column on mobile and prevent it from loading (if that's a large image) doesn't seem to be an option. I would like to have a solution there. For now the only one I can imagine would be creating 2 seperate tables but it's obviously not too good as it comes with several cons.
At the moment, the only way to do that would be to add custom CSS that would apply only to screens below a certain width. For example, if you're targeting screens that have a width below 700px, the CSS you'd need to use would be this:
@media only screen and (max-width: 700px) {
th.image.column-pic {
display: none;
}
td.image.column-pic {
display: none;
}
}
Hello,
As mentioned on my previous ticket, I would like to prevent images to load on mobile. They look fine on desktop (see main table of listed URL), but it's too large for mobile, so I hide it. To do that, I use the "Show/Hide on mobile" option from the column list. I can't entirely click on "Show/Hide the column" since I still want it to display on desktop. The option "allow collapsing on mobile and tablets" is checked, as there are other hidden field that I do want to display on mobile when the row is clicked.
That being said, it seems that I can't discharge the image completely, so even if it isn't displayed, this is still loaded, which hurts performance results of the page to no benefit.
So sum it up:
- displaying images is fine (both mobile/desktop)
- hiding a column on mobile and making it visible on click is fine
- hiding a column on mobile and prevent it from loading (if that's a large image) doesn't seem to be an option. I would like to have a solution there. For now the only one I can imagine would be creating 2 seperate tables but it's obviously not too good as it comes with several cons.
Thanks in advance!
Hello Vieira.
At the moment, the only way to do that would be to add custom CSS that would apply only to screens below a certain width. For example, if you're targeting screens that have a width below 700px, the CSS you'd need to use would be this:
@media only screen and (max-width: 700px) { th.image.column-pic { display: none; } td.image.column-pic { display: none; } }I hope that helps!
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