Jump to content

Ehren

Invision Community Team
  • Posts

    253
  • Joined

  • Last visited

  • Days Won

    22

 Content Type 

Downloads

Release Notes

IPS4 Guides

IPS4 Developer Documentation

Invision Community Blog

Development Blog

Deprecation Tracker

Providers Directory

Forums

Events

Store

Gallery

Everything posted by Ehren

  1. Thanks for the suggestion. This has already been addressed in v5, but I’ll keep this in mind for v4 πŸ™‚ It’s bugged me in the past too.
  2. This will be fixed in our next release. This is the solution we ended up applying: [data-blockid^="app_gallery_imageFeed_"] .cGalleryWidgetList .ipsImageBlock__main{ display: block; text-align: center; }
  3. If you have a custom profile field (Bio in this case), and if you’ve enabled the setting to have it displayed alongside posts, it will be shown just like Locations in my above screenshot. There isn’t any tab/modal functionality in the mini profile (not yet anyway). It simply shows the authors stats in an inline list, and then loops through their custom profile fields and outputs them in a vertical list.
  4. The scroll-padding and scroll-margin properties handle all of this for you, and are already built into v5 via a simple CSS variable. No need for pseudo elements or negative margins πŸ™‚ Are bios a custom profile field which you've made? By default, they'll be displayed below other stats with both the name and value of the field. Location is an example in this screenshot:
  5. @Foxtrek_64 Font Awesome 6 Free is used in version 5, hosted locally on your own domain for optimal performance. There isn’t currently a way to swap this with your own Font Awesome kit, but it’s certainly something we can look into if there’s enough demand for it.
  6. 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. View full blog entry
  7. 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.
  8. It's not something we've planned for an initial release, but it's quite easy to achieve with the new CSS framework and is possibly something we can implement in the future. With that said, browsers are very capable of scaling font sizes these days and since the entire UI is built using em's for sizing, the whole interface scales neatly. The color scheme also passes all contrast tests so far, and can be customized further using the Theme Editor if necessary πŸ™‚
  9. Version 5 is a significant rewrite with numerous new features and breaking changes. It’s not just a new UI, so it won’t be possible to run multiple installations on the same database, sorry @WebCMS
  10. 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.
  11. 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 πŸ‘
  12. I certainly did πŸ˜… I've just added the screenshot, thanks!
  13. Invision Community 5 is not yet available. It’ll come out at some time in 2024 πŸ‘
  14. 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
  15. 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.
  16. 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 πŸ™‚
  17. The sidebar is desktop only. Mobiles have their own navigation panel design πŸ™‚
  18. 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.
  19. 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.
  20. Hi @MythonPonty There's already a feature for adding a counter badge. πŸ‘
  21. No.. Jim's post is correct. He just doesn't specify that some video formats may not embed in all browsers when attached. If you take a look at our v5 announcements, you'll notice that all videos except for the "main announcement" are .mp4 files which have been uploaded as attachments to the post. Browsers are quite picky with video formats. For example, .mov works fine in Safari, but fails in other browsers, and .wmv has never been supported in the <video> tag. This has always been the case, and nothing has changed in our software since Jims post. For the widest support, .mp4 is suggested.
  22. I use the built in screen recorder in macOS for our v5 videos. We upload our main one to YouTube since it can be 1GB in size, but the other videos are just embedded as .mp4 Only some file types can be embedded into topics. This is a browser limitation rather than a limitation with Invision Community, so try and convert to mp4 for the widest support πŸ™‚
  23. Lots of credit goes to @Matt Finger for this weeks update. He did a great job πŸ‘
  24. 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
Γ—
Γ—
  • Create New...