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
-
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)
-
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.
-
Just tested and confirmed that behavior (see attached screenshot). Probably
<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.
-
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.
-
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.
-
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
-
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!
-
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.
-
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.
-
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.
-
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
-
how can i add "last album updated" section
Open theme.php, find
$CONFIG['main_page_layout'] = 'breadcrumb/catlist/alblist';
and add
lastalb
to the list, e.g.
$CONFIG['main_page_layout'] = 'breadcrumb/lastalb/catlist/alblist';
-
Thank You André :) :)
-
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.
-
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)?
-
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.
-
Splitted from theme_switch plugin announcement thread and merged with mobile_light theme announcement thread.
-
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.
-
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:
img {
max-width: 100%!important;
height: auto;
}
-
whoops missed to paste the link http://forum.coppermine-gallery.net/index.php/topic,77662.0.html
-
You could check this thread and adapt some of the css, for responsive images:
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:
.display_media .image {
max-width: 70vw!important;
height: auto;
}
Read all my thread with attention.
-
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.
-
Your gallery link please.
-
See below
-
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.
-
Post deleted. Answer in Reply #27.
-
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?
-
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) :
/******************************************************************************
** 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):
<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?
-
The difference between screenshots is only Picture Navigation plugin on and off
-
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?
-
Nobody can help with this?
-
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.
-
Thanks, Andre. Standing by.
-
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
-
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?
-
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).
-
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.
-
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
-
I know the chances are slim, but by any chance is someone still looking at this? I have a couple of issues with it you see. It doesn't seem to display things in the thumbnail view very well.