Randy Calvert

Forum moderation management used to be straightforward. It was commonplace to assign a moderator to a single forum. They would be responsible for enforcing the rules, removing spam and generally modelling the behaviour you wanted to see within your community.
As community management has matured and moderators are tasked with roles based on knowledge, help and support, there is a need for more nuance in managing topics within your community.
For example, you may have specialists or teams of specialists who help answer questions about development, sales, or support. Topics that require this help may be posted anywhere within your community.
Indeed, this feature was inspired by a need in our own support community to ensure customers get the right help from the right team member. We have questions on feature sets, purchasing, and support requests, each requiring a different team member. It is not enough to hope that the right person sees the topics; they must be assigned to ensure excellent service.
 
What are the benefits of this feature?
The ability to assign a topic to a single moderator or a team of moderators ensures that each topic gets the best outcome regardless of where it was posted.
Having topics assigned helps moderators deal with issues quickly, as there's clarity over which moderators should handle the topic. It also helps keep your community team accountable by having the ability to monitor their workload and get statistics on the time it takes for your team to reply. These statistics also help the community lead assess quality control.

 
How do you use this feature?
There are two ways to assign a topic to a moderator or team of moderators. You can assign a topic when replying to it or do it from the topic's action menu.
Once assigned, the assignee can review their assigned topics via the Moderator Control Panel and see which are assigned to them via the list of topics. Each moderator will receive a notification informing them they have a new assignment.

Those with permission to assign topics to others will see all the assigned topics and who they are assigned to when reviewing the list of topics.

The Admin CP contains a list of all assigned topics and also allows you to create and manage teams of moderators, such as "Sales Team" or "Developers."

Finally, once the topic has been managed successfully, the moderators can remove themselves from the assignment completing the task.
Assigning a specific topic to a single person or team in a busy online forum is a strategy that can enhance the effectiveness of the forum's management. It promotes efficiency, expertise, consistency, and accountability, which are vital for maintaining a vibrant and respectful online community.
We hope you are looking forward to this feature and look forward to any comments you may have.

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.

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!

Our May update brings Email Bounce Management to our Invision Community cloud platform. In this blog entry, I'll go over what it is, why it's important, and how you can use it when needed.
What is it?
For those who may not know, an email bounce occurs when an email message is sent and the recipient either doesn't exist (hard bounce) or they have blocked the sender (you!) in a spam complaint (soft bounce).
When an email message bounces we block that address at the cloud level so it cannot receive new messages from any community. This is considered good practice for email service providers, and ensures that we maintain a low bounce rate when sending emails on behalf of all the communities on our platform.
Please note this pertains to the Invision Community Cloud platform email service. If you use SMTP or SendGrid, email bounces are managed externally and may enforce different policies.
What Bounce Management Tools are we providing?
We're giving you the ability to see which members have blocked email addresses, and to unblock emails known to be safe.
Seeing which emails are blocked
In the AdminCP Members table (AdminCP > Members > Members), on cloud you will see a new filter: "Email Undeliverable". These are any member accounts that have emails blocked due to soft or hard bounces.

 
Additionally, on the front end, if a Member's email is blocked, they will see a warning indicator in the Nav/User Bar prompting them to change their email in their account settings.

 
Lifting Email Blocks
As stated earlier, when an email is blocked, it is blocked on the cloud platform level. If the block is not locked (which can happen if it's unblocked too many times), you will see a warning the Member's AdminCP Profile page.

 
Clicking into it you will see an option to unblock.

 
One final note on the Email Block Policy
If a situation occurs when an email is unblocked and gets blocked again a certain number of times, the block becomes permanent. In these cases, you will be able to see that the email is blocked but there won't be an option to unblock, and the member will have to change their email to resume receiving your Community's messages through us. This ensures that the Invision Community cloud platform retains a good email sending reputation.
Thanks for reading and as always stay tuned to for the latest and greatest upcoming features and insights!
The features discussed in this announcement are not available for Invision Community Classic. Click here to learn more about switching to our platform to get this and other benefits.
 

You may have noticed many of the Invision Community apps getting updates recently. Over the last several months we have revealed revamped Events, Gallery and Downloads apps and have listened to how you have been using them.
As a result, we are including some further app refinements as a direct result of that feedback.
Gallery
Many of you asked for more customisation options with the new overview page so 🎉 it is now possible to hide and show different sections of the overview using simple toggle settings without the need for theme edits. You can also adjust the number of items that show.

Searching for existing Gallery images to include in topics has been a feature of Invision Community for a while but previously search has been limited to the image name. Now, when searching for images via the "Insert other attachment" editor option, searching by album name returns images from that album.
Gallerysearch.mp4
Events
We added a similar improved overview to Events in the October release but for those of you with multiple Calendars you wanted a quicker way to subscribe to all events.
It is now possible to subscribe to all events from a prominent button in the header of the overview page. Members can subscribe to an iCal feed or download an export in just a couple of clicks.
 
Clubs
We also decided to use this release to add a couple of updates to clubs.
The popular “Mark solved” functionality is now available directly in your clubs with control over who can mark the item solved. You can allow the topic author to mark questions as solved or leave it to moderators only.
…and last but not least we added a contextual search tweak so that when members are viewing a club, the search filter defaults to “This Club”

We hope these small but useful improvements are popular in your communities and we look forward to hearing more of your feedback and requests.
Is there anything we missed? Let us know in the comments.
The features discussed in this announcement are available in both Invision Community and Invision Community Classic.

We are excited to announce that the Invision Community GraphQL API is now available.
This blog takes you through what GraphQL is and what makes it better than existing APIs present in Invision Community. It does get a bit technical, but you don't need to be a developer to appreciate how GraphQL will make life easier for those that do develop.
What is GraphQL?
GraphQL describes itself as a query language for APIs that gives clients the power to ask for precisely what is needed and nothing more.
GraphQL was created by Facebook in 2012 and is now an open-source project governed by the GraphQL Foundation, which operates independently of Facebook.
What makes GraphQL better than existing REST APIs?
GraphQL has several advantages over the existing REST API present in Invision Community, and these include:
Flexibility: GraphQL allows clients to request only the data they need, reducing over-fetching or under-fetching data. Getting data from a REST API often means receiving many fields and values you don't need to complete the operation you're creating.
Versatility: GraphQL can query multiple databases or APIs, making it a more versatile solution than REST, which often requires multiple endpoints for multiple data types.
Strong Typing: GraphQL has a robust type system, making it easier to understand the capabilities of an API and catch errors early in the development process.
Better Performance: By allowing the client to request only the data it needs, GraphQL can improve the performance of an application compared to REST, which often returns more data than necessary.
Easier to evolve: The schema-based nature of GraphQL allows for more straightforward and less-breaking changes to the API compared to REST.
Let's look at an example
You're building a dashboard that uses Invision Community data for your Node.js application that shows the latest topics, latest registered members and calendar events. With the REST API, you need to make three requests to get all the data you need. With GraphQL, you can fetch the exact data you need with a single request.

Modern Web Development
GraphQL is now the standard for modern web development, including building mobile apps. A modern web app has a "front-end" and a "back-end".
The front-end refers to the user-facing part of the web application. The front-end is typically written in client-side languages such as HTML, CSS, and JavaScript and is responsible for rendering the user interface and handling user interactions. It communicates with the back-end to retrieve and display data.
The back-end refers to the server-side part of the web application. The back-end is typically written in server-side languages such as PHP, and is responsible for performing business logic, managing data, and serving API responses to the front-end.
Using GraphQL as the interface between the front-end and back-end, the development and deployment of each component can be done independently, improving the overall efficiency and scalability of the application.
At Invision Community, we know that some clients use REST to pull data from Invision Community for use in bespoke web and mobile apps. So we hope you're even more excited about the possibilities with GraphQL.
A list with all currently available queries, mutators and data types can be found in our developer documentation section.

Extending Invision Community Functionality
Of course, you also have full access to the GraphQL API in the Invision Community framework, so you can use GraphQL inside your controllers to run your queries, which has the advantage that you won't need to worry about future changes to the API. 
In addition, we have also created a GraphQL template plugin, which can be utilized inside templates to fetch any data.
This is a more technology-heavy blog than usual. The main takeaway is that we continue to invest in ways to allow your Invision Community data to be used by your own applications. GraphQL makes that job a lot easier and much more efficient.
Let me know if you have any questions!

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.