Search…

X3 Photo Gallery Support Forums

Search…
  • 1
  • 2
  • 3
  • 4
  • 5
  • 15
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13993
Joined: 30 Sep 2006, 03:37

Imagevue X3 [playground]

13 Feb 2014, 07:07

Finally I have been able to push a very early (and premature) playground website running on the new Imagevue X3 framework. I am currently calling it the Imagevue X3 "playground", because it is too premature to be called beta and also because this specific design/layout in the playground was meant to function as a clean canvas when progressing with the core- and various gallery modules and concepts. Ultimately, this website is also intended to be a new personal information/blog website, showcasing concepts- and covering progress with Imagevue X3 from a developers perspective.

So before anyone jumps the gun "hey this just looks like a normal website", or start wondering what happened to the layout they have come to expect from earlier versions, please have patience. Although Imagevue X3 will be a very different beast from X2, we will be working on additional skins* and layouts* later, some more similar in style to X2 (in several ways).

I feel it is crucial that you make the long read below, which mainly point out the features in Imagevue X3 that move it ahead of earlier versions. Also, please bear in mind that there are loads of bugs, and this point I won't even ask you to report them (although I won't stop you either). You may wish to check from multiple devices, because one of X3's main blessings, are the treats it provides on different screen sizes and pixel-densities. If you want to comfortably see what it looks like on different devices directly from your desktop, you should install this viewport resizer (chrome extension).

mjau-mjau.com

X3 Read Me
The below is mainly taken from this post.

It's been more than a decade since mjau-mjau.com was first introduced, and a lot has happened since then. The latest reincarnation is built upon the new Imagevue X3 platform, and will focus on related contemprary web technologies.

Unified Design
Instead of having different versions of a website across different devices, Imagevue has a single unified layout which is optimized to flow nicely on all screen sizes. Not only does this address multiple device screen sizes, but also pixel-density, orientation and interaction. Layout modules include responsive abilities to best suit the size-, density- and interaction method of the device they are displaying on.

Semantics, SEO and Social
New Imagevue is built from the ground up to take advantage of HTML5 semantical tags, which to some degree help browsers and search engines understand the content of a website. Also built for optimal SEO performance, essential structure- and page meta tags are included by default. Furthermore, necessary social tags- and metadata are included, so that sharing pages on any social platform is flawless. Just link up your Google-, Facebook- and/or Twitter accounts for additional synchonrization between social pages/accounts/authors and the website.

Smart Pages
Imagevue X3 comes with smart page features that make it more flexible, yet less complicated. Unlike before, you do not need to declare what kind of page you are creating. Instead, an Imagevue page can include context, folders (albums), gallery (images) and comments, depending on what is defined in the folder. Furthermore, you can apply "tags" to the page to define certain layouts and styles, and to filter out certain elements.

Flexible Modules
An Imagevue page consists of 4 modules with subtypes: context, folders, gallery and comments. These modules are all automatically included into a page if they exist in the folder. You can easily visualize any module exclusively, or combine them together to create flexible page layouts. Furthermore, you can apply tags to define the layout- and style of each module, and also set sorting order of the modules on the page.

Folder/Albums Module
As a new feature of Imagevue X3, we added gallery folders view mode. This means you can view all folders (albums) on a page as preview images with (or without) titles and descriptions. This is a practical way to display gallery folders, because this structure does not always work well in menus. Furthermore, we can use the same method to maintain basic "blog" layouts, if you want to maintain a simple blog.

Disqus Comments Module
With Imagevue X3, we have given a lot of attention to integration of the Disqus comments plugin. Disqus is a wonderful comments service, which swiftly is being embraced by the industry, and not without reason. Disqus provides a beautiful comments module that integrates nicely into any Imagevue page, and works nicely across all devices. Furthermore, Disqus offers integration with social services, SEO support, strong anti-spam features and super management. Add comments to any page types including galleries!

Smart Page Settings
An Imagevue page layout is based on a blend of modern CSS3, Javascript- and server-side HTML5 structure. Instead of having zillions of bloated settings to define styles-, layouts- and elements for each page, X3 comes with a tag system where you can simply apply a variety of tags to a module to achieve the desired visual result. A few tags by example: x-shuffle (js) will shuffle images in a gallery, x-wide (php+css) will set the module layout to expand 100% width of the viewport, x-slideshow (js+css) will create a slideshow of images in a gallery, x-columns-3 (css) will create a responsive 3-grid columns gallery layout, x-hover-3d (css) applies a specific mouse hover effect, x-caption-below adds captions below the images, x-image-navi (css+js) adds controls to navigate vertical scroll ++ much more!

Define Assets (Smart Folder)
You can even set a folder to load assets (images) from a separate folder. How can this be used? For example, you may have created a gallery page with a new set of images, and maybe you want to create a blog post and introduce the new images in a small inline slideshow? Maybe you want to load images from a specific folder into your home page as a slideshow like we are doing in this page? Can.

Markdown Content Authoring
Markdown is a popular tool for writing rich text content for websites without having to deal with tedious html. Not only is the write-up easy, clean- and fast to author, but it is more secure and forgiving than writing html. You can still use basic html tags, but we will recommend using basic markdown. I will cover this more in depth later on, but in the meantime you can check these links to find out more:
http://markdown.pioul.fr/ (real-time example)
http://brettterpstra.com/2011/08/31/why ... planation/

Smart Module Layouts
How wide is a website? One of the main challenges for a responsive website, is defining width of content. Not only does the width need to respond to all screen sizes, but text width should also be limited so that it remains at readable length, while allowing wider layouts for image modules. Imagevue X3 has a modular layout which allows different widths on different modules without affecting the main layout. There are several examples in the concepts section that demonstrate layout variations including wide, narrow and multiple columns. You can define layout variations on a per-module basis, or set up a custom layout (advanced stuff to be explained later).

Gallery Features
Being the foundation of an image gallery- and portfolio website, Imagevue X3 comes with an abundance of gallery features. To mention a few that may not be obvious:

Image Resizer
Because of the flexibility required when offering a variety of gallery layouts with different image sizes spanning across multiple devices, it is no longer sufficient to have a single thumbnail variation of an image. Imagevue X3 comes with an advanced image resizer, that is able to create image sizes based on what the layout- and device requires for a specific page. Requested images are resized on-the-fly, and thereafter stored in a cache folder for quick consecutive access. As demonstrated in the concepts section, there are dozens of layouts which each require different image sizes across different devices. Here are a few image resize examples just to demonstrate the capabilities: original, 1280, 800, small, square cropped.

Image Manager (JS)
In a world of flexible layouts and responsive designs displaying on a variety of devices, screen sizes and pixel-densities, how does the website know what image sizes to load for a specific layout? Imagevue X3 includes a super-cool javascript image-manager that automatically calculates the size of each image to be loaded based on the dimensions that are made available for it. This means that regardless of layout, and regardless of device and pixel-ratio, Imagevue will automatically figure out the best image size to load. Furthermore, the Image manager will also figure out the best image size for images to be loaded in the new popup slideshow. Not only does this benefit layout variations, but it also allows you to offer stunning large images for large/retina screens, while offering smaller sizes for smaller devices/screens. Beautiful!

Gallery Layouts
Imagevue includes a variety of cool gallery layout types, many demonstrated in the concepts section. All the different layout types are fully responsive, and include modern features like swipe, scroll-navi and fullscreen. We aim to offer only the best gallery UI ideas and integrations in existence. Check out the various categories vertical, slideshow and grid with many more to come!

Popup Module
We have included a beautifully crafted image popup module, which displays images in their full glory. The Imagevue popup module is available alongside most gallery layouts, except the slideshow which has its own fullscreen method. The popup module looks great on all devices, supports swipe interaction, fullscreen-mode, preloading and smooth transitions.

Lazy loading (JS)
Many gallery pages include dozens (or even hundreds) of images, which all contribute to increasing the load size of a page dramatically. To ease the initial load of a page, images are only loaded once they appear inside the visible viewport of the visitors browser. Although all images may need to get loaded eventually if they are to be viewed, it allows pages to load and initialize much faster, and images are only loaded on-demand.

Retina-Friendly
Retina, the word invented by Apple referring to devices with a very high pixel denisty, and usually a very sharp screen. These screens are becoming more and more common, not only on smartphones and tablets, but lately also on new laptops (like the macbook pro retina). The screens are capable of displaying high-resolution graphics, and Imagevue is as retina-friendly as a website can get, supported by css3, icon-fonts and a retina-ready image manager.

Performance
New Imagevue X3 uses various modern techniques to dramatically speed up delivery- and display of the website and it's contents. This results in a speedy interface, which responds swiftly to internal navigation. Imagevue only loads

Ajax and HTML5 pushstate
Imagevue loads all pages through AJAX in JSON format without having to re-load the entire page. Not only does this speed up the loading process by loading only data that changes, but also browser rendering as the browser does not need to re-render the entire page with styles and javascripts. We thereafter use the HTML5 pushstate feature to manipulate the browser URL field so it mimics normal page behavior and creates a state of history. An Imagevue page load may in fact only be 1-4 kb (excluding assets), like this index page in json format.

Minification
For modern websites, it is often required to include a large amount of javascript- and CSS assets, and Imagevue is no exception. The problem is that not only will all these assets take time to load, but they will queue up as requests, slowing down both the browser and the server. Imagevue consolidates- and minfies asset files, so that the browser only needs to request a few files.

Gzip
All data that is loaded through Imagevue is compressed with Gzip, which dramatically reduces file size of loaded data like pages and assets. By example, our current superloaded CSS file at 342kb is compressed down to 41kb, which is a whopping 90% compression rate! Very acceptable.

Server Caching
Before we can swiftly apply all the above, it necessary for the web server to output all data, which often includes complicated server processes that can make the loading sluggish. Imagevue caches all data- and page requests on the server, so that output is blazing fast. The server will only re-process requests if something changed on a specific page.

HTML5 localStorage
To add further speed leverage, Imagevue caches page requests in the browsers HTML5 localStorage. This is faster- and more failproof than normal "browser cache", and will speed up the browsing experience significantly. The browsers localStorage is only refreshed if a change is made in the website, which is identified in a meta tag.

Other Features
The new Imagevue X3 framework comes with too many new features to mention, but here are a few:

Menu System
Depending on what screen size you are viewing this page from, you might be seeing either the horizontal menu or the mobile-friendly off-canvas vertical menu. If you are on a large screen, you can try down-sizing the browser to view the vertical menu. The vertical menu can also be used globally on all screens, as it is more suitable for substantial folder structures. The horizontal menu is elegant for simple navigation structures.

Audioplayer
Imagevue includes an experimental audioplayer, currently only available on non-mobile devices for certain reasons. The audioplayer loads files from an audio folder (just like earlier versions of Imagevue), and can also read ID3 data. The audioplayer itself is html5-, Javascript- and css3 based, and loads all itss data in json format. Once tracks are loaded once, they are stored in the browser's html5 localstorage for rapid load on consecutive visits.

Contact Form
Getting down to detail, Imagevue X3 includes a flexible and advanced contact form. The contact form comes with live validation, e-mail suggestions, elastic input and anti-spam measures. Check the contact page!

Much more to be mentioned soon ...

Repeat the playground link:
mjau-mjau.com
 
User avatar
andreamarucci
Experienced
Posts: 308
Joined: 01 Mar 2011, 11:13

Re: Imagevue X3 [playground]

13 Feb 2014, 07:46

At first sight I love it. It's much more modern than X2 e more customizable. Everyone can choose his preferred layout and use it. i noticed that you've used big image that are very good. This can be a problem for galleries, like mine, where the images are 800x600?
 
illunis
Experienced
Posts: 84
Joined: 14 May 2012, 07:24

Re: Imagevue X3 [playground]

13 Feb 2014, 07:50

Thumbs Up :!:

As far as i understand, since i come from X2, galleries will be folders as in the blog demo.
What i would like to see is a demo gallery with pictures inside to get a feel of how they look like and play around with different styles.

more to come as i "play" :)
 
tschortsch
Experienced
Posts: 150
Joined: 01 Apr 2010, 17:23

Re: Imagevue X3 [playground]

13 Feb 2014, 08:51

Wow, this is stunning! I really love X3, while playing around I had certain ideas how cool all my photos would look like with X3.
 
Andre Boss
Posts: 11
Joined: 10 Oct 2012, 07:49

Re: Imagevue X3 [playground]

13 Feb 2014, 10:01

First impression is great! I was hoping that looks a kind like that.

I am looking forward to:
- the gallery, how the photos look in the new design, responsive etc.
- the back-end

so far so good :)
 
User avatar
nz-photo
Experienced
Posts: 248
Joined: 06 Dec 2007, 17:26

Re: Imagevue X3 [playground]

13 Feb 2014, 13:13

Wow Karl !! I must say this looks impressive, so rich, so gorgeous...
Will take some more time to get deeper into the various points you mentionned,
but def. excited to try it live with a total renovation process of my gallery.
So thanks already for your awesome job :D
Empty your mind, be formless, be shapeless, like water...
www.nz-photo.com
 
alderim
Experienced
Posts: 75
Joined: 27 Jun 2007, 05:49

Re: Imagevue X3 [playground]

13 Feb 2014, 20:23

To keep it short:

1) i love it. take all my money!

2) i have to visit burning man.

3) thx!
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Imagevue X3 [playground]

14 Feb 2014, 01:48

andreamarucci wrote:At first sight I love it. It's much more modern than X2 e more customizable. Everyone can choose his preferred layout and use it. i noticed that you've used big image that are very good. This can be a problem for galleries, like mine, where the images are 800x600?
A good question, which demands two answers:

# Technically it is not a problem, although you are limiting your gallery slightly. If you add a layout that requires larger images, Imagevue will just load the biggest image it can find, which in your case is 800x600. All the grid layouts use smaller images than 800x600 (or that size), and if you imagine clicking an image, the popup will simply load the 800x600 image and display it center of screen. If you use a slideshow layout like this, the 800x600 images will simply display in center of screen without scaling up. You can also use narrow vertical layouts like this.

# However, I am implored to ask the question. For what reason do you need to limit your images to 800x600? In a brave new world of ultra-high resolution devices (retina) and other large screens, you are simply limiting the visual appeal of your images. I am on a relatively small 13" macbook retina, but with a screen resolution of 2560 x 1600 px. Your 800x600 will simply look inferior on such devices, not taking advantage of display quality. One of Imagevue X3's main focus points, is to allow images and photos stand out in quality across all screens- and devices.

Imagevue X3 is built to automatically handle image sizes based on demand of the layout- and device, outputting the best size possible. Consider this conversation between the Imagevue frontend and the Imagevue backend:

Scenario 1
imagevue_front: hey buddy, so I got a columns layout here, and need to load this image at 316 px for optimal fit on this device.
imagevue_back: ok pal no problem. I got the original here, and will resize it down and round up to 320 px. Here ...
imagevue_front: perfect, thanks!

Scenario 2
imagevue_front: Hey, Im on an iPhone and opening this image at full screen width 480 px in a popup window. Oh, its retina screen btw, so please make that a double!
imagevue_back: Sure thing. Requested image width 960 px, which I will round up to 1024 px to stay within our array of allowed sizes.
imagevue_front: Awesome!

Scenario 3. Depending on layout, a scenario for your 800x600 images might look like this:
imagevue_front: Opening this image in a popup window on small laptop. You got 1024 px for me?
imagevue_back: I got the original here, let's see ... Oh, the original is only 800 px :?, but you can have that then!
imagevue_front: Ok, no problem :wink:

Im gonna have to write more about this later, but the days are gone when you can simply have one uniform size and expect it to work well on all devices- and layout variations. Some older smartphones want to load a very small version, so why not give it what it wants, as to not obstruct bandwidth and performance? Some large modern retina screens want big attractive images ... why not make it look awesome?
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Imagevue X3 [playground]

14 Feb 2014, 02:35

illunis wrote:As far as i understand, since i come from X2, galleries will be folders as in the blog demo.
Exactly. All pages in Imagevue X3 are basically folders (just like X2), regardless if it is a page with text like this, or a gallery like this. The only difference between the two examples above, is that the 1st link includes a lot of text and no gallery, while the 2nd link includes a little text and a full gallery.
illunis wrote:What i would like to see is a demo gallery with pictures inside to get a feel of how they look like and play around with different styles.
Did you not check out all the gallery page examples in the concepts section? All the pages here are basically folders with images uploaded. Perhaps I should have called this section "gallery" to be more clear? As you can see, there are tons of variations for a gallery layouts, including slideshows, vertical layouts and grids.

For your convenience, I created 2 more examples, just to emphasize the gallery content:
http://mjau-mjau.com/concepts/more/clean-grid/ (remove header and footer)
http://mjau-mjau.com/concepts/more/just-images/ (remove header, footer and context)

Actually, they look quite nice without the menu. Galleries could be available like this, although it would require a side menu to be available touch/mouse-hover, or at least some way to navigate "back".
 
User avatar
Nondo
Posts: 23
Joined: 22 Mar 2007, 17:05

Re: Imagevue X3 [playground]

14 Feb 2014, 02:46

mjau-mjau wrote: For what reason do you need to limit your images to 800x600?
...
so why not give it what it wants, as to not obstruct bandwidth and performance? Some large modern retina screens want big attractive images ... why not make it look awesome?
I would guess it has something to do with theft. Some artists/photographers prefer to protect their work by only releasing limited sized images online. Flash galleries provided another layer of protection for those that wanted to share larger images but now with X3 that's no longer an option.
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Imagevue X3 [playground]

14 Feb 2014, 02:52

Andre Boss wrote:- the gallery, how the photos look in the new design, responsive etc.
Please refer to this reply above. Perhaps I have been vague in my examples and explanations? There are many gallery examples already available in the concepts section, and they are all responsive!
Andre Boss wrote:- the back-end
Also looking forward to this, although it has not yet received full attention. We hope to keep the new admin much cleaner- and leaner than previously.
Andre Boss wrote:so far so good :)
Thank you very much!
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Imagevue X3 [playground]

14 Feb 2014, 03:21

Nondo wrote:I would guess it has something to do with theft. Some artists/photographers prefer to protect their work by only releasing limited sized images online. Flash galleries provided another layer of protection for those that wanted to share larger images but now with X3 that's no longer an option.
Imagevue X3 will still work fine - It will just be limited to outputting images at maximum original image size. In slideshow- and popup, that means a smaller 800x600 image will simply be centered on screen, and it will not look awesome on new retina devices.

Unfortunately, flash is going nowhere. Not only does it not work on many new devices, but it is lagging behind in terms of features, seo, speed and performance compared to new html5 technologies, which work nicely across all devices and platforms.

Although a separate topic altogether, I see more and more photo professionals changing their attitude towards their public portfolio. People who steal your photos, are they basically people who would have paid for them? The web is super-loaded with free high-quality photo resources these days. If you really need to protect your images from clients, could you not use watermarking? Basically there are two ways to go for the modern web:
A) Big photos: Your audience will love it, and it will make you look good.
B) Small photos: not impressed.

Just my ten cents ... with Imagevue, our main focus is to make galleries look great, on all devices!
 
Andre Boss
Posts: 11
Joined: 10 Oct 2012, 07:49

Re: Imagevue X3 [playground]

14 Feb 2014, 04:24

mjau-mjau wrote
Please refer to this reply above. Perhaps I have been vague in my examples and explanations? There are many gallery examples already available in the concepts section, and they are all responsive!
Sorry for that, yesterday the "Concepts" page was not loading on my computer. today my network is fine and i can see all versions.
It looks fantastic! There are a lot of possibility's to work with, i think anybody will find a version they like. great job!
 
hardliner
Experienced
Posts: 134
Joined: 22 Jul 2011, 10:15

Re: Imagevue X3 [playground]

14 Feb 2014, 05:15

On the Comment Plugin is required to register or login wit another account.
Can you comment without login on my website?

Next Question is: Can i make various Gallerys Password Protected?

Best Regards
Hardliner
 
illunis
Experienced
Posts: 84
Joined: 14 May 2012, 07:24

Re: Imagevue X3 [playground]

14 Feb 2014, 07:28

hardliner wrote:
Next Question is: Can i make various Gallerys Password Protected?

Best Regards
Hardliner
Very important for me and i guess for other users as well !
  • 1
  • 2
  • 3
  • 4
  • 5
  • 15