Search…

X3 Photo Gallery Support Forums

Search…
 
bphotos
Experienced
Topic Author
Posts: 39
Joined: 11 Mar 2013, 08:01

Mobile version (problem with logo and horizontal orientation)

07 Nov 2017, 01:00

Hi Karl,

First my problem is how looks logo on mobile version
Second problem with horizontal and vertical version. All my (I think not only I have this problem) photos on website is horizontal orientation but usually when people use mobile device they hold device in portrait or vertical mode.
May be its good idea use this symbol, before website starts to show gallery?
 
Attachments
portrait_warning.png
horizontal symbol
portrait_warning.png (1.88 KiB) Viewed 4572 times
WhatsApp Image 2017-11-06 at 21.33.27.jpeg
logo_vertical
WhatsApp Image 2017-11-06 at 21.33.27.jpeg (100.5 KiB) Viewed 4572 times
WhatsApp Image 2017-11-06 at 21.33.21.jpeg
logo_horizontal
WhatsApp Image 2017-11-06 at 21.33.21.jpeg (99.88 KiB) Viewed 4572 times
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Mobile version (problem with logo and horizontal orientation)

07 Nov 2017, 01:43

I don't really see the problem here, as your logo seems "fine" also on mobile. We will not be adding an icon to tell the user to rotate their phone ... The icon itself would obscure the design, and personally I would NEVER rotate my phone based on an icon anyway. I want to use the menu to navigate the website, and rotating the phone is counter-productive. When I get to viewing images in your gallery, although I can pinch-zoom, I might rotate the phone to get a better view of the images, but that would be entirely my own decision ... This is identical to how mobile users will react when viewing images on Facebook/Google/Flickr also. It's obvious they will get a better view of landscape images if they rotate the phone, but it's entirely up to them. This is nothing less than expected behavior for mobile users.

As for your logo on mobile devices, it looks fine from here. As long as you are not using a subtle background image, and your logo doesn't have it's own background, then results on mobile devices will obviously not be 100% perfect. I am not quite sure what magic you would expect to apply to the logo on mobile devices, and only for the home page?

If you want precision control of how the logo appears on mobile devices, you can use custom CSS to for example 1) Hide the logo, or 2) Add a white background square to the logo on mobile devices. However, you would need to apply very specific CSS selectors if you only want to change the logo when mobile is in VERTICAL orientation, and if you ONLY want to change the logo on the frontpage when there is a slideshow in the background.

If you do want custom CSS for the above, I can help.
 
bphotos
Experienced
Topic Author
Posts: 39
Joined: 11 Mar 2013, 08:01

Re: Mobile version (problem with logo and horizontal orientation)

07 Nov 2017, 23:15

I mean this. When menu and logo on the top of slideshow or gallery. And picture starts in horizontal orientation. Maybe I can change ratio aspect only for mobile version but I didn't find how.
Attachments
WhatsApp Image 2017-11-07 at 19.00.34.jpeg
WhatsApp Image 2017-11-07 at 19.00.34.jpeg (101.06 KiB) Viewed 4564 times
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Mobile version (problem with logo and horizontal orientation)

08 Nov 2017, 00:45

Now screenshots from a different website, but ok. For your logo, I don't understand how you get the menu-button BELOW the logo. Have you added some custom CSS?

By default, it looks like this:


Even when your logo is "too large", the menu button will still display on right:


For the logo, what exactly is the problem, and what are you expecting?
Maybe I can change ratio aspect only for mobile version but I didn't find how.
Mobile design is about COMPROMISE. You have landscape-images vs portrait-images vs horizontal orientation devices vs vertical orientation devices. Even if you change the ASPECT ratio for the slideshow (which is possible), your landscape-images within the slideshow will still always be landscape-images, with non-optimal viewing from vertical oriented mobile devices. EITHER, your landscape images will display like in your screenshot on mobile devices (I don't see how this is a big problem, as there is nothing more a mobile device user would expect), OR you could set the slideshow to cover a taller aspect, but that would mean both sides of the image get cut off.
 
elpd
Experienced
Posts: 51
Joined: 02 Sep 2008, 06:30

Re: Mobile version (problem with logo and horizontal orientation)

21 Mar 2018, 06:25

mjau-mjau wrote: I don't really see the problem here, as your logo seems "fine" also on mobile. We will not be adding an icon to tell the user to rotate their phone ... The icon itself would obscure the design, and personally I would NEVER rotate my phone based on an icon anyway. I want to use the menu to navigate the website, and rotating the phone is counter-productive. When I get to viewing images in your gallery, although I can pinch-zoom, I might rotate the phone to get a better view of the images, but that would be entirely my own decision ... This is identical to how mobile users will react when viewing images on Facebook/Google/Flickr also. It's obvious they will get a better view of landscape images if they rotate the phone, but it's entirely up to them. This is nothing less than expected behavior for mobile users.

As for your logo on mobile devices, it looks fine from here. As long as you are not using a subtle background image, and your logo doesn't have it's own background, then results on mobile devices will obviously not be 100% perfect. I am not quite sure what magic you would expect to apply to the logo on mobile devices, and only for the home page?

If you want precision control of how the logo appears on mobile devices, you can use custom CSS to for example 1) Hide the logo, or 2) Add a white background square to the logo on mobile devices. However, you would need to apply very specific CSS selectors if you only want to change the logo when mobile is in VERTICAL orientation, and if you ONLY want to change the logo on the frontpage when there is a slideshow in the background.

If you do want custom CSS for the above, I can help.
Hi Karl,

I was reading this topic because I was looking for a solution to place my logo within the menu.
@ this moment I'm using the sidebar layout as default layout for my gallery. When it switches to the mobile version my logo is showed on top of the the photos like the example above. Because the logo takes almost 50% off the screen i don't like it. What I did is adding some CSS so the logo will disappear in the mobile version. First I thought it's a good solution but now i think its nicer to have the logo within the menu on top of the menu items. I'll give you an example:

The standard menu:
menu_no_logo.png
menu_no_logo.png (210.3 KiB) Viewed 4410 times
With logo:
menu_with_logo.png
menu_with_logo.png (251.15 KiB) Viewed 4410 times
What would you think of this option? Is this possible by adding some CSS. I hope you can help me with this.

Thanks in advance!

Erik  
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Mobile version (problem with logo and horizontal orientation)

21 Mar 2018, 10:08

I'll be straight-forward here: There is no support for adding a logo into the menu, unless you create a javascript hack that injects it, something I don't wish to spend hours with. Furthermore, personally I think this is a bad design implementation. The logo should be immediately visible on the website, and not obscured ... Why would the user have any interest in seeing the logo every time they open the menu?

My personal suggestion would be to use CSS media queries to adjust the side of the logo (make it small enough) on mobile screens. Since you say your logo takes 50% of screen, it must be very tall, or set to use a large width by default. It can (and should) be adjusted to be much smaller on mobile screens ... For example like the logo on www.photo.gallery.

Perhaps you have a link to your website?