Gantry5: How to make mobile and desktop display different logo image
-
-
- shenk
- Hero Rocketeer
- Posts: 424
- Thanks: 11
-
I think it is not very rare that for a same site, mobile pages and desktop pages have different logo images. For example, some companies would have some texts(whose font are not so easily displayed on a webpage) to the right of the actual logo, while the logo.png file includes both logo and text. But this picture usually is too long for a mobile layout, therefore another mobile-logo.png file is required, where the text is put under the logo.
I've been thinking this for a while and it seems there is no way to do this neatly with gantry5 and raw logo/image particle. The only way I can think of is either using javascript to change the logo to mobile-logo.png on mobile devices, or to modify the particle, making it use the logo image as background instead of <img> tag so that I can use media query.
This is why I think there should be a mobile outline.
If you know better ways to do this, please share. - Last Edit: 7 years 11 months ago by shenk.
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
Re: Gantry5: How to make mobile and desktop display different logo image
Posted 7 years 11 months ago-
Hi Shenk,
The way I have always done this with Gantry 4 and 5 is to make the logo a Joomla custom html module. One for mobile and one for everything else.
In Gantry 5 I delete the logo particle from the outlines and add a logo position. I assign the modules to the logo position.
On the module for phones I go to advanced tab and in the class field add visible-phone. On the other module I add hidden-phone.
Now the correct module is displayed based on device.
If this resolves your problem then please edit your first post in this thread by adding [SOLVED] at the start of the title and click on the icon and select the 'tick' icon. This lets the moderators know that it can be moved to the solved section.
Thanks for your cooperation
Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
-
-
-
- shenk
- Hero Rocketeer
- Posts: 424
- Thanks: 11
Re: Gantry5: How to make mobile and desktop display different logo image
Posted 7 years 11 months ago-
This is not merely about the logo, mobile webpages could have quite different layout/module/section/particle with desktop webpages. To manipulate their displaying or not merely using media query or hidden-phone class(they are actually same thing) is wasting user's data bandwidth by making their browser to download unnecessary elements that would eventually be "display:none". Is there any good way to overcome this?
I think a good solution would be to allow users to create "mobile outlines", maybe as a slave for each normal outline. There are many solid ways to determine whether the client is using a mobile-browser in PHP, gantry5 can make this determination before it outputs any outline and then choose master or slave outline accordingly. What do you think?
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
Re: Gantry5: How to make mobile and desktop display different logo image
Posted 7 years 11 months ago-
Hi there,
I have found that there is very little that cannot be achieved by the responsiveness of thje templates. The one example you gave was one of my own pet hates, but as logos are small in size there is very little data duplication.
Of course, if the logo was an image and text then if it were constructed correctly it would be responsive and text would go under the image so no need for any duplication.
Gantry 5 already acts in a responsive manner so I don't see what needs to change at this stage.
Even if you wanted to exclude parts of outlines you could simply use the media breaks to 'display:none;'
Hope this helps
Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
-
-
-
- paxman
- Rocketeer
- Posts: 50
- Thanks: 0
Re: Gantry5: How to make mobile and desktop display different logo image
Posted 7 years 8 months ago- I agree, I'm really not such a fan of using a single, responsive outline. There should be options to load outline overrides if you will. This would be ideal for mobile. My mobile views only show a small percentage of what my desktop shows. And often I want different text and photo alignments on mobile. I honestly don't see the appeal of loading big pages only to use a small percentage. Isn't there any way to toggle one outline to another based on viewport size? I truly feel this is a major issue with gantry 4 and I haven't dared look to far into gantry 5 yet…
-
-
-
- paxman
- Rocketeer
- Posts: 50
- Thanks: 0
-
Time to create page: 0.043 seconds