SeNioR-

Thanks for the feedback everyone!
Thanks mate! Third party designers will be able to release themes which take advantage of all of these features, which almost makes "premade themes" much closer to "custom themes". If you find a theme for sale, but the header positions aren't quite right for example, you'll be able to customize it without asking the designer for custom changes. Win win for both the designer and the customer!
 
The web developer tools built into your browser are likely the best solution here. I'll write up documentation for all of the new components (grid, buttons, etc), but as for the custom CSS editor, there are no plans at this stage to expand it beyond a regular code editor.
 
Yeah, the swatches will come in really handy. It's a much easier system instead of manually trying to allocate light/dark shades manually.
The header background in the intro was added via Custom CSS. I've been thinking of the best way to add an image feature for the header, but making a simple UI for something like that is ironically a very complex task since you also need to cater for the multiple header/nav bars as you mentioned. It's very simple to add using CSS, so at least there's a simple fallback if nothing else comes to mind before the release date 🙂
There are no plans for gradients, but since you seem pretty confident with CSS, you'll have no problems adding them using the code editor 🙂
 
Thanks David!
There certainly is. Snippets are truncated to a maximum of 680 characters for memory - but you can trim that down using CSS line-clamp. One line of CSS can do that for you. 👍

That's exactly how it currently works @Afrodude 🤝

Thanks for the tip @David N.. All sorted! 🙂 

Hi @MythonPonty
There's already a feature for adding a counter badge. 👍

After clearing the cache on your site, the sidebar is now working correctly. 
With that said, there is some severely outdated code in your theme, especially within globalTemplate. This will likely cause other issues on your site, or may prevent new features from working correctly. I'd suggest manually upgrading your template files by following the code changes provided by the Theme Tool.

Yeah, looks like I cleared the cache in the same moment the plugin was disabled. Glad you got it solved.
I'd still highly recommend upgrading your theme as soon as you can though 👍 It'll make future upgrades much smoother and less prone to errors.

Invision Community 5 is not yet available.  It’ll come out at some time in 2024 👍

I certainly did 😅 I've just added the screenshot, thanks!

The sidebar width is customizable via a single flex-basis CSS property @Adlago. By default, it is 350px, but you can change it to whatever width you like 👍

Great work as always @Ehren
One thing that really caught my eyes here is how profile' side blocks are handled in Mobile view. I think IPS just nailed it. question here is what happens with blocks with different heights? those seems all in same heights and size, so what if one block is just longer than the others? another question is and maybe i missed something here, is this same method for all other blocks/widgets in mobile view?

UI update has Ehren written all over it. Using your themes for past 10 years 🙂 Well done. 

Thanks Alex, I appreciate that! 
Thanks @shahed! 
 
The profile blocks will stretch so they’re all the same height. In testing, this has worked well, but we can always add a max-height to the boxes if they get too tall.
For the moment, “normal widgets” just collapse into a vertical column on mobile, so it’s just the profile ones which scroll. The normal widgets can vary a lot in height, so they might not work as smoothly in a carousel. 

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 🙂 

^ this is the most likely scenario here

I was notified only 33 mn ago to approve a post that was posted last Friday = but the user joined the forum 33mn ago. I don't understand what could have happened there?

 

We have already fixed this for an upcoming release.

Marketplace was really good option to find everything in one spot. Now i need to register on 20 different sites and half I don't even remember. 
It's like Apple telling to it's customer, here take iPhone. You want apps? Go on developers site and install from their. Jeez, what a nightmare. 
Take care of your health. Rest everything will go on. 
PS I am one of the customers who is unhappy because support/ticket system is gone and have to deal with broken donation system in store. 

Yes 🙂 

The sidebar is desktop only. Mobiles have their own navigation panel design 🙂 

It's fixed, yeah we updated the handler from ACP => System => Files => Storage Settings => Configurations => Create New

You may try disable Rocket Loader - https://developers.cloudflare.com/speed/optimization/content/rocket-loader/enable/

I clicked into this very excited, thinking you'd be showing off an AI-generated 'executive summary' of topics. Genuinely curious: why not feed those posts with high impact signals into an LLM to summarize? Not long ago your approach would have been great, but now I think will be in danger of feeling pretty clunky, manual and old fashioned. This seemed like it'd be the perfect opportunity to use a modern tool to solve the problem.

Hey, devs. I have a question about converting image attachments.
So, if we use Imagick, PNG images are not compressed at all. 8 out of 10 images that I uploaded to the post have a larger file size than before uploading (lol).
I wrote some code to compress PNG images (by changing the format to webp) and the size dropped by about 80% (sic!), however I need code to save the output file in .webp format. 
Can anyone direct me how to change the output format after uploading?
/* Get Format */ $format = $this->imagick->getImageFormat(); /* Set PNG */ if( mb_strtolower( $format ) == 'png' ) { $this->imagick->setImageFormat('webp'); $this->imagick->setOption('webp:filter-strength', '20'); $this->imagick->setOption('webp:filter-type', '0'); $this->imagick->setOption('webp:method', '3'); $this->imagick->setImageCompressionQuality( 85 ); }

We can provide the tools and you can decide how to use them. Google taking forum content seriously after years of "user generated content" being rated down can only be a good thing overall.