Leaderboard

Live Topics in Invision Community 5 Introduced last year, Live Topics are an innovative way to host live chat and question-and-answer sessions, complete with the option for live video integration. Live Topics effortlessly transform these events into permanent forum topics once the event concludes, allowing your members to not only interact in real-time with the rest of your community, but also continue the conversation far beyond the events conclusion. As part of Invision Community 5, Live Topics will ship with a brand new design, rich-text editors and dynamic reactions. Let’s take a look at all three improvements, starting with the new design. Full-screen, 3 column layout When viewing a live topic, you’ll be taken to a new, minimal, full-screen, 3 column layout which provides plenty of space to simultaneously view your video, question-and-answer list, and live chat columns all at once. The width of the video can easily be adjusted using a simple drag and drop handle, allowing your members to shift their focus between the video or the question-and-answer list depending on the moment. Resize.mp4 The second column holds a list of dynamic question-and-answer discussions, while the third column boasts a redesigned chat area that more closely resemble an app-like experience. Questions-and-chat.mp4 For smaller devices such as tablets and mobiles, the video is always visible at the top of the page. The question-and-answer list and live chat collapse into their own tabbed area to conserve space. Mobile.mp4 Rich-text editors Text fields in Live Topics have been upgraded to CKEditor, allowing for greater flexibility when it comes to formatting text or posting emoji’s. Richtext.mp4 Reactions Reactions have been added to live topics for both the question feed and the live chat. Reactions update dynamically in real-time, offering valuable insights into the content your community deems significant in the moment. Reactions.mp4 A lot of thought has gone into transforming Live Topics into a much more user friendly experience. The refreshed, modern design combined with new real-time features make Live Topics a fantastic solution for hosting real-time community events, and we're looking forward to shipping these updates alongside Invision Community 5 later this year.

One of the areas we have reviewed in Commerce is the way that we handle custom items. Previously, many of our features were limited to Commerce Products. Even items such as Subscriptions and Download Files were not fully integrated. In Invision Community 5, we have looked at ways to improve the overall experience. Icons and Images A small, but important change: displaying the item icon when an image is not available. In previous versions, if no image was available, the checkout and client area displayed a standard "box" icon for all items. In IC5, we now show the icon defined in your Item extension. Product Details Line item details are displayed on the checkout screens, as well as on the Invoice. However, this functionality was restricted to custom package fields, which are only available for Commerce Products. This logic has been moved to a new extension method, detailsForDisplay. Coupons A very popular request is to create coupons for specific items that are not Commerce Products. Previously, coupons could either be applied to the entire purchase or to specific packages. We have added the following methods to the Item extensions to allow you to integrate your items with the coupon form. couponFormElements Returns an array of elements that will be shown on the coupon form. If no elements are returned, your item will not be listed. saveCouponForm Process the values of the fields defined in your couponFormElements method. This method returns an array of data that will be stored with the coupon. isCouponValid Check if the coupon is valid for this item. New default coupon form: Autopay When Commerce generates renewal invoices, we attempt to take a payment if a user has a card on file. We have moved this functionality to \IPS\nexus\Gateway::autopay(). Your gateway must also have the SUPPORTS_AUTOPAY constant set to true in order for this to work. With the new logic, when a renewal invoice is generated, the task will loop through all available methods. If autopay is supported, it will attempt to take payment using that payment method. We've tried to include the most popular requests that we've seen for custom items and payments. What do you think? Have we missed anything? What are some of the requests you've received for custom item integration?

Bring your community to life with the latest live community features coming to Invision Community 5. Last year we introduced new features that immediately showed who was currently reading a topic and who was replying. This feature leveraged new technologies to connect members with each other instantly. In this blog post, we'll delve into the latest live community features for Invision Community 5 and explore how they enhance our sense of togetherness within our communities. We'll examine how these features instantly notify us about new events, updates, or interactions and how they contribute to a shared sense of presence. These features go beyond the static posts and comments we've grown accustomed to and introduce a real-time element. Whether you're part of a support community, a gaming forum, or a professional network, these features will have you feeling like you're interacting with other community members simultaneously, fostering a strong sense of shared experiences. Posting We've all been involved in a busy topic where you're keen to see what replies your latest post has. Select packages on Invision Community 4 can see who is active on a topic and who is typing, but you have to hit refresh to see the new posts added to the topic. If you're anything like me, then you hammer refresh until something new appears. With Invision Community 5, this is no longer a problem. As you interact with a topic, new replies are automatically added to the topic without needing to refresh. This one feature brings the conversation to life, and you get a real sense of other members interacting with the topic at the same time as you. Reactions Did you drop a razor-sharp GIF or post something applause-worthy? Watch as others react to your content in real time with Invision Community 5. There's no need to refresh or return to the topic later to see who enjoyed what you wrote. Getting rewarded for your content is gratifying and encourages you to post more and show your appreciation for other's content via reactions. Notifications Notifications have long been a valuable way to be notified when anything important happens in your community. It may be that someone has quoted your content, tagged you in a post or started a new topic in a forum you're following. With Invision Community 5, you can watch the notification count rack up in real time, alerting you to new events that you may otherwise miss as they happen. We hope that you've enjoyed reading about these new features and look forward to them coming to select packages for Invision Community 5. They provide a sense of togetherness and immediacy, making it feel like we're interacting with fellow community members simultaneously. We're keen to hear what you think, please leave a comment below. The features discussed in this announcement will not be available for Invision Community Classic. Click here to learn more about switching to our platform to get this and other benefits.

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.