I need my page to display a different banner on mobile

Okay, so I know how to detect what device the user is using but I need to know how I would go about making a different banner appear when on mobile. Where would be the best place to insert this the script?
-Best regards

if you are using the default banner system you could insert all the images in the banner and for the ones that you want on mobile only add mobile to their name , then in the catalog controller of the banner module or the slideshow module and make so on mobile would display only the ones with mobile in their name while on desktop those images would not display. Another way would be to make a new position in opencart and condition it to show only on mobile and add the banner you want to it.

So I don't know if you came up with a solution but I have so i thought i'd share. Its a little bit hacky but does the job.

So i set up the banners as if they were normal desktop banner images through the admin.
Then in 'catalog/controller/module/slideshow.php' i added a mobile value so that i can add the following data attributes to the img tag in 'slideshow.tpl':
- data-image-desktop | Which is the normal image that was added in the admin (product-banner.jpg)
- data-image-mobile | Which is the same name as the desktop image with -mobile added to it (product-banner-mobile.jpg) Also the resizing of the image is done in 'catalog/controller/module/slideshow.php'.

So now that i have both image paths its just a case of using javascript to determine if its on mobile or not and and then loading the correct data attribute into the src of the img tag.

Little snag is that when adding the normal desktop banner the person adding them needs to remember to add the mobile version, i did say it was a bit hacky but it does the job. Ideally i would do it so that in the admin you can select the mobile version but I am a little pressed for time in the office so this was an agreed solution.

Anyways, hope this helps someone down the road and I did this in opencart version 2.0.3.1

Hello! (OC 3.0.3.6, default)

I am coping withe the same problem... Well, almost.. I want to serve different sizes of the images for mobile/desktop... With html is srcset, but with php i am totally lost... I got the idea, but i dont know what to put in php, to make different images load if the screen is, for example, less then 900px...

Or any over ideas, how to speed thing up for mobile users in the slideshow? If using the default one!

Personally I would show a banner on a desktop screen and have that hidden on a mobile and a static responsive image in its place. That's easy enough with the bootstrap hide class.

Hello!

Thank you for the idea! I did not want to hide it completely, but probably this is the way... Not sure how to combine the two though in css...

Besti wrote: ↑

Sun Sep 20, 2020 1:29 am

Hello!

Thank you for the idea! I did not want to hide it completely, but probably this is the way... Not sure how to combine the two though in css...

You won't be hiding it completely. It will just be hidden on a mobile device and a different banner will appear in its place.

If I understand correctly you just put two banners .. one you add hidden-xs (which is already in bootstrap) and one you hide hidden-sm for min-width:768px

with regards to speeding it up, not really with the Opencart version. I have a light weight presentation which scales to best fit and some other features https://www.opencart.com/index.php?rout ... n_id=26852