MySimS3k®
-
Posts
0 -
Joined
-
Last visited
Reputation Activity
-
MySimS3k® reacted to Andy Millne for a blog entry, What's New in Gallery?
Humans are visual beings. Images attract our attention, can communicate ideas faster than the written word and can trigger meaningful discussions. At Invision Community we recognised this very early in the company history and have included a Gallery application for many years. During this time online communities have evolved substantially so we thought it was time to re-assess what it means to offer a community gallery and have some exciting developments to share.
Visual Refresh
The first thing we wanted to do was to give the look & feel a modern overhaul. @Ehren has done a fantastic job with modern design ideas. We took inspiration from the recent overhaul of the Events app and included a brand new Gallery overview page. This view better highlights featured and new images but also brings recent image comments in to focus to promote discussion.
Better Video Support
Video support has been included in Invision Community for a while but browser support has varied wildly. This often led to a poor experience where viewers were prompted to download plugins or forced to download the video in its entirety. Browser support for MP4 playback has moved on however and we have been able to update Gallery with some new functionality.
Frames from the video can be extracted for the preview thumbnail automatically. We have retained the option to upload a separate preview image however for people that want manual control over the image shown. Skipping ahead in videos is now also supported without the need to download the entire file or use plugins.
For communities that are able to leverage our cloud platform non MP4 videos will be automatically converted to support these features.
Searchable Image Contents
Another benefit for Cloud Communities is images can now be optionally analysed to make their contents searchable. For example, if an image of a tree or woodland scene is uploaded, this would previously only be searchable if the title or description of the image contained specific words or phrases. Now images can be identified solely by their visual contents.
NSFW (Not Safe For Work)
Invision Community contains tools to automatically moderate sensitive images to prevent them being posted. Some communities with more mature audiences may wish to allow these to be posted however but with some protection. We have therefore added the ability for images to be optionally set as NSFW when uploading. This will cause images to be blurred until the viewer opts in to viewing them.
Performance & Usability
Images by their nature can be slow to load (particularly on mobile connections) so we took some time and removed lots of redundant javascript and CSS. Where appropriate we have also added support for prefetching the next and previous images in an album or category and lazy loading is handled by the browser natively. We combined this with an improved image navigation experience using an image carousel when viewing individual images and removed the confusing Lightbox overlay. The Lightbox is now used solely for full screen image previews without the visual clutter of comment counts and other meta data.
These changes are the start of further Gallery improvements to come and as always we will continue to develop based on your feedback.
Let us know what you think in the comments.
-
MySimS3k® reacted to Rikki for a blog entry, Theme Tip: Using custom template bits
We frequently encourage people to use custom CSS files when designing their themes. The reason for this is simple: it makes upgrading your site much easier because IPS4 can apply any changes to its own CSS files, and will leave your custom CSS files untouched. If instead you made edits to IPS4's CSS directly, it wouldn't be able to upgrade them automatically, which means more work for you, and a potentially broken UI on each upgrade.
Something that's not quite as common, but that we still strongly suggest, is using custom template bits as much as possible. The most common template you'd edit is globalTemplate, perhaps to include some extra resources in the <head>, a custom header, and maybe some footer pieces. The usual approach would be to simply add all of that custom HTML directly into globalTemplate, but my recommendation is that you instead create each piece as a custom template bit, and then include it.
With templates, it's not quite as much of a clear-cut benefit as with CSS; you'll still need to modify the original template in order to include your custom pieces of course. But there's still good reasons for doing so; it keeps your template as clean as possible, meaning if in a later upgrade you have to revert it to get the latest changes, reapplying your custom pieces is easy - you just add the template includes back in.
We've been taking this approach with all custom themes we've created since IPS4's release (dozens by my last count). We try and keep the naming convention consistent too. All custom templates are named _customABC.phtml and exist in the /front/global/ group in the core application. This puts them in an easy-to-find location, and because of the underscore prefix, they're shown at the top of the directory.
Example custom template bits in a custom theme
Using them is simple:
{template="_customHeader" group="global" app="core"}
I hope this approach helps you keep your templates clean and more manageable! If you have any tips for working with your templates, please share them in the comments!
