Click here for information about NEW Imagevue X3

Mobile Gallery

Imagevue Mobile Gallery setup guide

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 ThemeMobile 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

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

mobile social media

* 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.


BloggerBlueE-mailFacebookFlickrFoursquareGoogleGreenHeartLight BlueLinkedinPaypalPicasaPosterousRSSSkypeStarTumblrTwitterVimeoWhiteWordpressYellowYoutube

* 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.

Platform selector

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 ThumbnailsScreenshot 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.

Using Video in Imagevue

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:


67 Responses to "Mobile Gallery Setup Guide"

  1. Khary Walker Posted 4 years ago

    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.

    • Philippe CAP Posted 4 years ago

      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?

  2. 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.

  3. Frederic GUEHO Posted 4 years ago

    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; }

  4. 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?

  5. 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!

  6. 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!

  7. Is possible to hide the imagevue logo under the footer of mobile gallery? How? (I’ve yet authorized gallery) . Thanks, M.

  8. 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

  9. 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!

  10. 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 …

  11. 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?

  12. 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

  13. 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.

  14. Hello,
    can you add option set wallpapers?

    Regards.

    • You cannot set wallpaper directly from the browser … You would have to download the image first, and set it from the OS.

  15. Hello,
    how do I remove the word “content” and the large amount of blank space under it?
    This only shows up on my start page on my mobile site
    Thanks
    James

    • Mine does not look like that at all!

      I suggest you to:
      – go to admin
      – click on “Manage” from top toolbar
      – click on the /start/ folder
      – Uncheck “Mobile” on lower left side of page.

      – Find the root of your gallery in the Manage page (http://____/iv-admin/index.php?path=)
      – On the LEFT hand side, you see the “Title”, “Description” etc.
      – Rename it back to default – mine is “Home”.

      I can only suggest you have entered a name or title in this field in the root of your Mobile gallery.

      Go to the settings and check where Mobile clients are redirected to upon visiting (Settings > General).

      I believe this is your problem.

  16. Hi,

    how to save image from mobile gallery for iphone and android phones?
    I try with my iPhone and doesn’t work, touch and hold, “Save Image” Disabled?

  17. Hi,

    I try to save image from mobile gallery with iPhone and Android phone doesn’t work.
    Is touch and hold, “Save Image” Disabled?
    Or how to save image from mobile gallery with iPhone or Android phone.

    Thank you

    • This does not work because of the swiping interface integrated. Because of limitations when enabling this with javascript, you can’t have both. The only way to get the download function for iphone, would be to change the “photoswipe” option to “image list” option (vertically scroll through images), under mobile settings.

  18. Hi,

    thank you for your answer. It is so bad, it is a way to put some overlay with button for download?

    • maybe, but at this point, we are not expanding on this 3rd party concept called Photoswipe. In next version Imagevue X3, which is where we are putting our time, you will be able to download the image … We might continue to use Photoswipe as an option for X3 also, but if so I will look into customizing it.

  19. karimpour z Posted 3 years ago

    How i can change the order of the galleries on mobile version? now i see on the top of the page the oldest album, i need to see on the top of the page the newest.

    thanks

    • As answered by email, the order of the images in the mobile version should be the same as you have set it in the admin. What is the link to your gallery?

  20. Hey mjau-mjau!
    I like your mobile gallery, but i have one question. How can i set the background color on the mobile view (for some textpages) from white to a custom color?

    thanks!

    • Unfortunately, there is no way to set different themes or background on a page-per-page basis in the mobile gallery …

      • Okay. Is there any possibility to change the background color for all textpages on the mobile view?

        • The mobile optional version is based on a mobile theme, and there are no general settings except the for theme itself, which you can change in mobile settings. If you want to change background of text pages in mobile, the only thing you could do, is hack the CSS classes. You would need to use chrome inspector to find the class names, and then write some specific CSS for those classes and add to the mobile CSS.

  21. Hi there,

    I am just wondering, is it possible to redirect the mobile site to another website? I have a duplicate website, with similar content, but a more mobile friendly interface, and wish to have that as the mobile landing page. But I love imagevue for my default desktop page, so wish to keep that.

    Is this possible?

    Thanks!

  22. Is it possible to change the color of the background and the text of the mobile site? I would like for my mobile site to match the color scheme I have for my main site. Thanks.

  23. Justin Valle Posted 2 years ago

    Every time I log in with my mobile, it prompts me with this “Authentication Required. The server frp://justinvalle.com:21 requires a username and password”

  24. Justin Valle Posted 2 years ago

    When I try to open my site via my mobile, I keep getting this, please help:

    “Authentication Required. The server ftp://justinvalle.com:21 requires a username and password.”

  25. Hi, is the ability to Classic View pages on mobile phones and tablets? No mobile version.

    • Unfortunately no, because the mobile version is made specifically to allow Imagevue X2 to work on mobile, as SWF doesn’t. With forthcoming version Imagevue X3, everything changes, and it is technically the same html5 version running from all devices, but with responsive layouts …

  26. Hi Karl – is there a way to regulate the speed of a slideshow in the mobile module please?
    Jem


Comments are closed in preparation for new website. Use the forum or contact page.