I have a view created in raypa.com that uses the following shortcode
[wpv-post-featured-image size="full"]
The full size is ok for desktop but too big for mobile. I would like to use the medium or thumbnail size for smaller screens. Is there a way to modify the shortcode - or some other way - to achieve that?
Thank you in advance!
Hi,
There is no way to use more than one image size inside the shortcode attributes.
But what you can do is to create to instances of the shortcode.
One for the desktop and the other one for the small devices.
Then wrap the desktop shortcode with an HTML DIV tag with a specific CSS CLASS that you can identify it is a desktop DIV tag.
Do the same for the small device shortcode to identify the smaller device DIV tag and use the typical CSS Media feature to show or hide one depending on the width of the device.
You can check the ticket below that explains something similar:
https://toolset.com/forums/topic/conditional-output-of-a-content-template-based-on-screen-width/#post-507471
Thanks.
Hi Christopher,
thank you very much for taking the time to answer on a Sunday...!
I had thought already about the CSS route. My main concern about that is that if I hide an image with a display:none property, the image is still in the code, therefore it will still overload the page, or am I wrong?
If that is the case, this approach would not solve my problem I am afraid...
Hi,
Ok the image WILL be loaded. But these days the browsers are smart. So they will not load something that is set to display: none; first.
So it will not affect the performance and the page will load normally. but after the load of the other items are finished, the browser will load the hidden image in the background.
That should not have any effect on user experience.
I suggest that you do test the method and see for yourself.
Anyways, there is no way in Toolset to be able to differentiate between devices int he backend.
Thanks.
Thank you for the explanation Christopher.
If there is no way to use more than one image size inside the shortcode attributes, I wonder whether there is a way to customize the custom field where the image comes from and set a condition there?
Hi,
There is a conditional feature available on the view and not the custom field section but it is not for the device-specific condition, it is more for logical conditions on the backend, for example, if a user is logged in or not, and these sorts of stuff.
Your need for detection of the front-end client to know if it is a desktop or mobile is a front-end related feature and you can not search for a backend solution for that.
I hope I could explain the situation clearly.
Thanks.
