Mobile Gallery Setup Guide
Imagevue X2 mobile is a beautiful version of the Imagevue gallery specifically designed for mobile- and touchscreen devices. The mobile version will automatically display for all touchscreen devices like iPhone, iPad, Android, Blueberry and Windows Mobile. With the Imagevue mobile version, Imagevue displays gracefully across all devices and platforms including smartphones, tablets and desktop computers!
To preview the mobile gallery, simply access the demo from a mobile device:
Mobile Light Theme›Mobile Dark Theme›
* You can check the links above from desktop also, since they are forcing a redirect to the mobile version. However, please reset demo gallery afterwards. You can also preview your own Imagevue mobile gallery from a desktop computer by appending ?mobile=1 behind the URL.
How to set up the Mobile gallery
By default, your mobile gallery “just works”. This means that anyone accessing your gallery from a mobile device, will automatically be viewing your gallery from the mobile interface. However, you may wish to make a few changes to your mobile gallery. Go to Admin › Settings › Mobile
Changing the mobile header graphics
* Global header at top and startpage header below
By default, the mobile gallery includes a default global header and startpage header. They are basically two images that combine nicely on the startpage, while on other pages only the global header displays. You can use a similar concept, or you can just leave the startpage header empty and use only the global header. You can also use plain html in any of these fields if you need custom content.
- Create the image(s)
Since the graphics adapt to display on a multitude of devices with various dimensions, we recommend using relatively large graphics that also look good on large devices like iPad. We recommend 1024 x 200 px, although if you are ambitious and want to cover iPad3 retina pixel-doubling, you may even consider 2048 x 400 px. - Upload
We recommend uploading the graphics with FTP to your gallery iv-config/ folder. This way, your custom graphics will stay intact even after upgrades - Edit Settings
After uploading the graphics, you will need to change your mobile settings. Go to admin › settings › mobile, and change the settings appropriately. For example:
Global header<img src="iv-config/global-mobile-header.jpg"/>Startpage header
<img src="iv-config/startpage-mobile-header.jpg"/>* If you are only using the global header, you can leave the startpage header field blank.
Adding social media icons in the footer
* Social media links in the footer
If you have one or more social feeds, you can optionally add them as icons in the footer instead of having them in the menu. To add social icons to the mobile footer, you will need to add some html code. Go to admin › settings › Mobile › Footer Toolbar ›
<a href="https://www.facebook.com/imagevue" target="_blank">
<img src="iv-includes/images/icons/facebook-128.png" alt="Facebook" width="64" height="64" />
</a>
<a href="https://twitter.com/imagevue" target="_blank">
<img src="iv-includes/images/icons/twitter-128.png" alt="Twitter" width="64" height="64" />
</a>
<a href="?/contact/">
<img src="iv-includes/images/icons/email-128.png" alt="E-mail" width="64" height="64" />
</a>Then, go to settings › Custom CSS › Mobile Gallery CSS › and add:
.footer img {margin:0 5px;}In the code above, we have included Facebook, Twitter, and E-mail, but you can add several others. Remember to change the href attribute to point to your own urls, and remember to set target=”_blank” for external links (not for internal links like the e-mail link). The mobile social media icons are available from version X2.8.2, and support retina screens.
* If the icon/service you want to use is not available above, you will simply need to upload your own icon.
Other Considerations
Compatibility & Mobile Selector
Some features available from the standard gallery, may not be available for the mobile gallery or may not display as you desire. For example filemods do not work on mobile, and the mobile does not support FLV video. To remedy this, you have the option to disable certain gallery folders from displaying in the mobile version. Navigate to a specific folder in your admin, and you will find a platform selector at the bottom left. Un-check the mobile version and click save if you want to hide the specific folder from displaying in your mobile gallery.
Folder View Mode
By default, Imagevue Mobile displays a page with image thumbnails when you enter a gallery folder. You have the option to change the folder view mode to instead display full size images in a vertical layout. Go to settings → Mobile → Folder View Mode.
Screenshot Thumbnails›Screenshot Images›
Toolbar Title
By default, the mobile toolbar displays the title of the current folder. You can change the toolbar title under mobile settings, but then it will remain static throughout the mobile gallery.
Thumbnail Columns
By default, the mobile gallery displays 3 columns of thumbnails. However, on large-screen devices like iPad, this amount is doubled simply because it looks much better. You can change the amount of thumbnail columns from the mobile settings, but keep in mind it will always be doubled on large-screen devices.
Mobile Video / MP4
Imagevue Mobile supports display of video on mobile platforms, but normally only with the mp4 format. We therefore recommend using the mp4 video format, which works from both flash and mobile, instead of the FLV format which is limited to flash-only. Keep in mind, not all mobile platforms can deal with video at all, and this is simply out of our hands.
Photo swiping
The mobile gallery uses a nice swipe interface when viewing images, so that it is simple to navigate between images on a touchscreen. This is a complicated javascript interface, which in its current iteration prevents certain expected functionality like double-tap context menu.
Footer and Authorization
Unless you have authorized your Imagevue gallery, you will not be able to edit the footer in mobile settings. This we have implemented on purpose as a limitation.
Screenshots
The following screenshots are taken from Imagevue Mobile gallery on iPhone and iPad:
if i upgrade to commercial ver will be able to edit the footer on my mobile view?
You should be able to do that without upgrading to commercial version. You just need to make sure that the gallery is authorized first.
Very nice,
how to “center” the footer toolbar with all the logos?
icons are already centered in the bottom toolbar. Are you adding manually to the “bottom” of page instead?
I’m having a little bit of a trouble with ONE folder on my Gallery.
At http://www.marcoillescas.com using FLASH version if you visit the first folder 00_showcase (24 images inside) you’ll see all the thumbnails and images, but in the mobile gallery (I’m testing it on my iPad and iPhone) you’ll see that the same gallery shows the right counter of 24 but when selected the gallery only shows two images. I’ve already recreated the thumbnails from admin. No permisions problem detected.
I have an update: most of my showcase folder images had a URL link to my flickr account, I’ve just discovered that those are the images that won’t show on the mobile gallery. Taking out the link bring those images back to the mobile gallery
We do not display thumbnails with links in mobile gallery. What we could do is to just ignore the link option on mobile, so visitors could browse the gallery anyway.
Yeah! I think ignoring the link is the best option; so in that way the integration with the Flash Gallery on link management won’t be an issue.
I’d like to desactivate the top menu in the mobile version because I don’t use any folder, everything is in a root folder. My path is “/”.
I have done it with the flash version.
Is it possible for the mobile version ?
If not, could you do it in a future upgrade ?
Thanks :)
While there is no such option you can do it relatively easy. Just paste the following code into Settings > Custom CSS > Mobile Gallery CSS as shown: http://d.pr/i/FLF5
.iv-header .t { padding-left: 15px !important; background: none !important; }
.iv-header .t:active { color: inherit !important }
.menu { display: none !important; }
I can’t help but wonder if there is plans or a way to get the shopping cart link to show up in the mobile gallery?
Do you mean Fotomoto? Or a custom cart link you have perhaps?
Custom cart link, sorry I wasn’t specific. It shows up in the flash and html gallery. It is the field labeled “purchase” when you manage an image.
Actually no it doesn’t show up in the html gallery either -.- but I would like it to.
I believe we have this covered in the forum:
http://imagevuex.com/forum/viewtopic.php?f=30&t=7636&start=0
Hey mjau-mjau!
Its great you made mobile version, thx for that!
I have one idea for next update maybe…
I use large photos on my galleries (means 2Mpix, usually <0,5MB), on my mobile devices works everything fine, but in my case I must wait until original photo is downloaded into my phone and it gets some time (few seconds).
Idea: I can tell, this is unnecessary, cause my phone has resolution 800×480, tablet 1024×800.
Solution: Could be possible, that Mobile Gallery will download specially created thumbnails (etc. 1Mpix, depends on needs) and listing on mobile devices will be much faster?
What do you mean about this idea?
Hi Marty. This is an interesting suggestion. First of all, may I ask exactly what dimension you have on your main images? 2Mpix sounds like 1600×1200 perhaps … This is quite big, and for perhaps 90% of your visitors, images are scaled in real-time below 1200 px anyway …
Also, about new mobile devices hitting the market: iPad3 with 2048px screen, new retina- and other super-high-density screens … I believe these new mobile devices already have an appetite images of relatively high resolution. If you want top quality for mobile, then its probably best to load the picture in at abundant resolution. Personally, I don’t see a reason why mobile should be loading smaller images in general.
Another problem however, is that most shared servers are not capable of resizing images larger than ~1400px because of shared memory limitations. It is definitely an interesting suggestion though, as in a perfect world one would load images at maximum device resolution. We will keep it in our notes!
Updated my gallery
http://www.egenolf.at
but not having an Ipad or some of that new technic stuff ;-)
so can someone please take a quick look and tell me if its working as it should?
(I checked by a web based Ipad simulator and the result I got was….horrible!)
THANKS!
Don’t worry it is fine.
Is possible to hide the imagevue logo under the footer of mobile gallery? How? (I’ve yet authorized gallery) . Thanks, M.
Fixed :) Thanks anyway
Hi all,
I set up the mobile gallery but some thumbnails do not show up. They do in the flash version, but not in the mobile version. What could be the reason for this?
I have recreated all thumbnails already with no success
Thanks
Do you have a link to your gallery?
Hi
http://www.imagebox.ch
Thanks,
yves
Looks ok to me: http://d.pr/i/ntVp
Thanks Nick
Do all pics show up in the Still Lifes sub-directory? This is how this sub-directory looks on my iphone 4: http://d.pr/i/bOdE
Thanks!
No, because you have a non-latin characted in the filename: http://d.pr/i/gxcf
Thanks Nick!
I changed all file names to latin characters and this works perfectly now!
But I have another question. On my iphone 4, the global header picture shows up perfectly (see your printscreen above). Nevertheless, on my iphone 3, this is not the case: http://d.pr/i/FC9b
Do you know why?
Thanks
Yves
It might be related to the fact that the image is almost 4mb png file. I would try to save it as jpg first.
I replaced the 3.6 MB png by a 600 KB jpg and I changed the file name in the mobile settings. Still the same problem.
Thanks
It would help with a link … If the image is displaying like that, there will be a logical explanation why the mobile browser can’t load it …
Hi Mjau-Mjau
The link is imagebox.ch
On my iPhone 3GS, the global header pic shows up in Opera Mini but not in Safari.
The logical explanation is what I am looking for. :)
Thanks
Yves
Sorry for delay, all I could find is iPhone 3G with iOS 4.2.1 and it works: http://d.pr/i/ybnj
There shouldn’t be anything making it unprocessable on iPhone 3GS, especially considering that 3GS runs iOS5 or 6 ? Have you tried on any other phones?
I found a friend who has a iPhone 3G. Same problem, picture does not show up.
What can we do?
Thanks,
Yves
So is it iPhone 3G or 3GS? What version of iOS?
I checked, both are iPhone 3GS, Model No. A1303, with iOS 6.0.1 (10A523)
I have no access to an iPhone 3G.
In the meantime, I found the same iPhone 3GS (A1303) but with an old OS 5.1.1. and the mobile gallery main pic shows up. The problem seems to be 3GS on a new OS.
What can we do?
Best regards,
Yves
Sorry, it’s in our list, we will figure out something soon. Our only owner of iPhone 3GS is on a short trip and is getting back tomorrow.
Sorry, finally got around to checking this on an iPhone 3GS. Looks correct to me, as it should be … See snapshots:
http://d.pr/i/TdBv
http://d.pr/i/RJgE
Many thanks for this Mjau-Mjau
Which iOs version do you have?
Regards,
yVes
Although not in front of me right now, I believe this device may be some 5.* version. I would be very surprised if it dont happen to work on 6.* version … The OS is the same that runs on all other iPhones, new ones, and this has not been reported by anyone else. Are you sure you dont have some strange cache issues? I am pretty sure latest update of iOS don’t break web page only on the 3GS device …
hi there,
i upgraded my iphone 3gs from ios 6.0.1 to 6.1, still same issue. I have two other friend with a 3gs and 6.0.1 with the same problem on imagebox.ch.
don’t know what else to do.
thanks
yves
Could you please move the discussion to forums? I bet there are more people with iPhone 3GS. We will ask them to check.