Dreadknux

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.

View full blog entry

Hi @Dreadknux
Funnily enough, this is something we discussed internally a few weeks ago. We're working hard on revamping Pages at the moment, so we'll be able to provide more information in the future about widget customizations 🙂 

Hey @Ehren sorry for the topic bump but I was rewatching this and something came to me when seeing these newly-designed widgets:

Considering how great these particular 'scrollable column' widgets look both on desktop and mobile, is there scope to include these widget designs for custom content blocks in the V5 Block Manager (or as a built-in template to leverage in the AdminCP Block Editor)? I can just see myself using this particular widget design to list the latest records in a 'News' Pages CMS database, for example.

I just checked the rogue online event and saw that it was set for a repeat the following year, I unchecked it and it removed itself from the Online Events widget. So I guess that was that. Thanks for that Jim, guess you guys already know about that then! 🙂

I just checked the rogue online event and saw that it was set for a repeat the following year, I unchecked it and it removed itself from the Online Events widget. So I guess that was that. Thanks for that Jim, guess you guys already know about that then! 🙂

Featured events would still show up even if they are in the past. However, it is odd that the event is still showing up in Online Events. Is this event reoccurring? That is a current open bug we have where the date displayed for reoccurring events is incorrect.

Hm, I can see why IPS made this change but to be honest, asking clients to seek custom app/plugin development is going to be a lot more expensive than finding an app on a marketplace that many customers will be able to purchase. I guess it will make me a lot more hesitant to spend my money on third party apps.

I'll let you know if they show up. 😅

Haha fair enough! I'm not super au fait with the inner workings of Google so I figured it was worth asking the experts! 😄

It's an interesting question but I don't think we'll have that much influence over what Google decides short of 301 redirecting forum content to the CMS content which would be a terrible idea. 😅

It’s not possible without someone coding a custom converter or doing it all manually. 
But IPS has already indicated that their apps will come closer together in the 5.x product line. So, maybe if you wait, IPS will make that happen in the future. 

Hi guys, not sure if this is already being worked on for V5 but I'm throwing it out there. Basically I'd love for there to be a way to set different navigation menus depending on the device a user is browsing the community on.
I ask this because on desktop, I might want to have three major menu items on display before having a "More" dropdown that houses all other sections of the community... but on mobile (where the user menu is vertical and offers more space) I would want to have all menu items lined up on the top level without any dropdown/nested menus.
It'd be great to allow for different menus per device/theme to account for this, or if that's too much maybe a setting that lets me manually set how many menu items are on display before the dynamic "More" dropdown appears on desktop.

"Not to mention, there is a significant update to Pages underway."
👀 👀 👀 👀
"We also have a lot of less flashy updates, such as the new consolidated Feature/Our Picks feature, which is now a single feature."
This is promising and definitely reduces a lot of duplication of features across the community. Will there be any further optimisation/features for Our Picks as well? Ability to filter entries by content type/node category, auto-feature of certain content nodes (ie. automatically Our Pick a 'News' Pages record), that sort of thing? It'd be great to use this as part of a more advanced homepage feature!
Looking forward to hearing more. Hopefully there will be more to say about other apps as well (Gallery, Blogs, etc) but I'm happy with the chat about theming, Forums and Pages so far! Thanks for all the amazing updates! 😄

"Not to mention, there is a significant update to Pages underway."
👀 👀 👀 👀
"We also have a lot of less flashy updates, such as the new consolidated Feature/Our Picks feature, which is now a single feature."
This is promising and definitely reduces a lot of duplication of features across the community. Will there be any further optimisation/features for Our Picks as well? Ability to filter entries by content type/node category, auto-feature of certain content nodes (ie. automatically Our Pick a 'News' Pages record), that sort of thing? It'd be great to use this as part of a more advanced homepage feature!
Looking forward to hearing more. Hopefully there will be more to say about other apps as well (Gallery, Blogs, etc) but I'm happy with the chat about theming, Forums and Pages so far! Thanks for all the amazing updates! 😄

"Not to mention, there is a significant update to Pages underway."
👀 👀 👀 👀
"We also have a lot of less flashy updates, such as the new consolidated Feature/Our Picks feature, which is now a single feature."
This is promising and definitely reduces a lot of duplication of features across the community. Will there be any further optimisation/features for Our Picks as well? Ability to filter entries by content type/node category, auto-feature of certain content nodes (ie. automatically Our Pick a 'News' Pages record), that sort of thing? It'd be great to use this as part of a more advanced homepage feature!
Looking forward to hearing more. Hopefully there will be more to say about other apps as well (Gallery, Blogs, etc) but I'm happy with the chat about theming, Forums and Pages so far! Thanks for all the amazing updates! 😄

"Not to mention, there is a significant update to Pages underway."
👀 👀 👀 👀
"We also have a lot of less flashy updates, such as the new consolidated Feature/Our Picks feature, which is now a single feature."
This is promising and definitely reduces a lot of duplication of features across the community. Will there be any further optimisation/features for Our Picks as well? Ability to filter entries by content type/node category, auto-feature of certain content nodes (ie. automatically Our Pick a 'News' Pages record), that sort of thing? It'd be great to use this as part of a more advanced homepage feature!
Looking forward to hearing more. Hopefully there will be more to say about other apps as well (Gallery, Blogs, etc) but I'm happy with the chat about theming, Forums and Pages so far! Thanks for all the amazing updates! 😄

"Not to mention, there is a significant update to Pages underway."
👀 👀 👀 👀
"We also have a lot of less flashy updates, such as the new consolidated Feature/Our Picks feature, which is now a single feature."
This is promising and definitely reduces a lot of duplication of features across the community. Will there be any further optimisation/features for Our Picks as well? Ability to filter entries by content type/node category, auto-feature of certain content nodes (ie. automatically Our Pick a 'News' Pages record), that sort of thing? It'd be great to use this as part of a more advanced homepage feature!
Looking forward to hearing more. Hopefully there will be more to say about other apps as well (Gallery, Blogs, etc) but I'm happy with the chat about theming, Forums and Pages so far! Thanks for all the amazing updates! 😄

Latest weeks we got spoiled with a v5 teaser in the middle of the weeks . it's Thursday . wake up guys

 

😁😇🤣😂 

Just kidding . Can't wait 😉 

Cheers

It’s an option in the ACP: Customization → Editor → Settings → Advanced → Allowed CSS classes

Not sure how difficult this would be to implement but.
For the CMS/Pages application: The ability to choose different schema types for different databases and pages, such as an about page, using to json-ld generator. 
Also since different schema types have different properties, the ability to match/ choose schema properties with custom field types. 
This is similar to how yoastSEO and similar WordPress SEO plugins works.
I'm not sure if this is fully possible with the Google data layer but that seems a bit complicated to implement.

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!
 


View full blog entry

Long ago, back in the dark ages, forums used the number of posts a member made and how long ago they joined to demonstrate trust and experience.
Is simply posting a lot and being a member for a long time the best way to know which community members are experts?
And is there a better way?
We think so.
 
 
What makes an expert, and why are they important?
Community experts are the keystones to any thriving community. You probably recognise a handful in your community. They tend to be active regularly, are often the first to try and help others with their questions and help set a positive example within the community.
Wouldn't it be great if newer community members could discover who these super users were a little easier? These members trying to find their feet in a new community could follow trustworthy individuals, absorb the positive tone of the community, and even get help a little quicker.
In the past, forums have shown trust and experience through basic metrics like post count and the years since they joined. However, these metrics only show that the individual has been around a long time and posts a lot. It doesn't show that they are potential role models or helpful and trustworthy.
Community Experts with Invision Community 5
Invision Community 5 identifies these experts through metrics such as the number of solutions they have, the volume of 'helpful' votes on their replies, the speed of answers and more.
Each forum will have its own experts, so if you have a very broad community, someone who is very helpful in a particular area will show as an expert in that area only.
When a member has been picked as an expert, they'll receive an email thanking them, and they can then opt-in to be shown as an expert along with a regular notification or email with any unanswered questions in forums they are experts in.

I'm absolutely killing it in the Test Forum
Every few months, the experts are recalculated to reflect the organic way communities grow and change. After all, there's little point in showing that a non-active member is an expert. It might even encourage new community experts to keep up the great work and remain active longer.

Community experts have a badge shown with their posts, along with the option to follow them. Encouraging new members to follow trusted community members should be a core part of any community strategy.
Settings and control
Of course, not everyone should be labelled as a community expert, and perhaps, in very rare circumstances, an existing community expert could have a bad day and not represent the community well.
Invision Community 5 gives you the ability to set which groups experts can be picked from and offers you the opportunity to block existing experts, ensuring they won't be selected again in the future.

Over to you
All communities have to be purposeful and provide value. That value may be in close friendships, or it may be in getting answers for problems you have. Either way, locating the most helpful members will help develop trust, provide guidance and increase knowledge within your community.
For transactional communities such as support-based communities, experts are vital in providing timely answers and demonstrating credibility and expertise to others.
As always, we'd love to hear your thoughts. Please let us know in the comments.
 

View full blog entry

For feature requests, please create a topic in our Feedback forum. This forum is more for general questions and feature suggestions will be overlooked.

Hi all,
we were trying to create a category inside "blogs" and we want to make it visible and accessible only to some groups... 
In AdminCP we didn't find how to set permissions to a blog category. 
Hiding the category does not prevent to access to it because if you have the link of the category, you will be able to access to the category itself.
Also, the System->Site Features->Applications-> Blogs->Permissions is not helping us to set the permission on only one single category (but for all the category).
We noticed that we have the chance to set the visibility for users but not groups, this is not helpful... it is not convenient inserting every single member for every single category and every time a new user joins the community.
There is a way to set a permission on a single category to a selected group (e.g. members, administrators, etc.)?

Thank you in advance
 

Forum platforms have a wide range of uses, from helping with support to sharing knowledge, ideation and social interaction.
Topics can span years, and once the initial explosion of replies has passed, the topic lives on in local search and search engines for future viewers to discover and get value from.
However, it's not always easy to get the best content from a very long topic.
You may have noticed that when you come to a topic seeking an answer, some replies are less than helpful.

How do I fix my Apple Watch? Like this!
It's common to find a lot of social content mixed in with useful replies. Jokes, GIFs and off-topic musings are all great while the topic develops organically in real-time. Having fun is critical to feeling a sense of belonging in a community. However, those coming to the topic a little later, say from a link Google has suggested, just want to get the useful content in the fastest way possible.
That's where 'helpful' voting comes in.

A very helpful reply
Invision Community can already mark a single post as the best solution for that topic. Still, not every topic gets a definitive answer, and some community strategies resist quickly marking a post as the best answer to encourage more discussion rather than effectively ending it.
Even when you have a definitive answer, there is often value in other highly rated posts offering more context, alternative solutions and more thorough explanations.
With Helpful voting, your members are encouraged to flag which posts they find helpful in the topic. When enough votes are added to a single post, they are suggested as a possible answer. You can also tune out the noise and view the most helpful replies only.
This is a powerful way to get the very best content from a topic in a short space of time.

Want to just view the most helpful replies? No problem.
If you eventually choose to mark a post as the definitive answer, the suggested post will be replaced with the answer you choose, but you can still see the posts voted as helpful to gain further context.
The helpful voting works independently from reactions, which tend to cluster around social content. Social media conditions us to add a like or funny reaction to content that gets an emotional response. Indeed, a lot of the most highly reacted content is funny content. Social reactions are valuable when building connections between community members but often don't reflect what is the most useful content.

The suggested most helpful post threshold is configuration via the Admin Control Panel.
Helping your members find the best content within topics helps them do more in your community with less time.
Forums continue to evolve, and while social content helps develop the community, content that solves problems and helps others is the rocket fuel you need to keep members and attract new audiences.
Helpful voting also feeds into picking Community Experts, a new feature for Invision Community 5, but we'll talk about that in a future blog.

A sneak peak at the new Community Expert badge
I hope you found this update ✨helpful✨, and if you have any questions or comments, let me know in the comments!

View full blog entry