Is there a solution to Coppermine looking "good" on a mobile phone?

[sharpo]

I'm asking the question as have tried various options over the years and it does work - BUT with the browsers I've tried, and the themes or plugins, there is always something not right.

As mentioned in another topic, with Firefox the intermediate image display won't fit the screen, but HTML5slideshow and Lightbox do fit - but with chrome the intermediate does fit but Lightbox and HTML5slideshow are too narrow.

I tried mobile_lite (or mobile_light) first, then curve_responsive - which had very small thumbnails and only about 12 characters of text per line under a thumbnail, making descriptions harder to read.

Latest attempt was to sample a MonicaNDesign on my mobile, and that had similar limitations on characters under thumbnails as curve_responsive.

Is there a theme for mobile that does work well or have I got some settings incorrectly set? If somebody can post a link to a Coppermine gallery that works well on a mobile but without the above problems, then it would give me some encouragement to keep trying to get mine fixed. Several years ago I came to the conclusion that people just using mobiles wouldn't waste time trying to view the galleries as at first view things just didn't fit.

I usually forget links, but on this occasion I'm remembering to add them - try with a mobile and hopefully you'll see the problems I'm trying to deal with. One has curve_responsive set for mobiles, the other mobile_lite(or light)

http://sharpo.co.uk/cpg16test/index.php
http://sharpo.co.uk/cpg15test/index.php (I know it says cpg15 - but I did upgrade it)

Even if you don't have an answer, it would be good to know if you have the same "problems" as I explained above - unless of course it all works for you?

[ron4mac]

You just need to have a "good" theme. CPG comes with some now quite old and not well suited for mobile themes. But there are way too few people involved with the project to spend time working a developing new themes. There are a lot of themes out on the web.

One designer that I like is here: https://monicandesign.com/shop/category/themes/
It's probably not the style that you're looking for, but it would be a good start for you to modify to get it to look the way you want. They work pretty well with mobile.
Download #12 that is free, see how it works for you on mobile and adjust it the way you want.

[sharpo]

Thanks for reply, yes, I had noticed not many of the listed developers were "active" now, which obviously does not help.

I did try that free design you suggested some months ago but wasn't overly impressed by it.

No doubt, like everybody else, my spare time is limited and my knowledge on editing themes is next to nothing - which is why I asked the question, hoping to get a few pointers as to what to try or do next. Have to see what happens over the coming days/weeks etc.

With more and more people spending their time with eyes glued to mobiles I do feel I would like my galleries to work a bit better for them without having the need to "tweek" the screen to make things fit in or fill the screen. For tablets and desktop, for me it's just right.

Any further comments, or other themes to try, will be most welcome. Thanks in advance.

[sharpo]

Rather than mess up one of my other test sites, I've set up a 1.16.04 gallery purely to try to try and work on improving the look for mobiles. Just 3 images in it to my usual size of 957x638, as that is the same as the other 25,000 or so in my main site.

Added Lightbox notesfornet, HTML5 slideshow and MiniCMS. Just to point out I had to search for some edits to correct some problems I had in recent weeks - one was to get the text at bottom of screen for HTML5 slideshow and the other was a problem with Lightbox that did not show the captions below image and the 2 buttons displaced to the right.

Firefox browser works very well, MiniCMS messages show, HTML5 slideshow and Lightbox both work well after making edits as above. Chrome gets screwed up with HTML5 slideshow though, the image starts half way across the screen and is probably 3 times bigger than it needs to be. Thought that worked in my previous test sites, maybe I messed something up when setting it up just now.

The common problem for me with both browsers is that only about 8 or 9 characters fit on a line below a thumbnail image. A quick look at the home page and scrolling down will show what I mean. Any suggestions on the files to edit to alter that would be a start for me to start working on it.

http://www.sharpo.co.uk/cpgmob/

With Firefox on my desktop I've got that "inspect element" option to click on the screen and view the code when clicking on parts of the gallery screen, developer tools I think it's called.

I'm making an effort - any help will obviously be appreciated, thanks in advance.....

[sharpo]

I've made no further progress, not surprising with my limited knowledge.

Have spent some time wondering whether I should post this or not, or in which topic I should post???!!! Anyway, not wanting to appear a troublemaker or clog up other topics, I'll post it here.

I looked at a gallery which is linked to from a recent contributor's posting, making a point of viewing it with my mobile - and found similar problems to some that I have. It has an HTML5 slideshow which works fine with Firefox, but not with Chrome or Samsung. The problem on one is that the image in the slideshow is way too big for the screen, with the other the whole screen seems to disappear from the mobile when swiping.

Obviously I'm not criticising a gallery, or any of the developers/helpers/posters on here - just trying to be constructive and point out that there are problems which others may not have realised, and that it's not just my sites.

[sharpo]

You'll have to forgive me if I'm rambling on a bit - but I have made slight progress.

Decided to have another look at mobile_light plugin and realised it was easy to edit some basic configuration settings, and adding minicms/ in front of breadcrumb on line 4 of theme.php will now show the MiniCMS messages, as it would do on a desktop.

I'm using Chrome on my mobile, the intermediate image fits the screen well, HTML5 slideshow works as expected without a problem a mentioned in the previous post. The drop down menu works for "Last uploads" etc. Title and description show in a good way below thumbnails BUT the only problem so far is Lightbox only fills just half the screen, starting on the left side, leaving a big gap on the right with the intermediate image showing. Double tapping in the black area below it does enlarge it to almost fill the screen, but there must be a simple explanation to the problem - to others maybe, but not me.

If you want to follow progress, use Chrome for http://sharpo.co.uk/cpg16test/index.php

Just tried Samsung browser and Lightbox image is smaller and if double tapped fills less of the screen.

Maybe waffling a bit - but it is progress???

Any input on this, from anybody - most welcome.

[ron4mac]

I made 2 small changes to the mobile_light theme that should solve some of your issues.
Thought it might be easier to post the modified one here for you rather than give you info on what files and lines to change.

[sharpo]

I made 2 small changes to the mobile_light theme that should solve some of your issues.
Thought it might be easier to post the modified one here for you rather than give you info on what files and lines to change.

Just given it a try. It's not easy to give a quick answer as to what it solves. Firefox still won't fit in all the intermediate image, but Lightbox image does fill the screen. Looking at the intermediate image, and at my logo it gets to ".....world.c" then cuts of everything to the right.

Then I concentrated on the Samsung browser, wouldn't fit there, so I started reducing the text size within the browser settings from 100% to 90, then 80, then 70 and finally at 60% it fits.

The site I was playing with on this occasion is this one:-

http://www.sharpo.co.uk/cpgmob/index.php

I can understand it being difficult with browsers not all working the same way and maybe not all people have the same browser settings for text etc. Hope I'm not giving you clever people too much grief on this, but if it can be solved it would be great for mobile users!!!

[sharpo]

Just got back from shopping. I'm sure Chrome used to fit the intermediate, but now it's too wide. Have tried reducing text size think that would fix it as Samsung browser does - but it made no difference. Also set system font size to small and that made no difference

Firefox only seems to have system settings for text size so can't try altering that.

Lightbox does now fit, but Chrome hides the top Lightbox image border under the browser bar, Firefox does space it down a few pixels, probably as it should do.

Not easy, is it? I know several years ago I tried to forget about my gallery on mobiles - and I used to get other things done. Perhaps I should forget about the mobile view again??

Hope somebody proves me wrong!!!!!

Anyway, thanks for giving it some thought - maybe a bit more tinkering needed???

[ron4mac]

In the mobile_light style.css file, at line 293, change:

Code Select Expand

.navmenu img {
    margin-top: 1px;
    margin-right: 0;
    margin-bottom: 1px;
    margin-left: 0;
}

to:

Code Select Expand

.navmenu img {
    margin: 1px 0;
}

[sharpo]

In the mobile_light style.css file, at line 293, change:

Code Select Expand

.navmenu img {
    margin-top: 1px;
    margin-right: 0;
    margin-bottom: 1px;
    margin-left: 0;
}

to:

Code Select Expand

.navmenu img {
    margin: 1px 0;
}

Not quite sure what that was supposed to do. Firefox and chrome still have the intermediate cut off on the right hand side. Samsung browser HTML5 swiping to the left swipes the whole of image one off the screen, leaving it blank, but at least the intermediate fits the screen.. A gentle backwards and forwards sometimes gets it working

[ron4mac]

Sorry ... I don't have your equipment.  It works okay on my mobile (iPhone: Safari and Chrome). Other than that, I can only test in emulation. Your mobile must have a very narrow screen. Or, perhaps you need to clear the cache. I'm surprised it was not better.

[sharpo]

Sorry ... I don't have your equipment.  It works okay on my mobile (iPhone: Safari and Chrome). Other than that, I can only test in emulation. Your mobile must have a very narrow screen. Or, perhaps you need to clear the cache. I'm surprised it was not better.

Huawei P8 lite 2017 is the phone.
DISPLAY   Type   IPS LCD capacitive touchscreen, 16M colors
Size   5.2 inches, 74.5 cm2 (~69.5% screen-to-body ratio)
Resolution   1080 x 1920 pixels, 16:9 ratio (~424 ppi density)

I've cleared the cache so many times in recent days that I probably do it when asleep as well.

Just tried on another Huawei mobile for the first time, so shouldn't have had any of the content in the cache, results for Firefox and Chrome are the same for the intermediate image screen, it just cuts the right hand end off.

The edit I did from your earlier post is as below, starting at line 285, which shows the cut and paste at 293, I'm sure I did it correctly:-

.navmenu {
    font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
    color: #FFFFFF;
    font-weight: bold;
    background : #8AA5B5 ;
    border-style: none;
}

.navmenu img {
    margin: 1px 0;
}

.navmenu a {
    display: block;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
    text-decoration: none;
    color: #FFFFFF;
}


Besides clearing the cache, again, are there any other mobile settings such as text/font size that I need to check, or in browser settings?

[ron4mac]

What I see now is an issue with the comment section at the bottom. Turn off the comments feature and see if the rest displays okay. If so, I'll (hopefully) come up with a modification to deal with the comment issue.

[sharpo]

I was looking to see where comments turn off, but didn't see it, will try that again

[sharpo]

Comments turned off and the intermediate fits the screen with Chrome. One problem solved!! I did wonder when I saw all those emojis earlier but had forgotten where to disable comments. HTML5 slideshow goes way oversize though, ever noticed that?

[sharpo]

Just had a few minutes to try with the 3 browsers.

Firefox seems to be perfect at the moment, intermediate fits, Lightbox works, and HTML5 slideshow works.

Chrome, Intermediate and Lightbox seem OK but HTML5 slideshow creates oversize images and will just disappear when swiping, can be pinched smaller but then text doesn't line up.

Samsung, once again OK until trying HTML5, the image fits but will just disappear to the left when swiped. Swiping back can then get it working.

[sharpo]

Sorry, it's me again. Just made a YouTube video, I'll keep it unlisted but available to "all here" from a link which I will post in this topic later.

I use three browsers on the site and you will see how each browser performs. Hopefully we'll be getting closer to solving the problems, I say we but really mean "you experts" on here.

Probably ready in a couple of hours......

[sharpo]

Video took a while to upload, hope it explains the problem I'm having with HTML5 slideshow.

I feel the winning line is in sight...... Won't get there on my own though!!!

https://youtu.be/01x3kuhQYZs

It's an unlisted video but should show if you use the above link.

[ron4mac]

Thanks for taking the effort to make the video. But I just have not been able to get it to behave like that. I can't imagine where the problem could be. And without it in front of me, I can't debug it. Does it do the same thing with the Monicandesign theme? Or how about landscape view .. same?