Koper74

As showcased in our past blogs, Invision Community 5 introduces a brand new, modern interface which brings improvements to performance, aesthetics and mobile usability.
An optional side navigation panel, new view modes, light/dark modes, customizable header layouts, a search modal and a mobile navigation bar are some of the things we've showcased previously. Today, lets take a closer look at some other miscellaneous changes that we've been working on while developing Version 5, including some of the code reductions and performance improvements that we've been able to achieve in the process.
For those of you who are developers, we'll also give some simple explanations of how (and why) we've implemented these changes.
 
Widgets
Sidebar widgets are perfect for displaying content feeds, featured members, announcements, advertisements and more on your page. In version 4 however, the widget column would often become an empty space once the widgets had been scrolled past:
  widgets-v4.mp4  
In version 5, widgets now stick to the screen once the last widget has been reached, ensuring your readers have more convenient  access to your widgets rather than a void space:
  sticky-widgets-v5.mp4  
 
Messenger
The Messenger is a great way to reach out to members when a private chat is more appropriate than a topic. Inspired by modern email clients, the messenger in Version 5 has been revamped with a full-height, sticky inbox, a longer message snippet, mini profiles and a more polished UI - all with a 25% reduction in CSS and a 100% reduction in Javascript.
messenger-v5.mp4
 
Sticky elements
We've mentioned sticky elements a couple of times now, so lets take a look behind the scenes at how they're created, and some of the performance improvements with Version 5. Traditionally, sticky elements were created using Javascript which would calculate the position of the element on the page and adjust it's stickiness every time the page was scrolled. Scroll events can be quite taxing for browsers, and when it comes to Javascript, the less, the better (especially when aiming for great page speed scores)!
With that in mind, all sticky elements are now handled using sticky positioning via CSS, which is a native and much more performant way of controlling these elements. We've been able to replace an entire 400 line Javascript component with just 3 lines of CSS.
 
Grids and Masonry
Grids have previously been handled in a similar fashion. Javascript would scan all elements within a grid to determine how many could fit on a single line, and would then shuffle these elements into position after the page was loaded or resized. CSS has since introduced its own grid properties, which has allowed us to replace more than 350 lines of Javascript with just a few lines of CSS, resulting in more performant page rendering and nicer looking grids (especially on small-medium displays such as mobiles and tablets).
 

 
Fun fact: We first introduced a similar performance improvement to "masonry grids" in our Gallery update from January this year, by replacing more than 400 lines of Javascript with, you guessed it, just a few lines of CSS.
 

 
 
 
Click targets
We wanted to make Version 5 as simple as possible to navigate, and one way of doing that has been by implementing larger click targets. Clicking anywhere inside an entry in a table or grid will now take you to that entry (you can still click on other links like normal within the click target, such as subforums or profile links). Click targets are optional and can be disabled via your theme settings if necessary.
 
click-targets.mp4
 
Data Lists (tables)
Speaking of tables, they too have been revamped. Tables automatically adapt to the space they've been assigned to (for those curious, this is done using CSS container-queries), so they're always neat regardless of the screen size, with no overflow or squashed layouts. Behind the scenes, the two columns below are created with identical code, yet they're quite different visually due to the size which they've been allocated. Even with these improvements, tables have received a 25% reduction in CSS.
 

 
Profiles
Profiles have been polished for Version 5 and include some nice improvements such as sticky widgets and tabs. 
profile-desktop.mp4
 
On mobiles, the side column collapses into a carousel, and the sticky tabs allow you to easily flick between content types without scrolling to the top of the page.
profile-mobile.mp4
 

Tabs
You may have noticed in the above clip that tabs on mobiles are now scrollable, compared to a dropdown menu from version 4. We made this change to ensure that tabs are given more equal exposure on small devices, and have managed to reduce the CSS by a whopping 80%.
 
Carousels
Last and certainly not least, are carousels. Carousels are great for displaying large amounts of data in a confined space and they've been rewritten from scratch for version 5. Previously, a Javascript library was used to create the "scroll effect", however this has never been the smoothest experience on laptop trackpads and touch devices.
In version 5, carousels are powered by native smooth-scrolling and scroll-snapping, which results in a much nicer user experience, especially on touchscreens. We've been able to remove a staggering 95% of the Javascript, substituting it with just a few lines of CSS.
 
carousel.mp4
 
To be honest, we've only just scratched the surface here! In addition to these changes, we've modernized (and reduced code) in almost every component throughout the suite including avatars, cover photos, dropdown menus, forms, inputs, buttons, lists, off-canvas menus, side menus, columns and more!
Combined, these changes result in not only a significant reduction in code, but also a polished UI that performs smoothly on desktop and touch devices. We're excited to continue modernizing Invision Community well into the future as new technologies and techniques become available to us, and are looking forward to getting it in your hands in 2024.

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

I noticed something new in the chiller cabinet at the petrol station after filling yesterday.
Bottles of Grape Fanta sitting alongside the more mundane and pedestrian drinks such as Coke Zero and Pepsi Max.
I grabbed two bottles.
After draining one in record time, I googled around to see where I could get more of this delicious nectar, and it discovered that it's a new flavour being launched in the UK.
The really interesting thing was that Coca Cola used data stored in the self service machines that offer different flavours (such as those at cinemas) to determine which new flavours to bring to the market.
Grape was the second most popular flavour after regular orange, so the company knew they had a market ready for premixed bottles.
In a world where we fear what Big Tech does with our data, it's easy to forget that data has a valid use in your business.
It's why we make it clear that with Invision Community, you own your data. We just look after it for you.

This gives you the freedom to discover new trends within your business and use them to drive sales.

Search. Let's be honest, it's not the most exciting feature in the world. You ask to find things, and it shows you what it found.
Simple, right?
It's a lot more complex than that. After numerous tests, a few surveys and many discussions with customers, we've decided that there is no "right" or "wrong" way to search. Invision Community is used on many diverse communities and each has its own needs.
The bigger the community, the more of a headache search can be when you start hitting frustrating technical limitations of the database.
Happily, we've addressed all of these issues with Invision Community 4.3 and added a few extra treats.
Searchable Products and Pages
Products in the Store and custom Pages will now show in search results.

Store product in search results
More Customisable Search Experience
One of the most difficult challenges with search is anticipating the scope of the search. If, for example, you're looking for something you know you've seen before, you want the search to be narrow - matching only the exact terms you provide, probably only matching against the title, in the specific area you know where the content is located. If however, you're just doing a general search about a particular subject, you want the search to be wide - matching any of the terms you enter, anywhere in the community, in both titles and content.
For a while, Invision Community has had the option to choose which areas to search, defaulting to the area of the community you're in (for example, if you're in a forum, only that forum will be searched by default). We also provide a number of suggestions on the search result form (in the form of "Didn't find what you were looking for? Try searching for..." followed by a number of options) which adjust the scope of the search.
In Invision Community 4.3, we have a new interface for the quick search feature which makes some of these options more visible so you're more likely to find what you're looking for on the first search.

New Search UI
Along these lines we have also:
Changed the default "Search In" selection to "Everywhere", regardless of where the user is. Added a new setting which controls whether the "Any words" or "All words" option is checked by default. Added a new setting which allows you to adjust how much of a boost results receive for a match in the title, versus the content body, when searching both content titles and body. You can set default and/or operator.

New Search Settings
Elasticsearch
In Invision Community 4.3 we are adding native support for Elasticsearch, a third party search engine which offers a number of benefits over searching your MySQL database:
Elasticsearch, being designed and indexing data in a way optimised for search rather than data storage, is generally able to match and sort by relevancy with better accuracy than MySQL. Elasticsearch is generally faster. One user performing a search doesn't slow down other users trying to read and make posts at the same time (when searching MySQL, the data has to be "locked" from changes when the search is being performed). It scales very well with very large datasets, and runs very easily on multiple servers. Elasticsearch understands language. If for example, you search for "community", it will also return results which contain the word "communities", understanding that these are the same. Supported languages are Arabic, Armenian, Basque, Brazilian, Bulgarian, Catalan, Chinese, Czech, Danish, Dutch, English, Dinnish, Drench, Galician, German, Greek, Hindi, Hungarian, Indonesian, Irish, Italian, Japanese, Korean, Latvian, Lithuanian, Norwegian, Persian, Portuguese, Romanian, Russian, Sorani, Spanish, Swedish, Turkish, Thai. Elasticsearch supports custom functions on the scoring algorithm. In our initial implementation this has allowed us to add settings to allow you to control the time decay (allowing newer results to show higher) and author boost (allowing content posted by the user to optionally show higher in results). Unlike with MySQL, there is no minimum query length and a very small list of stop words.
Elasticsearch Settings
When enabled, both searches and activity streams will be retrieved from Elasticsearch. The core_search_index database table in MySQL will no longer be populated, so you will not have to store the data twice.
To use Elasticsearch, you can either install it yourself on your own server, or use any of the many excellent hosted Elasticsearch options. The minimum required Elasticsearch version is 5.5.
REST API
Developers and those looking to integrate Invision Community features into their own sites will be pleased to learn that we've extended the REST API to accommodate searching. 

We are happy to announce the new Invision Community 4.3 is available!
Some highlights in Invision Community 4.3 include...
Improved Search
We now support Elasticsearch for scalable and accurate searching that MySQL alone cannot provided. There are also enhancements to the overall search interfaces based on your feedback.

 
Emoji
Express yourself with native emoji support in all editors. You can also keep your custom emoticons as you have now.

 
Member Management
The AdminCP interface to manage your members is all new allowing you easier control and management of your membership.

 
Automatic Community Moderation
You as the administrator set up rules to define how many unique member reports a piece of content needs to receive before it's automatically hidden from view and moderators notified.

 
Clubs
The new Clubs feature has been a huge hit with Invision Community users and we are expanding it to include invite-only options, notifications, exposure on the main community pages, paid memberships, and more.
Custom Email Footers
Your community generates a lot of email and you can now include dynamic content in the footer to help drive engagement and content discovery. 
New Gallery Interface
We have reworked our Gallery system with a simplified upload process and more streamlined image viewing.
 
The full list follows. Enjoy!
Content Discovery
We now support Elasticsearch which is a search utility that allows for much faster and more reliable searching. The REST API now supports search functions. Both MySQL and Elasticsearch have new settings for the admin to use to set search-defaults and default content weighting to better customize search logic to your community. Visitors can now search for Content Pages and Commerce Products. When entering a search term, members now see a more clear interface so they know what areas they are searching in and the method of search. Member Engagement
Commerce can now send a customizable account welcome email after checkout. You can whitelist emails in the spam service to stop false-positives. REST API has many enhancements to mange members. Ability to join any OAuth service for login management. Invision Community can now be an OAuth endpoint. Wordpress OAuth login method built in. Support for Google's Invisible ReCaptcha. Groups can be excluded from Leaderboard (such as admins or bot groups). All emails generated by Invision Community can now contain admin-defined extra promotional text in the footer such as Our Picks, and Social Links. Admins can now define the order of Complete Your Profile to better control user experience. Clubs
Option to make a Club visible but invite-only Admins can set an option so any Club a member is part of will also show in the parent application. So if you are in a Club that has a Gallery tab then those image will show both in the Club and in the main Gallery section of the community. Club members can now follow an entire Club rather than just each content section. There is a new option on the Club directory page for a list view which is useful for communities with many Clubs. If you have Commerce you can now enable paid memberships to Clubs. Admins can set limits on number of Clubs per group. If a group has delete permission in their Club, they can now delete empty containers as well. Members can ignore invitations. Moderation and Administration
Unrestricted moderator or administrator permission sets in the AdminCP are visually flagged. This prevents administrator confusion when they cannot do something as they will be able to quickly see if their account has restrictions. You can choose to be notified with a new Club is created. Moderators can now reply to any content item with a hidden reply. Download screenshot/watermarks can now be rebuilt if you change settings. Support for Facebook Pixel to easily track visitors. Moderators can now delete Gallery albums. Automatic moderation tools with rules to define when content should auto-hide based on user reports. Totally new member management view in AdminCP. More areas are mass-selectable like comments and AdminCP functions for easier management. New Features
Commerce now has full Stripe support including fraud tools, Apple Pay, and other Stripe features. Commerce packages can now have various custom email events configured (expiring soon, purchased, expired). Full Emojii support in the editor. Complete overhaul of the Gallery upload and image views. Announcements system overhaul. Now global on all pages (not via widget) and new modes including dismissible announcements and top-header floating bar option. Many new reports on traffic and engagement in the AdminCP. Blog has new view modes to offer options for a traditional site blog or a community multi-member blog platform. The content-starter can now leave one reply to Reviews on their item. Commerce now makes it much easier to do basic account-subscriptions when there is no product attached. Useful Improvements
Forums has a new widget where you can filter by tags. If tags are not required, the tag input box now indicates this so the member knows they do not have to put in tags. Member cover photos can now be clicked to see the full image. Any item with a poll now has a symbol on the list view. Twitch.tv embed support. You can now update/overwrite media in the Pages Media Manager. Mapbox as an additional map provider to Google Maps. Technical Changes
Direct support for Sparkpost has been removed. Anyone currently using Sparkpost will automatically have their settings converted to the Sparkpost SMTP mode so your email will still work. Your cache engines (like Redis) will be checked on upgrade and in the support tool to ensure they are reachable. Third-party applications will now be visually labeled to distinguish them from Invision Community official applications. The queued tasks list in the AdminCP is now collapsed by default as queued tasks are not something people need to pay much attention to during normal operations. When upgrading from version 3 series you must convert your database to UTF8 and the system saves your original data in tables prefixed with orig. The AdminCP now alerts you these are still present and allows you to remove them to reclaim storage space. On new installs there are now reasonable defaults for upload limits to keep people from eating up storage space. Categories in all apps (forums, gallery albums, databases, etc.) no longer allow HTML in their titles. This has been a concern both in terms of security and usability so we were forced to restrict it. Large improvements to the Redis cache engine including use for sessions. The login with HTTPS option has been removed and those who were using it will be given instructions to convert their entire community to HTTPS. Images loaded through the proxy system now honor image limits for normal uploads. We now consider BBCode deprecated. We are not removing support but will not fix any future issues that may come up.
 
There's a lot to talk about here so we are going to lock this entry to comments so things do not get confusing. Feel free to comment on upcoming feature-specific entries or start a topic in our Feedback forum.