forum.coppermine-gallery.net

Support => cpg1.5 themes (visuals) => cpg1.5.x Support => cpg1.5 theme contributions => Topic started by: Αndré on April 26, 2012, 02:21:40 pm

Title: Theme 'mobile_light' for cpg1.5.x
Post by: Αndré on April 26, 2012, 02:21:40 pm
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 (http://forum.coppermine-gallery.net/index.php/topic,74827.0.html)
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: sharpo on November 20, 2013, 12:51:11 am
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.
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: Αndré on November 20, 2013, 11:23:47 am
Just tested and confirmed that behavior (see attached screenshot). Probably
Code: (template.html) [Select]
<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
Quote
But!
it describes exactly what happens in your gallery.
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: sharpo on November 20, 2013, 11:52:33 am
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.
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: sharpo on November 20, 2013, 08:11:33 pm
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.
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: Phill Luckhurst on November 20, 2013, 08:29:36 pm
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
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: sharpo on November 20, 2013, 09:04:28 pm
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!
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: sharpo on November 20, 2013, 10:50:21 pm
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.
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: Αndré on November 21, 2013, 12:34:17 pm
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.
Title: Re: Re: Theme 'mobile_light' for cpg1.5.x
Post by: sharpo on November 21, 2013, 01:59:38 pm
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.
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: Sonya54 on June 07, 2014, 04:07:58 pm
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
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: Αndré on June 16, 2014, 12:20:27 pm
how can i add "last album updated" section

Open theme.php, find
Code: [Select]
$CONFIG['main_page_layout'] = 'breadcrumb/catlist/alblist';and add
Code: [Select]
lastalbto the list, e.g.
Code: [Select]
$CONFIG['main_page_layout'] = 'breadcrumb/lastalb/catlist/alblist';
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: Sonya54 on June 16, 2014, 02:01:43 pm
Thank You André :) :)
Title: Re: Theme switch (mobile mode) plugin for cpg1.5.x
Post by: WillyWonderDog on August 23, 2014, 04:58:17 am
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.
Title: Re: Re: Theme switch (mobile mode) plugin for cpg1.5.x
Post by: Αndré on August 23, 2014, 01:48:27 pm
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 (http://documentation.coppermine-gallery.net/en/configuration.htm#admin_thumbnail_to_fullsize) setting)?
Title: Re: Re: Theme switch (mobile mode) plugin for cpg1.5.x
Post by: WillyWonderDog on August 24, 2014, 02:52:36 am
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.
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: Αndré on August 25, 2014, 10:33:38 am
Splitted from theme_switch plugin announcement thread and merged with mobile_light theme announcement thread.
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: mitko on May 20, 2015, 09:59:28 pm
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.
Title: Re: Re: Theme 'mobile_light' for cpg1.5.x
Post by: netb on May 21, 2015, 01:04:48 pm
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]
img {
    max-width: 100%!important;
    height: auto;
}
Title: Re: Re: Theme 'mobile_light' for cpg1.5.x
Post by: netb on May 21, 2015, 01:05:28 pm
whoops missed to paste the link http://forum.coppermine-gallery.net/index.php/topic,77662.0.html
Title: Re: Re: Theme 'mobile_light' for cpg1.5.x
Post by: allvip on May 21, 2015, 01:11:50 pm
You could check this thread and adapt some of the css, for responsive images:

Code: [Select]
img {
    max-width: 100%!important;
    height: auto!important;
}

It works only for themes with divs not with tables. In my curve responsive theme I used:

Code: [Select]
.display_media .image {
    max-width: 70vw!important;
    height: auto;
}

Read all my thread with attention.
Title: Re: Re: Theme 'mobile_light' for cpg1.5.x
Post by: mitko on May 21, 2015, 09:21:40 pm
It works only for themes with divs not with tables. In my curve responsive theme I used:
I tried - it works, thanks, but now title and info tables are too wide. Strange that on the thumbnails and album pages everything is okay, problems only in the single image page.
Title: Re: Re: Theme 'mobile_light' for cpg1.5.x
Post by: allvip on May 21, 2015, 09:37:56 pm
Your gallery link please.
Title: Re: Re: Theme 'mobile_light' for cpg1.5.x
Post by: mitko on May 21, 2015, 09:46:23 pm
See below
Title: Re: Re: Theme 'mobile_light' for cpg1.5.x
Post by: allvip on May 21, 2015, 11:20:21 pm
I tried - it works, thanks, but now title and info tables are too wide.

I will look into it and answer tomorrow. I will try to make the image page responsive for this theme.
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: allvip on May 24, 2015, 05:52:13 pm
Post deleted. Answer in Reply #27.
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: mitko on May 24, 2015, 08:47:01 pm
Well, unfortunately i'm not very good in programming  ::)
So what i did: i tried to update existing plugin to latest FB scripts. In fact i've got strange effect: in standard theme i have fb like / fb comment forms, but in mobile they were disappeared  :)
Anyway this doesn't bother me much, but another problem is that then picture navigation plugin is installed - i have a problem, but then it is deinstalled - seems all is okay. How you manage to get this plugin work well?
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: allvip on May 24, 2015, 10:21:30 pm
Well, unfortunately i'm not very good in programming  ::)
So what i did: i tried to update existing plugin to latest FB scripts. In fact i've got strange effect: in standard theme i have fb like / fb comment forms, but in mobile they were disappeared  :)

Ok. Ignore the link I posted How to add facebook comments with function dispaly_image not display_media: http://forum.coppermine-gallery.net/index.php/topic,76925.0.html (http://forum.coppermine-gallery.net/index.php/topic,76925.0.html) in Reply #25.

I am going to tell you step by step how to add facebook comments (https://developers.facebook.com/docs/plugins/comments (https://developers.facebook.com/docs/plugins/comments)):

1) Add to mobile_light/theme.php before ?> (Replace in the code data-width="300" with the value you want 250,500 etc. Facebook comments are not responsive thats why I choosed 300) :

Code: [Select]
/******************************************************************************
** Section <<<theme_display_image>>> - START
******************************************************************************/
function theme_display_image($nav_menu, $picture, $votes, $pic_info, $comments, $film_strip)
{
    global $CONFIG, $LINEBREAK;

    $superCage = Inspekt::makeSuperCage();

    $width = $CONFIG['picture_table_width'];

    echo '<a name="top_display_media"></a>'; // set the navbar-anchor
    starttable();
    echo $nav_menu;
    endtable();

    starttable();
    echo $picture;
    endtable();
    if ($CONFIG['display_film_strip'] == 1) {
        echo $film_strip;
    }


    echo $votes;
    echo '<div class="fb-comments" data-href="http://www.lightphotos.net/photos/displayimage.php?pid='.$pid.'"  data-width="300" data-numposts="3" data-colorscheme="light">';
    echo '</div>';
    $picinfo = $superCage->cookie->keyExists('picinfo') ? $superCage->cookie->getAlpha('picinfo') : ($CONFIG['display_pic_info'] ? 'block' : 'none');
    echo $LINEBREAK . '<div id="picinfo" style="display: '.$picinfo.';">' . $LINEBREAK;
    starttable();
    echo $pic_info;
    endtable();
    echo '</div>' . $LINEBREAK;

    echo '<a name="comments_top"></a>';
    echo '<div id="comments">' . $LINEBREAK;
        echo $comments;
        echo '</div>' . $LINEBREAK;

}
/******************************************************************************
** Section <<<theme_display_image>>> - END
******************************************************************************/

2) Add to mobile_light/template.html after <body> (without this code the facebook commets don't show):

Code: [Select]
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Another way
I belive you first used Social Sharing Plugin (Facebook Like/FB Share/FB Comments/Twitter/VZ zeigen) http://forum.coppermine-gallery.net/index.php/topic,70221.0.html (http://forum.coppermine-gallery.net/index.php/topic,70221.0.html)
If you still want to use it then ignore the code above, go to plugin manager - Social Sharing (social_sharing): v1.5 - Configure plugin - under the title/caption (see attachment Configure plugin.jpg). Under the picture option adds the facebook button and comments inside the display image td. That's why the picture navigation plugin arrows go down, not on the center of the td (see attachment under the picture.jpg). Under the title/caption adds the facebook button and comments outside the display image td (see attachment under the titlecaption.jpg).

another problem is that then picture navigation plugin is installed - i have a problem, but then it is deinstalled - seems all is okay. How you manage to get this plugin work well?

Is proabibly the Share plugin you use. Is inside the display media td. Should be outside. Can you post the link from where you downloaded this plugin? Does it has the option to place it under title/caption like the facebook plugin?
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: mitko on May 24, 2015, 10:43:10 pm
The difference between screenshots is only Picture Navigation plugin on and off
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: mitko on July 24, 2015, 02:53:37 pm
Gents the problem is still actual - Picture Navigation plugin doesn't works properly on mobile theme. Is it possible to disable in the theme particular plugin and keep it working in another theme?
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: mitko on August 23, 2015, 12:08:55 pm
Nobody can help with this?
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: Αndré on August 24, 2015, 10:47:21 am
It's on my to-do list, but I haven't found enough spare time yet to have a closer look at the code to fix it.
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: mitko on August 24, 2015, 11:34:00 am
Thanks, Andre. Standing by.
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: Αndré on September 03, 2015, 12:07:43 pm
I just splitted the recent conversation and merged it with the plugin thread: http://forum.coppermine-gallery.net/index.php/topic,68456.msg379359.html#msg379359
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: mitko on September 03, 2015, 03:59:51 pm
I still have minor issue with this theme. On a single-image page google reports that width of the page is 400 (it is required 375 for mobile devices). How is possible to change it?
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: Αndré on September 09, 2015, 04:19:37 pm
How/where exactly does Google report this? As far as I can see there's no fixed width set anywhere on your gallery (nor in the theme itself).
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: mitko on September 09, 2015, 04:26:40 pm
Actually i was tried to change some parameters and it is okay now. Unfortunately as i'm not the best web-developer (i think i worst) - i didn't understand what exactly helped to fix.  :o
But anyway problem is solved now.
Title: Re: Theme 'mobile_light' for cpg1.5.x
Post by: Stulle on March 11, 2018, 02:46:54 pm
Hi everyone,

I finally got around to upgrade to CPG1.6.03 and - as would be expected - it crashed this nice plugin. All it took to get it working again was the replacement of two instances of mysql_result (admin.php and normal.php). I attached an updated version for your convenience.

Please note, as far as I can tell, this works flawlessly with the mobile_light theme so no need to change anything there... I guess.

Regards,
Stulle