Piwigo.org

MrVaulen · 2016-05-18 18:26:08

Hi,

When using the mobile theme, the icons and menus are way too small when viewed on my -//:---\spam (Lumia 1020 (1920x1080 resolution). I have the same resolution on my Nexus 2013 tablet and it is fine there due to the bigger screen area. How can I make the icons appear larger on my phone?

Thanks,
Jørgen

Piwigo version: 2.8.1
PHP version: 7
MySQL version: 5.7.9
Piwigo URL: http://

Last edited by MrVaulen (2016-05-18 18:28:23)

teekay · 2016-05-18 23:49:56

Now that is one hell of a lot of pixels for a phone.

I can't help with smartpocket, but just out of curiosity... I developed a theme, Bootstrap Darkroom, and my main intention was mobile-readyness and consistent look across all sorts of devices. I'm not intending to do any marketing drumrolls for it, but I'm _really_ curious how it looks on such a lumia. Would you mind trying it and posting a screenshot? (you need to deactive smartpocket to test it on mobile)

tl;dr: maybe try something responsive (there are some bootstrap based themes available on piwigo.org/ext)

Last edited by teekay (2016-05-18 23:52:18)

flop25 · 2016-05-19 11:06:05

That's OK That would be interesting indeed. And if you use the desktopvversion?

anasingh668 · 2016-05-19 15:09:05

Themes and Icon looks good small so leave them without worrying about them.

flop25 · 2016-05-19 15:12:28

MrVaulen wrote:
(Lumia 1020 (1920x1080 resolution).

in fact it's 1280x768 ! not really the same (Hopefully. That's a a resolution for tablet such as the Lumia 2520 )

MrVaulen · 2016-05-20 00:05:13

Thanks for your replies,

flop25 is right, my Lumia 1020 has 1280x768 resolution. I thought my work phone (Lumia 930 with 1920x1080 res.) had the same resolution as my private one. Still the icons appear too small. I wish it was more adaptable, filling my screen. Now if feels more like a desktop theme than a mobile one, only with less menu items.
I'm sure quite a few high end phones and tablets today come with high resolution, and for any phone or tablet I think it makes more sense to fill the screen. After all, the displays are small, from 4" up to perhaps 10". I don't think we need a very high resolution on such small devices, but it seems like the different makers are using it in the race for better specs so it is what it is.

teekay, I did try your darkroom theme and I like it very much. My only anoiance is that I then loose the option of choosing between Mobile and Desktop theme at the bottom of any page. Is there a way to get that back using your theme? And also I prefer swiping through the pictures as default when an album is opened. Any way to set swipe as default when a picture is opened? The icons and menus are also very small on your theme, but perhaps a bit easier to hit with my fingers then with the standard mobile theme.

Please see attached screenshot from both Lumia 1020 and Lumia 930 with darkroom theme, they look very similar even though they have different resolution. Have also attached a screenshot from Lumia 1020 when using default theme. Looking at these screenshots on the PC monitor does not do them justice as they appear a lot larger on my 23" desktop monitor than on my Lumia 1020 with 4,5" display. I also got to test the darkroom theme on a Samsung Galaxy S5 (quite common phone) and it was too small to my liking on this phone as well. I can't be the only one?

teekay · 2016-05-20 11:22:15

Thanks for testing, MrVaulen.

First: to enable switching between smartpocket mobile theme and Bootstrap Darkroom, enable the smartpocket theme again. It will be the default theme for mobile then, you can switch between them as usual with other desktop themes. The swiping as default action for the thumbnails page could be a configuration option, I'll look into it.

As for the theme display: I didn't really expect it to look like that. It should have only two columns if you hold the phone in portrait orientation (768px width). I tested it with IE 11's mobile phone emulation modes, looks OK there.

Does your phone run Windows Phone 8 with IE 10, or Update 8.1 with IE11? Mobile IE10 has some bugs that makes webpages appear zoomed out in some circumstances. This could also be the reason why smartpocket looks so strange on your phone, even it shouldn't given the devices pixel ratio.

Just for testing, I set up a Demo with a possible fix here: https://pwgdemo.kuther.net/ - how does that look?

PS: attached are two screenshots of IE11 mobile emulation. See, also smartpocket should look more "zoomed in"

Last edited by teekay (2016-05-20 12:08:41)

MrVaulen · 2016-05-20 18:28:57

Fantastic! You are getting close with your demo, https://pwgdemo.kuther.net/
It looks a lot better, probably too big now :) On the Lumia 1020 I am not getting any thumbnails below the picture if I open a picture, while on the Lumia 930 I get two thumbnails under the picture; making me able to quickly browse through the pictures and open the ones I want to see bigger. In landscape mode the image fills more than the screen, so it is too big. You re definitely getting close though :)

I am running 8.1 on Lumia 1020 and 10 on Lumia 930. Both browsers are set to mobile mode.

Your two screenshots from the emulator looks better than what I am getting on the actual phones, strange... Why are they square though, my phones don't have square screens?

See my attached screenshots from your demo, and thanks for doing some testing!

Last edited by MrVaulen (2016-05-20 18:34:11)

teekay · 2016-05-20 18:58:28

Interesting! Thanks again for testing. I'll put that fix in the next version.

So the issue with both Darkroom and Smartpocket seems to be that IE Mobile reports itself with a way too large viewport size. I'll see if I can come up with a fix for Smartpocket similar to that one on the darkroom demo site now.

The screenshot I posted is sort of squared, because it's a cropped part of the whole screen.

I managed to find my work phone (I rarely use it, the kids had hidden it somewhere), which is a Lumia 935 with Windows Phone 8.1. It also doesn't show the carousel below the image, and the photoswipe fullscreen slideshow feature is broken, too (that two arrow icon above the main image, or double tapping the image).

Too bad mobile IE doesn't have a native browser debugging feature like Android and iOS devices do. Quite obviously the emulation mode of Desktop IE11 does not behave like the actual version on the phone, which makes it almost impossible to develop something for that platform without getting nuts at some point..

teekay · 2016-05-20 19:35:06

Could you please test smartpocket on pwgdemo.kuther.net? It's enabled now, with a possible fix.

kuzco · 2016-05-21 11:36:11

Hello,
I am also playing a little bit with these themes and have still problems to view videos in the smart pocket theme.
Unless I do not click on "more information" I do only see a X as thumbnail and no video play is possible.
I am using VideoJS.

It is possible for you to add a *.mp4 video to one of these folders ? So I can see if this problem also exists here..

Regards
Kuzco

teekay · 2016-05-21 19:55:43

kuzco wrote:
Hello,
I am also playing a little bit with these themes and have still problems to view videos in the smart pocket theme.
Unless I do not click on "more information" I do only see a X as thumbnail and no video play is possible.
I am using VideoJS.

It is possible for you to add a *.mp4 video to one of these folders ? So I can see if this problem also exists here..

Regards
Kuzco

Smartpocket and Darkroom both use PhotoSwipe for the slideshow feature. Unfortunately it doesn't support video content. For the newer version of PhotoSwipe which I use in Darkroom, there's a workaround to open the actual video in a modal when clicking the thumbnail. As I'm also using the VideoJS plugin, this is on my todo list already.

kuzco · 2016-05-22 11:04:33

Sounds good.
Do you have any timeline ?

Regrads
kuzco

Last edited by kuzco (2016-05-22 11:04:46)

MrVaulen · 2016-05-22 15:48:21

Wow, that looks amazing! Much better! See attached screenshot from my Lumia 1020.
Opening an album is also more towards the user experience I hope for when using a mobile device. Where the images open up straight in swipe mode after selecting a picture inside the album.

FYI: Your demo also looks better on my Nexus 7 tablet, than default smartpocket settings.

How can I do these changes to my site, is it easy?

Thansk,
Jørgen

flop25 · 2016-05-22 16:16:28

MrVaulen wrote:
How can I do these changes to my site, is it easy?

wait a little bit. He will probably share its chanegs and I will integrate them then we release a new version of the theme and in one click everyone update

Piwigo.org

Announcement

#1 2016-05-18 18:26:08

Mobile theme, icons and menus are so small

#2 2016-05-18 23:49:56

Re: Mobile theme, icons and menus are so small

#3 2016-05-19 11:06:05

Re: Mobile theme, icons and menus are so small

#4 2016-05-19 15:09:05

Re: Mobile theme, icons and menus are so small

#5 2016-05-19 15:12:28

Re: Mobile theme, icons and menus are so small

MrVaulen wrote:

#6 2016-05-20 00:05:13

Re: Mobile theme, icons and menus are so small

#7 2016-05-20 11:22:15

Re: Mobile theme, icons and menus are so small

#8 2016-05-20 18:28:57

Re: Mobile theme, icons and menus are so small

#9 2016-05-20 18:58:28

Re: Mobile theme, icons and menus are so small

#10 2016-05-20 19:35:06

Re: Mobile theme, icons and menus are so small

#11 2016-05-21 11:36:11

Re: Mobile theme, icons and menus are so small

#12 2016-05-21 19:55:43

Re: Mobile theme, icons and menus are so small

kuzco wrote:

#13 2016-05-22 11:04:33

Re: Mobile theme, icons and menus are so small

#14 2016-05-22 15:48:21

Re: Mobile theme, icons and menus are so small

#15 2016-05-22 16:16:28

Re: Mobile theme, icons and menus are so small

MrVaulen wrote:

Board footer