Theme: iMobile for iphone and ipad

calleh

Joined: 2011-03-28
Posts: 90
Posted: Sat, 2011-04-16 21:55

Hi,

I put together an iphone, ipad theme based on fotorama http://www.fotorama.io/.
This theme is activated when the iphone / ipad user agent is identified.
You can see some screenshots here http://codex.galleryproject.org/Gallery3:Themes:iMobile.

Installation:
* extract the contents of the attached themedispatcher_vxx.zip in your modules directory.
* extract the contents of the attached imobile-vxx.zip file in your theme directory
* activate the "Theme dispatcher" module and configure with the "Gallery iMobile" theme and the following user agents: iphone, ipod, ipad

Current Issues:
* no known

You can download the latest versions either from this forum post of from the github repository:
* https://github.com/calleho/gallery3

AttachmentSize
imobile-v2.7.zip103.4 KB
themedispatcher-v2.3.zip10.54 KB
imobile-v3.1.zip421.54 KB
 
jetkins

Joined: 2008-05-13
Posts: 31
Posted: Mon, 2011-04-18 06:58

Wow, I came here tonight to ask if there was any likelihood of a mobile theme any time soon, and discovered that you've already done it! Great work; I look forward to further updates if you manage to iron out the couple of wrinkles you mention.

Thanks!

 
calleh

Joined: 2011-03-28
Posts: 90
Posted: Mon, 2011-04-18 14:32

I fixed the issue with the slideshow start and uploaded a new version.

calleh

 
jetkins

Joined: 2008-05-13
Posts: 31
Posted: Mon, 2011-04-18 17:23
calleh wrote:
I fixed the issue with the slideshow start and uploaded a new version.

Works great. Thanks.

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Tue, 2011-04-19 22:22

I was lucky enough to get a iPad for my birthday and am using it right now to test this out. This is cool. Good job and thanks for the codex page as well.
One issue I saw and don't know if it can be fixed with the current JS or not. When I enter the album I see a button/link to the parent album disappears when you slide the photos about. Once you do that you can't navigate to the parent album.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
calleh

Joined: 2011-03-28
Posts: 90
Posted: Wed, 2011-04-20 05:23

When I understan your comment correctly, then you just have to tap the photo in slideshow mode and the menu with the back button reappears.

 
tempg

Joined: 2005-12-17
Posts: 1857
Posted: Wed, 2011-04-20 13:32
calleh wrote:
* I actually don't like to change files of existing themes (as described above), but I haven't found a way how to identify the user-agent and change the current theme before the theme is initialized.

I can't get the file to unzip properly on this computer, so I haven't seen the contents. (I'll try on another computer later.) But I'm thinking that you could possibly have the code inserted into a module. The module would then add the code to the views files dynamically (similar to the way code is inserted by the nobots module and the custom header module, but without the need for the admin interface).
http://codex.gallery2.org/Gallery3:Modules:nobots
http://codex.gallery2.org/Gallery3:Modules:custom_header

 
calleh

Joined: 2011-03-28
Posts: 90
Posted: Thu, 2011-04-21 06:47

Hi tempg,

thanks for this idea, I will investigate whether this might be an option, but what I saw so far is that it might not help, as I need to completely replace the page and album view based on the user-agent accessing the site. The two modules you mention do insert something to the default template, they do not replace them completely.

 
tempg

Joined: 2005-12-17
Posts: 1857
Posted: Thu, 2011-04-21 13:08

@calleh: I see. (I still haven't looked at the files yet.) I read "add the content of the <gallery root>/themes/<your theme>/views/page.html.php.inc file at the beginning of the <gallery root>/themes/<your theme>/views/page.html.php file of your current theme" to mean that you just needed to add some content via an inc file.

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Thu, 2011-04-21 15:03

This is on my list of things to add to ask at the meetup.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
calleh

Joined: 2011-03-28
Posts: 90
Posted: Thu, 2011-04-21 15:09

Thanks for that Dave. tempg's input gave me an idea where to look and I'm currently drafting a generic module which basically replaces the load_themes function in the theme.php helper and which would allow to load a specific theme based on a defined user-agent. But maybe there are some more elegant ways of doing this...

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Thu, 2011-04-21 20:32

We will fix this issue for the next version of G3.02
https://sourceforge.net/apps/trac/gallery/ticket/1677

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
calleh

Joined: 2011-03-28
Posts: 90
Posted: Sat, 2011-04-23 22:26

Not sure how this would solve the problem. In the meantime I have developed (thanks to tempg who opended my mind) the "Theme dispatcher" module (attached to the first post) which allows to configure different user agents. In case a visitor is using such a configured user agent a configured theme is used instead of the standard theme.
I also converted the theme now to an own theme, no other theme needs to be changed anymore.

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Sat, 2011-04-23 22:47

Adding page_top will allow the module to add content to the page top before the head and body tags. This will allow a theme to detect user agent and then do what they want from that point.
rename page_top to body_top because it was in the body and not the page.
rename page_bottom to body_bottom because it was in the body and not the page.
Then adding 2 more insertion points will be more flexible.

Your way works as well.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
erlis

Joined: 2004-01-16
Posts: 205
Posted: Thu, 2011-04-28 07:04

Wow this really looks great!!

Would be cool to integrate it with my .Pear theme (http://code.google.com/p/pear4gallery/) a theme for G2 (but I think I'll start the porting process for G3 soon) that mimics the mobile.me gallery from apple. Demo of my G2 theme can be fund at: http://erlandssson.nu/~fer/gallery2/main.php

 
wensted

Joined: 2011-04-30
Posts: 5
Posted: Sat, 2011-04-30 07:52

This is just what I have been looking for! I installed the Themedispatcher module & iMobile theme, but I get only "plain" looking picture galleries when I login to my Gallery3 site. Themedispatcher module is activated & user agents defined. Iphone user agent is recognized ok, but pages have no iphone-style layout, just plain images. Gallery3 is running on XAMPP 1.7.3a and still on version 3.0. I see no errors in apache logs when accessing the gallery. Am I missing something?

Thanks for developing this great theme!

 
IanWorthington

Joined: 2007-01-12
Posts: 18
Posted: Sat, 2011-04-30 07:57

I had to uncompress it on the pc, add the .tar extension to the included file, uncompress that, and finally recompress the directory it produced. Then I could upload it and uncompress on the server.

Bit of a performance, but it worked.

i

 
calleh

Joined: 2011-03-28
Posts: 90
Posted: Sat, 2011-04-30 08:05
wensted wrote:
I installed the Themedispatcher module & iMobile theme, but I get only "plain" looking picture galleries when I login to my Gallery3 site. !

Are you logging on using an iphone or ipad?
Can you provide me with an url, then I can have a look?

 
wensted

Joined: 2011-04-30
Posts: 5
Posted: Sat, 2011-04-30 14:41

I'm using iphone to access the gallery. I upgraded Gallery software to version 3.0.1, and it works now great!

I upgraded also XAMPP to 1.7.4, but Gallery upgrade seem to fix things for me. Thanks for support.

 
wensted

Joined: 2011-04-30
Posts: 5
Posted: Sun, 2011-05-01 06:41

One more question :) What would be best way to make gallery thumbnail pictures appear as cropped with right aspect ratio? Now my pictures are streched / minimized to fit thumbnail size. Can it be easily changed somewhere in .css files?

 
erlis

Joined: 2004-01-16
Posts: 205
Posted: Sun, 2011-05-01 07:35
wensted wrote:
One more question :) What would be best way to make gallery thumbnail pictures appear as cropped with right aspect ratio? Now my pictures are streched / minimized to fit thumbnail size. Can it be easily changed somewhere in .css files?

Have you tried http://codex.gallery2.org/Gallery3:Modules:square_thumbs

 
wensted

Joined: 2011-04-30
Posts: 5
Posted: Sun, 2011-05-01 10:34

Thanks for the tip, I tested it, but using square thumbs module I guess I would get square/cropped thumbs also for my normal theme (not iMobile). I'd like to see cropped thumbs with correct aspect ratio in iPhone etc, and "normal" not cropped thumbs when viewed in web browser.

 
mrf00rk
mrf00rk's picture

Joined: 2005-06-02
Posts: 158
Posted: Sun, 2011-05-01 13:22

Worked like a champ! Even I could install this! :D
Maybe "Add a photo-option" would be cool. But hey! ;)

Edit: And maaaybe some tags/latest update/most viewed at the bottom! ;)

My other sandbox

 
calleh

Joined: 2011-03-28
Posts: 90
Posted: Sun, 2011-05-01 13:23
wensted wrote:
I'd like to see cropped thumbs with correct aspect ratio in iPhone etc, and "normal" not cropped thumbs when viewed in web browser.

I'm currently fixing the safari crash situation and I'm also looking at real square thumbs. I'll keep you posted.

 
calleh

Joined: 2011-03-28
Posts: 90
Posted: Wed, 2011-05-04 20:57

I have corrected the safari crashes by using a different js framework for the theme. I have attached the latest version to the first post of this thread.
I have also included square thumbnails with proper aspect ratio.

 
pfranken

Joined: 2011-05-06
Posts: 1
Posted: Fri, 2011-05-06 20:05

Is it just me or ??? ... the imobile-vxx.zip file only contains a directory 'imobile' ... and no files ????

 
calleh

Joined: 2011-03-28
Posts: 90
Posted: Fri, 2011-05-06 20:45

No, it wasn't you - it was me. Seems my last zip didn't work.
I've uploaded it again. Should be ok now.

 
kellsie

Joined: 2008-04-21
Posts: 3
Posted: Tue, 2011-05-10 04:31

Looks like the imobile-v0.5.zip is good but the themedispatcher_v1.0.tgz file is corrupted. I downloaded it from two different computers with different browsers with the same result when trying to unpack it. Would it be possible to get the themedispatcher_v1.0.tgz file uploaded again?

 
calleh

Joined: 2011-03-28
Posts: 90
Posted: Tue, 2011-05-10 12:46

Ok, ok I have converted the tgz to a zip, now everyboy should be able to unzip :-)

 
Armani2

Joined: 2007-05-09
Posts: 263
Posted: Tue, 2011-05-10 21:08

This is a great feature, works like a charm! I was wondering what would have to be done to get it to make the photos larger and smaller again with a pinch on the iPhone?

 
wensted

Joined: 2011-04-30
Posts: 5
Posted: Sat, 2011-05-14 07:32

Hello! Thanks Calleh, now it looks great!

 
chotgor1

Joined: 2005-01-15
Posts: 2
Posted: Tue, 2011-05-17 02:14

I have gallery2 embedded into phpbb, so I can't upgrade to g3 immediately yet.

any way to make this theme work on gallery2?

 
h_s

Joined: 2009-06-26
Posts: 43
Posted: Tue, 2011-05-17 17:04

Very nice theme. Works very well. Thank you for developing and sharing this!!!

One small issue:
Today I noticed, that when I follow e.g. a notification link about a new comment in my gallery on an iPhone, the link results in an error page.

Kind regards,

h_s

 
calleh

Joined: 2011-03-28
Posts: 90
Posted: Wed, 2011-05-18 17:18
Quote:
the link results in an error page

Can you share the regarding error logged in <galleryhome>/var/logs/

 
h_s

Joined: 2009-06-26
Posts: 43
Posted: Wed, 2011-05-18 21:30

I hope this is the corresponding error msg.:

Quote:
2011-05-18 14:23:54 -07:00 --- error: Kohana_Exception [ 42 ]: The requested views, photo.html, could not be found
/var/www/vhosts/xxxxxxx.xy/httpdocs/gallery/system/core/Kohana.php [ 806 ]
#0 /var/www/vhosts/xxxxxxx.xy/httpdocs/gallery/system/libraries/View.php(83): Kohana_Core::find_file('views', 'photo.html', true)
#1 /var/www/vhosts/xxxxxxx.xy/httpdocs/gallery/system/libraries/View.php(49): View_Core->set_filename('photo.html', NULL)
#2 /var/www/vhosts/xxxxxxx.xy/httpdocs/gallery/modules/gallery/libraries/MY_View.php(62): View_Core->__construct('photo.html', NULL, NULL)
#3 /var/www/vhosts/xxxxxxx.xy/httpdocs/gallery/modules/gallery/controllers/photos.php(51): View->__construct('photo.html')
#4 [internal function]: Photos_Controller->show(Object(Item_Model))
#5 /var/www/vhosts/xxxxxxx.xy/httpdocs/gallery/system/core/Kohana.php(331): ReflectionMethod->invokeArgs(Object(Photos_Controller), Array)
#6 [internal function]: Kohana_Core::instance(NULL)
#7 /var/www/vhosts/xxxxxxx.xy/httpdocs/gallery/system/core/Event.php(208): call_user_func_array(Array, Array)
#8 /var/www/vhosts/xxxxxxx.xy/httpdocs/gallery/application/Bootstrap.php(67): Event_Core::run('system.execute')
#9 /var/www/vhosts/xxxxxxx.xy/httpdocs/gallery/index.php(102): require('/var/www/vhosts...')
#10 {main}

 
calleh

Joined: 2011-03-28
Posts: 90
Posted: Fri, 2011-05-20 21:28

I have just uploaded a new version, which
1) adds pinch zoom support requested by Armani2
2) fixes the issue reported by h_s:

Quote:
One small issue:
Today I noticed, that when I follow e.g. a notification link about a new comment in my gallery on an iPhone, the link results in an error page.

 
h_s

Joined: 2009-06-26
Posts: 43
Posted: Sat, 2011-05-21 21:56

Thank you very much!

Kind regards h_s

 
jetkins

Joined: 2008-05-13
Posts: 31
Posted: Sun, 2011-05-22 17:15

FYI, I noticed the other day that when a friend browsed my gallery from his Android phone, he got the regular site instead of the iMobile theme. Might this theme also be offered to Android browsers?

 
calleh

Joined: 2011-03-28
Posts: 90
Posted: Sun, 2011-05-22 19:42

Sure, but I have not tested the theme on android as I have no device available.
In order to send him to the iMobile theme, you would need to add the android useragent string to the configuration of the themedispatcher module. Try "android", that should work.
And please provide feedback if the theme works on android phones.

 
cmisip

Joined: 2011-02-20
Posts: 22
Posted: Sun, 2011-05-29 09:37

I am getting this error.

Fatal error: Method Block::__toString() must not throw an exception in /usr/share/gallery3/modules/gallery/views/error_admin.html.php on line 178

Any ideas?

Thanks

Chris

 
calleh

Joined: 2011-03-28
Posts: 90
Posted: Sun, 2011-05-29 09:58

When are you getting this error?
And can you please enable debugging and provide the regarding, more verbouse logoutput.

 
cmisip

Joined: 2011-02-20
Posts: 22
Posted: Tue, 2011-05-31 00:43

The error occurs immediately when I try to access my gallery installation.

Here is the output of the gallery log file.
2011-05-30 17:39:02 -07:00 --- error: ErrorException [ 0 ]: Invalid argument supplied for foreach()
/usr/share/gallery3/modules/themedispatcher/helpers/MY_theme.php [ 48 ]
#0 /usr/share/gallery3/modules/themedispatcher/helpers/MY_theme.php(48): gallery_error_Core::error_handler(2, 'Invalid argumen...', '/usr/share/gall...', 48, Array)
#1 /usr/share/gallery3/modules/gallery/helpers/gallery_event.php(27): theme::load_themes()
#2 /usr/share/gallery3/modules/gallery/helpers/module.php(375): gallery_event_Core::gallery_ready()
#3 /usr/share/gallery3/modules/gallery/helpers/gallery.php(96): module_Core::event('gallery_ready')
#4 [internal function]: gallery_Core::ready(Array)
#5 /usr/share/gallery3/system/core/Event.php(208): call_user_func_array(Array, Array)
#6 /usr/share/gallery3/application/Bootstrap.php(58): Event_Core::run('system.ready')
#7 /usr/share/gallery3/index.php(102): require('/usr/share/gall...')
#8 {main}

Chris

 
gpo

Joined: 2008-05-05
Posts: 68
Posted: Tue, 2011-05-31 14:18

@calleh The google adsense module doesn't work with this and in chrome browser [pc] the theme is grey and in FF4 its white.
If you have more than 15 albums where's are 3 panes in the theme using chrome [pc]
Also, when I try to login I get a download file is this normal via PC

How do I add comments & share photo [addthis] plugin, add photo to album option!

Check the latest update from Jaipho for Smoother scroll on Jaipho

 
gpo

Joined: 2008-05-05
Posts: 68
Posted: Tue, 2011-05-31 14:21

@Sunite your still using the normal theme and also how do I get my setting to work like comments ,adsense etc under imobile

 
calleh

Joined: 2011-03-28
Posts: 90
Posted: Tue, 2011-05-31 17:17

@cmisip Have you configured the user-agent setting of the themedispatcher module as shown here http://codex.gallery2.org/Gallery3:Themes:iMobile?

@sunite A quick solution for your large number of albums would be, if you would place them in a number of sub-albums. A more sophisticated solution would be to enhance the theme with paginator support, which I haven't yet, but you are happy to provide input.

To the pinch an zoom feature: You need to tap the picture once and then you can zoom using two fingers, like you zoom all other things on an iphone. A one-finger swipe triggers the move to the next slide. How would you zoom with only one finger? There might be an occasion where one picture stays, which goes away if you swipe over it. If you find a way to prevent this, I am open for suggestions.

@gpo Each browser sends a user-agent string to the webserver he is accessing. This user agent string contains beside a number of things also the platform it runs on. The purpose of the themedispatcher module is to select a different theme in case a specific user-agent string is found. In our case we configure themedispatcher to select the imobile theme in case the user-agent string contains iphone or ipad, only in those cases you would see the imobile theme. When you try to access the same site with a firefox, chrome, etc from a pc / mac you would of course see the "normal" theme - unless you fake the user-agent string of that browser. The imobile theme is only made to be accessed from mobile devices like iphones, ipads, androids, etc.
imobile does currently not support comments and probably adsense (I have never used the adsense module, so I don't know how it works.)
When I started to work in this theme, my intention was to basically allow to browse my gallery on mobile devices. I did not intent to implement all features, as I don't want to maintain, upload, etc my gallery form a mobile device. I still have a "proper" pc where I can do those tasks.

 
Jonreynolds

Joined: 2008-03-09
Posts: 96
Posted: Thu, 2011-06-09 09:45

Superb! Absolutely Superb!

edit:
Except...flash videos not working? Shows thumb but doesn't play?

Thanks

Jon Reynolds
www.jcrdevelopments.com

 
Badd

Joined: 2011-06-02
Posts: 8
Posted: Thu, 2011-06-09 15:11

That's because iPhone/iPod Touch & iPad doesn't support flash...

 
Jonreynolds

Joined: 2008-03-09
Posts: 96
Posted: Thu, 2011-06-09 15:17
Badd wrote:
That's because iPhone/iPod Touch & iPad doesn't support flash...

OK, but I am viewing on a Android device. Anyway I can make it work?

Thanks

Jon Reynolds
www.jcrdevelopments.com

 
calleh

Joined: 2011-03-28
Posts: 90
Posted: Thu, 2011-06-09 18:01

The videos are embedded using the html5 video tag. So your video must be in a format that is supported by your browser, than it works.

 
Badd

Joined: 2011-06-02
Posts: 8
Posted: Fri, 2011-06-10 18:11

@calleh @sunite
i was looking around on the web too improve this issue with too many manga's on page (i know it can be very slow)

And i think iv found a solution:

http://net.tutsplus.com/tutorials/javascript-ajax/create-a-twitter-like-load-more-widget/

Its a load more widget that helps you load more when clicked. I haven't got round to reading it fully, but i think its possible to use it in iMobile.
So calleh, would you be able to have a look at this and the demo too in the website and maybe test it...

Thanks

 
calleh

Joined: 2011-03-28
Posts: 90
Posted: Sat, 2011-06-11 20:35

This sounds like a good idea. I will have a look into this. But don't expect this to be done in the next few days....