Theme 'mobile_light' for cpg1.5.x

[Αndré]

A light theme (basing on water_drop) especially designed for mobile devices. It overwrites some config values for (IMHO) better appearance on small screen/low resolution devices.

I suggest to use it in combination with the Theme switch (mobile mode) plugin for cpg1.5.x

[sharpo]

I'm experimenting with this theme and using the theme switch plugin. I also use Lightbox notes for net v3.2.

I'm pleased with how it works, but have a problem with the intermediate image increasing in size and taking up too much of the screen.

My mobile, when viewed sideways, has a screen of 800 x 480 pixels. I thought this would easily accomodate the intermediate image of 500 x 333 pixels and also show the description, but the image increases in size and the bottom part disappears off the screen.

I've spent ages tinkering with config settings etc. but cannot work out how to display the image actual size.

The Lightbox slideshow does work though, with the image & description fitting the screen perfectly.

If somebody could please explain what I need to alter, I would be very grateful.

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

Thanks.

[Αndré]

Just tested and confirmed that behavior (see attached screenshot). Probably

Code (template.html) Select Expand

<meta name="viewport" content="width=device-width" />
forces that behavior. Unfortunately I've currently no time to investigate this issue.

I found an article: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
Search for

But!

it describes exactly what happens in your gallery.

[sharpo]

Thanks for replying Andre,

Whilst searching for a solution last night, I did see a mention of that code line you mentioned. I tried removing it, but of course it made matters worse.

I will try that link you suggested. In the meantime, if you or anybody else think of a solution - please let me know.

Cheers.

[sharpo]

I think I'm making progress, but only have 1 mobile to test it on. It may not work on others - so if anybody is able to test it??

I have replaced the original "viewport" line with this:-

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">

It was mentioned in this site:-

http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

There may be other, better ways to achieve what I am trying to do - any help appreciated.

[phill104]

If you use firefox you can change the view emulation to various mobile devices. There are a few plugins that do it. So as far as the website is concerned you will be served and see the mobile version on your desktop

[sharpo]

Thanks Phil, I will give that a try.

Thinking about my "fix", the image fits better, but I think the text is now smaller as well. So I haven't solved the problem, just created another!

[sharpo]

Hope I'm not going off topic with this, but it has certainly helped with a "slideshow" option on my mobile. I did a search and found this:-

http://forum.coppermine-gallery.net/index.php/topic,73583.msg354334.html#msg354334

It is inserted into the mobile theme & removes the space around the slideshow image when using the standard slideshow. So now the intermediate image fills the screen, but can be resized by the the person viewing.

If anybody reads this, tries my site and thinks it is an improvement, I would appreciate knowing. It will also reduce data usage as intermediate images are viewed and not the fullsize ones which Lightbox uses.

[Αndré]

I have replaced the original "viewport" line with this:-

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">

I had a short look yesterday. With that code, the intermediate-sized picture fits into the browser in portrait mode, unfortunately it wastes space in landscape mode, as it uses the same size as in portrait mode.

[sharpo]

I had a short look yesterday. With that code, the intermediate-sized picture fits into the browser in portrait mode, unfortunately it wastes space in landscape mode, as it uses the same size as in portrait mode.

Thanks for taking a look.

It may not be perfect, but for me it is an improvement.

If anybody with more knowledge than me at modifying themes can come up with further improvements, I'm sure it would be appreciated by all of us.

[Sonya54]

Hi Αndré

Thanks for this plugin,

Do you know how can i add "last album updated" section on the top on one of my gallery with your mobile_light theme ?

thanks

[Αndré]

how can i add "last album updated" section

Open theme.php, find

Code Select Expand

$CONFIG['main_page_layout'] = 'breadcrumb/catlist/alblist';
and add

Code Select Expand

lastalb
to the list, e.g.

Code Select Expand

$CONFIG['main_page_layout'] = 'breadcrumb/lastalb/catlist/alblist';

[Sonya54]

Thank You André

[WillyWonderDog]

Awesome plugin, works great!
My question: Is there a way to modify the mobile_light theme to skip the intermediate image and display the full size image when thumbnail is clicked (touched). I don't want to modify the desktop theme (a setting in config), just the mobile_light theme. Thanks for your consideration.

[Αndré]

I assume you want to load the full-sized picture on the intermediate-sized page, or do you really want to skip that page and display the full-sized view (like the Go directly from thumbnail to full-sized image setting)?

[WillyWonderDog]

Please accept my apology. I was trying to figure out how to skip the intermediate page (like the setting in config) but now I realize I am posting the question in the wrong area of the forum. I should be addressing the theme, not the plugin ( I use both your theme switch (mobile mode) plugin and your mobile_light theme. Thanks for your great contributions to CPG Andre. Feel free to delete my posts regarding this matter.

[Αndré]

Splitted from theme_switch plugin announcement thread and merged with mobile_light theme announcement thread.

[mitko]

Andre, i have two questions regarding to the mobile themes:
1. In the single image page my image always wider than mobile screen. Is it possible somehow to scale it? I tried to use picture_table_width parameter - it is decreasing the tables width above and below image but the image itself staying the same.
2. Google claims that active elements on the pages are too small, is it possible to adjust this somehow?
Recently google start to drop pagerank of the sites which are not adapted for mobile devices, so this theme becames much more important.

[netb]

Andre, i have two questions regarding to the mobile themes:
1. In the single image page my image always wider than mobile screen. Is it possible somehow to scale it? I tried to use picture_table_width parameter - it is decreasing the tables width above and below image but the image itself staying the same.
2. Google claims that active elements on the pages are too small, is it possible to adjust this somehow?
Recently google start to drop pagerank of the sites which are not adapted for mobile devices, so this theme becames much more important.

You could check this thread and adapt some of the css, for responsive images:

Code Select Expand


img {
    max-width: 100%!important;
    height: auto;
}


[netb]

whoops missed to paste the link http://forum.coppermine-gallery.net/index.php/topic,77662.0.html