Jump to content
Forum²

NewsBot

Active Members
  • Posts

    130
  • Joined

  • Last visited

Everything posted by NewsBot

  1. Invision Community 5.0.0 has reached a huge milestone; we're now in open beta testing. After numerous alpha releases, we're ready to move forward with the last stage of development and testing. The beta stage is primarily just fixing bugs and tweaking existing features and we're confident that the beta testing stage will run smoothly as its already stable and being used on a handful of production sites by brave souls who have upgraded immediately. Of course, we'd not recommend being so cavalier, especially if you are not very technical and do not have the time or patience to wait for fixes and risk broken functionality between beta releases! The good news is that you can use Invision Community 5 beta on a test installation, so you can set it up, and learn its new UI and feature set before planning your upgrade. The beta is available for both Invision Community Cloud customers, and Invision Community Classic customers. Invision Community Classic (Self Hosting) If you have an older license type (Invision Community Suite) and want to test Invision Community 5, then you are welcome to switch to the new v5 license in the client area. The renewal structure has changed, and all this is explained before you switch. If you have the classic license, you will then see the Invision Community 5 Beta download in your client area. Invision Community Cloud Our Cloud customers can request a time-limited v5 demo. Instructions on how to do this are in the Invision Community 5 Beta Testing Club. We're thrilled to move closer to a final release a year after Ehren revealed the "fresh new vision" for Invision Community 5. We'd love for you to join us in the Beta Testing Club and let us know what you think of Invision Community 5.
  2. For the past month or so, we've been working with a small number of alpha testers to get some initial feedback and to fine-tune some of the new features. We are now ready for more feedback, so today, we take the next step in testing! We've opened up a new Invision Community 5 preview site for everyone to use, find bugs and offer feedback. The new preview site has a feedback area and a bug report area, so please use those areas on the preview site, rather than post your thoughts here. 👉 https://preview.invisionalpha5.com/ There are two themes currently available. The first is the more 'classic' look that you will find instantly familiar. The second theme has the newer views enabled, such as the sidebar and feed mode for forums. You are welcome to switch between the two, and you can also change the layout options via your account settings. All this information is contained in the welcome topic over there. Have fun, and please let us know what you think!
  3. For the past month or so, we've been working with a small number of alpha testers to get some initial feedback and to fine-tune some of the new features. We are now ready for more feedback, so today, we take the next step in testing! We've opened up a new Invision Community 5 preview site for everyone to use, find bugs and offer feedback. The new preview site has a feedback area and a bug report area, so please use those areas on the preview site, rather than post your thoughts here. 👉 https://preview.invisionalpha5.com/ There are two themes currently available. The first is the more 'classic' look that you will find instantly familiar. The second theme has the newer views enabled, such as the sidebar and feed mode for forums. You are welcome to switch between the two, and you can also change the layout options via your account settings. All this information is contained in the welcome topic over there. Have fun, and please let us know what you think!
  4. For the past month or so, we've been working with a small number of alpha testers to get some initial feedback and to fine-tune some of the new features. We are now ready for more feedback, so today, we take the next step in testing! We've opened up a new Invision Community 5 preview site for everyone to use, find bugs and offer feedback. The new preview site has a feedback area and a bug report area, so please use those areas on the preview site, rather than post your thoughts here. 👉 https://preview.invisionalpha5.com/ There are two themes currently available. The first is the more 'classic' look that you will find instantly familiar. The second theme has the newer views enabled, such as the sidebar and feed mode for forums. You are welcome to switch between the two, and you can also change the layout options via your account settings. All this information is contained in the welcome topic over there. Have fun, and please let us know what you think!
  5. Introducing new Page Builder tools in Invision Community 5 Widgets are an incredibly powerful tool for displaying curated content of your choice on any page of your community - and despite the extensive array of settings for customizing their data, they've often been limited in terms of their design options. But this changes thanks to the new Page Builder tools in Invision Community 5! Widget Designs Previously in version 4, widgets would often have 2 designs: one for the main content area and a more minimal version for the sidebar. This worked well, but it meant your page was very limited in terms of design as you'd typically need to use the same table-like layout for most widgets. Anything beyond that would typically require a custom block to be coded, often with additional HTML or CSS. Version 5 offers much more customization by allowing you to change the design of each widget with the click of your mouse - no coding necessary! When dragging a widget onto your page, a new toolbar at the bottom of the page appears, holding all of the widget design options. Lets take a look at some below! Grid A familiar a very layout used elsewhere in the suite, the Grid design neatly aligns entries in a grid with a large cover photo sitting up top. A great combination of visual imagery alongside meta data such as entry descriptions. Featured A spacious list and a great way to feature content, pardon the pun. Wallpaper Perfect for content which includes uploaded cover photos or thumbnails! The Wallpaper design stretches each image to make it occupy the entire background, overlaid by a minimal amount of content. A subtle gradient sits behind the text to ensure it's easy to read, even on detailed images. Rows (table) The Rows design is a very familiar one, used very often throughout other areas of the suite. Content is displayed in a neat table, that collapses into a more compact design on small screens. Minimal Great for displaying a lot of content in a compact area! Minimal only shows primary information and hides meta data such as entry descriptions and stats. Great for sidebars, or areas with limited width. Minimal Grid The Minimal Grid design removes large meta information and displays content in a nice, compact grid. A nice option for displaying a lot of content while being cautious of vertical space. Carousel The Carousel option is quite unique because it can be applied in tandem with other widget designs, and is a perfect way to make the existing layouts even more compact. For example, by default, the Wallpaper design is aligned as a grid, but with the Carousel option enabled, the layout is converted into a carousel instead: Carousel-widget.mp4 Here's another example, using the Featured and Carousel options: Blog - featured carousel.mp4 Fun fact for developers: All of these designs use the exact same HTML structure; the only thing that differs is the class name on the parent element. This makes it incredibly easy to adjust the design of your own widgets without needing to manually code multiple layouts. Widget Areas Version 4 was often quite limiting when it came to aligning widgets in pages. Widgets could be dragged into a stacked, vertical list but that was typically as far as you could go in terms of design. Version 5 introduces a new concept called Widget Areas, which allow you to align multiple widgets in a variety of ways. Lets take a look! To create an area, you simply need to drag one widget on top of another. Blog - areas.mp4 By default, they'll align themselves into a grid, but can be realigned with ease by using the toolbar at the bottom of the page. The toolbar also holds controls for adjusting the width of widgets, and the gap between them: Blog - alignments.mp4 Widget Designs and Widget Areas in Version 5 make it incredibly easy to create a completely custom page in a matter of seconds. We're really excited for you to get your hands on these new tools in Invision Community 5, and are looking forward to seeing all of these new page designs in the wild, in the very near future! View full blog entry
  6. Introducing new Page Builder tools in Invision Community 5 Widgets are an incredibly powerful tool for displaying curated content of your choice on any page of your community - and despite the extensive array of settings for customizing their data, they've often been limited in terms of their design options. But this changes thanks to the new Page Builder tools in Invision Community 5! Widget Designs Previously in version 4, widgets would often have 2 designs: one for the main content area and a more minimal version for the sidebar. This worked well, but it meant your page was very limited in terms of design as you'd typically need to use the same table-like layout for most widgets. Anything beyond that would typically require a custom block to be coded, often with additional HTML or CSS. Version 5 offers much more customization by allowing you to change the design of each widget with the click of your mouse - no coding necessary! When dragging a widget onto your page, a new toolbar at the bottom of the page appears, holding all of the widget design options. Lets take a look at some below! Grid A familiar a very layout used elsewhere in the suite, the Grid design neatly aligns entries in a grid with a large cover photo sitting up top. A great combination of visual imagery alongside meta data such as entry descriptions. Featured A spacious list and a great way to feature content, pardon the pun. Wallpaper Perfect for content which includes uploaded cover photos or thumbnails! The Wallpaper design stretches each image to make it occupy the entire background, overlaid by a minimal amount of content. A subtle gradient sits behind the text to ensure it's easy to read, even on detailed images. Rows (table) The Rows design is a very familiar one, used very often throughout other areas of the suite. Content is displayed in a neat table, that collapses into a more compact design on small screens. Minimal Great for displaying a lot of content in a compact area! Minimal only shows primary information and hides meta data such as entry descriptions and stats. Great for sidebars, or areas with limited width. Minimal Grid The Minimal Grid design removes large meta information and displays content in a nice, compact grid. A nice option for displaying a lot of content while being cautious of vertical space. Carousel The Carousel option is quite unique because it can be applied in tandem with other widget designs, and is a perfect way to make the existing layouts even more compact. For example, by default, the Wallpaper design is aligned as a grid, but with the Carousel option enabled, the layout is converted into a carousel instead: Carousel-widget.mp4 Here's another example, using the Featured and Carousel options: Blog - featured carousel.mp4 Fun fact for developers: All of these designs use the exact same HTML structure; the only thing that differs is the class name on the parent element. This makes it incredibly easy to adjust the design of your own widgets without needing to manually code multiple layouts. Widget Areas Version 4 was often quite limiting when it came to aligning widgets in pages. Widgets could be dragged into a stacked, vertical list but that was typically as far as you could go in terms of design. Version 5 introduces a new concept called Widget Areas, which allow you to align multiple widgets in a variety of ways. Lets take a look! To create an area, you simply need to drag one widget on top of another. Blog - areas.mp4 By default, they'll align themselves into a grid, but can be realigned with ease by using the toolbar at the bottom of the page. The toolbar also holds controls for adjusting the width of widgets, and the gap between them: Blog - alignments.mp4 Widget Designs and Widget Areas in Version 5 make it incredibly easy to create a completely custom page in a matter of seconds. We're really excited for you to get your hands on these new tools in Invision Community 5, and are looking forward to seeing all of these new page designs in the wild, in the very near future! View full blog entry
  7. Introducing new Page Builder tools in Invision Community 5 Widgets are an incredibly powerful tool for displaying curated content of your choice on any page of your community - and despite the extensive array of settings for customizing their data, they've often been limited in terms of their design options. But this changes thanks to the new Page Builder tools in Invision Community 5! Widget Designs Previously in version 4, widgets would often have 2 designs: one for the main content area and a more minimal version for the sidebar. This worked well, but it meant your page was very limited in terms of design as you'd typically need to use the same table-like layout for most widgets. Anything beyond that would typically require a custom block to be coded, often with additional HTML or CSS. Version 5 offers much more customization by allowing you to change the design of each widget with the click of your mouse - no coding necessary! When dragging a widget onto your page, a new toolbar at the bottom of the page appears, holding all of the widget design options. Lets take a look at some below! Grid A familiar a very layout used elsewhere in the suite, the Grid design neatly aligns entries in a grid with a large cover photo sitting up top. A great combination of visual imagery alongside meta data such as entry descriptions. Featured A spacious list and a great way to feature content, pardon the pun. Wallpaper Perfect for content which includes uploaded cover photos or thumbnails! The Wallpaper design stretches each image to make it occupy the entire background, overlaid by a minimal amount of content. A subtle gradient sits behind the text to ensure it's easy to read, even on detailed images. Rows (table) The Rows design is a very familiar one, used very often throughout other areas of the suite. Content is displayed in a neat table, that collapses into a more compact design on small screens. Minimal Great for displaying a lot of content in a compact area! Minimal only shows primary information and hides meta data such as entry descriptions and stats. Great for sidebars, or areas with limited width. Minimal Grid The Minimal Grid design removes large meta information and displays content in a nice, compact grid. A nice option for displaying a lot of content while being cautious of vertical space. Carousel The Carousel option is quite unique because it can be applied in tandem with other widget designs, and is a perfect way to make the existing layouts even more compact. For example, by default, the Wallpaper design is aligned as a grid, but with the Carousel option enabled, the layout is converted into a carousel instead: Carousel-widget.mp4 Here's another example, using the Featured and Carousel options: Blog - featured carousel.mp4 Fun fact for developers: All of these designs use the exact same HTML structure; the only thing that differs is the class name on the parent element. This makes it incredibly easy to adjust the design of your own widgets without needing to manually code multiple layouts. Widget Areas Version 4 was often quite limiting when it came to aligning widgets in pages. Widgets could be dragged into a stacked, vertical list but that was typically as far as you could go in terms of design. Version 5 introduces a new concept called Widget Areas, which allow you to align multiple widgets in a variety of ways. Lets take a look! To create an area, you simply need to drag one widget on top of another. Blog - areas.mp4 By default, they'll align themselves into a grid, but can be realigned with ease by using the toolbar at the bottom of the page. The toolbar also holds controls for adjusting the width of widgets, and the gap between them: Blog - alignments.mp4 Widget Designs and Widget Areas in Version 5 make it incredibly easy to create a completely custom page in a matter of seconds. We're really excited for you to get your hands on these new tools in Invision Community 5, and are looking forward to seeing all of these new page designs in the wild, in the very near future! View full blog entry
  8. Introducing new Page Builder tools in Invision Community 5 Widgets are an incredibly powerful tool for displaying curated content of your choice on any page of your community - and despite the extensive array of settings for customizing their data, they've often been limited in terms of their design options. But this changes thanks to the new Page Builder tools in Invision Community 5! Widget Designs Previously in version 4, widgets would often have 2 designs: one for the main content area and a more minimal version for the sidebar. This worked well, but it meant your page was very limited in terms of design as you'd typically need to use the same table-like layout for most widgets. Anything beyond that would typically require a custom block to be coded, often with additional HTML or CSS. Version 5 offers much more customization by allowing you to change the design of each widget with the click of your mouse - no coding necessary! When dragging a widget onto your page, a new toolbar at the bottom of the page appears, holding all of the widget design options. Lets take a look at some below! Grid A familiar a very layout used elsewhere in the suite, the Grid design neatly aligns entries in a grid with a large cover photo sitting up top. A great combination of visual imagery alongside meta data such as entry descriptions. Featured A spacious list and a great way to feature content, pardon the pun. Wallpaper Perfect for content which includes uploaded cover photos or thumbnails! The Wallpaper design stretches each image to make it occupy the entire background, overlaid by a minimal amount of content. A subtle gradient sits behind the text to ensure it's easy to read, even on detailed images. Rows (table) The Rows design is a very familiar one, used very often throughout other areas of the suite. Content is displayed in a neat table, that collapses into a more compact design on small screens. Minimal Great for displaying a lot of content in a compact area! Minimal only shows primary information and hides meta data such as entry descriptions and stats. Great for sidebars, or areas with limited width. Minimal Grid The Minimal Grid design removes large meta information and displays content in a nice, compact grid. A nice option for displaying a lot of content while being cautious of vertical space. Carousel The Carousel option is quite unique because it can be applied in tandem with other widget designs, and is a perfect way to make the existing layouts even more compact. For example, by default, the Wallpaper design is aligned as a grid, but with the Carousel option enabled, the layout is converted into a carousel instead: Carousel-widget.mp4 Here's another example, using the Featured and Carousel options: Blog - featured carousel.mp4 Fun fact for developers: All of these designs use the exact same HTML structure; the only thing that differs is the class name on the parent element. This makes it incredibly easy to adjust the design of your own widgets without needing to manually code multiple layouts. Widget Areas Version 4 was often quite limiting when it came to aligning widgets in pages. Widgets could be dragged into a stacked, vertical list but that was typically as far as you could go in terms of design. Version 5 introduces a new concept called Widget Areas, which allow you to align multiple widgets in a variety of ways. Lets take a look! To create an area, you simply need to drag one widget on top of another. Blog - areas.mp4 By default, they'll align themselves into a grid, but can be realigned with ease by using the toolbar at the bottom of the page. The toolbar also holds controls for adjusting the width of widgets, and the gap between them: Blog - alignments.mp4 Widget Designs and Widget Areas in Version 5 make it incredibly easy to create a completely custom page in a matter of seconds. We're really excited for you to get your hands on these new tools in Invision Community 5, and are looking forward to seeing all of these new page designs in the wild, in the very near future!
  9. Introducing new Page Builder tools in Invision Community 5 Widgets are an incredibly powerful tool for displaying curated content of your choice on any page of your community - and despite the extensive array of settings for customizing their data, they've often been limited in terms of their design options. But this changes thanks to the new Page Builder tools in Invision Community 5! Widget Designs Previously in version 4, widgets would often have 2 designs: one for the main content area and a more minimal version for the sidebar. This worked well, but it meant your page was very limited in terms of design as you'd typically need to use the same table-like layout for most widgets. Anything beyond that would typically require a custom block to be coded, often with additional HTML or CSS. Version 5 offers much more customization by allowing you to change the design of each widget with the click of your mouse - no coding necessary! When dragging a widget onto your page, a new toolbar at the bottom of the page appears, holding all of the widget design options. Lets take a look at some below! Grid A familiar a very layout used elsewhere in the suite, the Grid design neatly aligns entries in a grid with a large cover photo sitting up top. A great combination of visual imagery alongside meta data such as entry descriptions. Featured A spacious list and a great way to feature content, pardon the pun. Wallpaper Perfect for content which includes uploaded cover photos or thumbnails! The Wallpaper design stretches each image to make it occupy the entire background, overlaid by a minimal amount of content. A subtle gradient sits behind the text to ensure it's easy to read, even on detailed images. Rows (table) The Rows design is a very familiar one, used very often throughout other areas of the suite. Content is displayed in a neat table, that collapses into a more compact design on small screens. Minimal Great for displaying a lot of content in a compact area! Minimal only shows primary information and hides meta data such as entry descriptions and stats. Great for sidebars, or areas with limited width. Minimal Grid The Minimal Grid design removes large meta information and displays content in a nice, compact grid. A nice option for displaying a lot of content while being cautious of vertical space. Carousel The Carousel option is quite unique because it can be applied in tandem with other widget designs, and is a perfect way to make the existing layouts even more compact. For example, by default, the Wallpaper design is aligned as a grid, but with the Carousel option enabled, the layout is converted into a carousel instead: Carousel-widget.mp4 Here's another example, using the Featured and Carousel options: Blog - featured carousel.mp4 Fun fact for developers: All of these designs use the exact same HTML structure; the only thing that differs is the class name on the parent element. This makes it incredibly easy to adjust the design of your own widgets without needing to manually code multiple layouts. Widget Areas Version 4 was often quite limiting when it came to aligning widgets in pages. Widgets could be dragged into a stacked, vertical list but that was typically as far as you could go in terms of design. Version 5 introduces a new concept called Widget Areas, which allow you to align multiple widgets in a variety of ways. Lets take a look! To create an area, you simply need to drag one widget on top of another. Blog - areas.mp4 By default, they'll align themselves into a grid, but can be realigned with ease by using the toolbar at the bottom of the page. The toolbar also holds controls for adjusting the width of widgets, and the gap between them: Blog - alignments.mp4 Widget Designs and Widget Areas in Version 5 make it incredibly easy to create a completely custom page in a matter of seconds. We're really excited for you to get your hands on these new tools in Invision Community 5, and are looking forward to seeing all of these new page designs in the wild, in the very near future!
  10. We recently announced the new Invision Community 5 editor which adds many new exciting features such as semantically correct header tags, custom boxes and more. As the new editor is a leap forward in technology, some legacy features had to be left behind. We received a lot of messages about these changes, and have created new tools based on that feedback to ensure you still have the tools you need. The new features are based around restricting some high level editor functionality for specific member groups and enabling an easy way to add custom embeds. Permission Levels Invision Community 5 puts a lot of new tools in the editor, including header tags, boxes and positioning tools. These are useful features, but perhaps you do not want your members changing the semantic structure of the page by adding H1 tags. Or maybe you don't want them being able to add custom boxes with colors. Based on this feedback, we have introduced a permission levels system. At the heart of the system lies three editor permission levels: Minimal, Standard and Advanced. Specific editor features are assigned to one or more levels. For example, you may only want header tags and content boxes to be for the 'advanced' permission level which only administrators can use. These permission levels are configurable via the Admin Control Panel. When is Each Restriction Level Used? Now that we have set up the permission levels, we need to apply them to member groups. We do this by simplying heading over to the Member Groups section of the Admin Control Panel. In the "Content" section of that form, there are two new options: Default Editor Restriction Level: This is the restriction level the group uses by default, for example in Forum Topics and Blog Posts. Editor Restriction Level for Comments: This is the level used for Comments (including Topic Replies) throughout the Community. When a member has multiple groups, they will use the most permissible editor setting out of all groups. Custom Embeds In response to news that the ability to toggle into 'source mode' and directly edit the underlying structure of the editor document was not implemented because editor technology has moved on, many people told us they used that feature to add custom iframes from specific services they use. We understood the need for custom embeds, and we've added the option to create iframe elements with any whitelisted URL from a link. CleanShot 2024-06-20 at 15.49.43.mp4 Additionally, iframes created this way have configurable height and width so you can resize to your liking This feature has two editor permissions: "Can Embed External Content," and "Can Convert Links to iframes". Adding iframes into a post can potentially be a security issue, so strong controls are needed to ensure there isn't abuse of this system. The editor will only allow links to be converted to iframes if the domain has been whitelisted. The whitelist exists in the new tab, Admin Control Panel > System > Posting & Editor > Embeds. The feature can also be entirely disabled from here. That wraps up this round of changes based on your comments. We hope that you enjoy this update to our Invision Community 5 editor and we always appreciate your feedback. View full blog entry
  11. We recently announced the new Invision Community 5 editor which adds many new exciting features such as semantically correct header tags, custom boxes and more. As the new editor is a leap forward in technology, some legacy features had to be left behind. We received a lot of messages about these changes, and have created new tools based on that feedback to ensure you still have the tools you need. The new features are based around restricting some high level editor functionality for specific member groups and enabling an easy way to add custom embeds. Permission Levels Invision Community 5 puts a lot of new tools in the editor, including header tags, boxes and positioning tools. These are useful features, but perhaps you do not want your members changing the semantic structure of the page by adding H1 tags. Or maybe you don't want them being able to add custom boxes with colors. Based on this feedback, we have introduced a permission levels system. At the heart of the system lies three editor permission levels: Minimal, Standard and Advanced. Specific editor features are assigned to one or more levels. For example, you may only want header tags and content boxes to be for the 'advanced' permission level which only administrators can use. These permission levels are configurable via the Admin Control Panel. When is Each Restriction Level Used? Now that we have set up the permission levels, we need to apply them to member groups. We do this by simplying heading over to the Member Groups section of the Admin Control Panel. In the "Content" section of that form, there are two new options: Default Editor Restriction Level: This is the restriction level the group uses by default, for example in Forum Topics and Blog Posts. Editor Restriction Level for Comments: This is the level used for Comments (including Topic Replies) throughout the Community. When a member has multiple groups, they will use the most permissible editor setting out of all groups. Custom Embeds In response to news that the ability to toggle into 'source mode' and directly edit the underlying structure of the editor document was not implemented because editor technology has moved on, many people told us they used that feature to add custom iframes from specific services they use. We understood the need for custom embeds, and we've added the option to create iframe elements with any whitelisted URL from a link. CleanShot 2024-06-20 at 15.49.43.mp4 Additionally, iframes created this way have configurable height and width so you can resize to your liking This feature has two editor permissions: "Can Embed External Content," and "Can Convert Links to iframes". Adding iframes into a post can potentially be a security issue, so strong controls are needed to ensure there isn't abuse of this system. The editor will only allow links to be converted to iframes if the domain has been whitelisted. The whitelist exists in the new tab, Admin Control Panel > System > Posting & Editor > Embeds. The feature can also be entirely disabled from here. That wraps up this round of changes based on your comments. We hope that you enjoy this update to our Invision Community 5 editor and we always appreciate your feedback. View full blog entry
  12. We recently announced the new Invision Community 5 editor which adds many new exciting features such as semantically correct header tags, custom boxes and more. As the new editor is a leap forward in technology, some legacy features had to be left behind. We received a lot of messages about these changes, and have created new tools based on that feedback to ensure you still have the tools you need. The new features are based around restricting some high level editor functionality for specific member groups and enabling an easy way to add custom embeds. Permission Levels Invision Community 5 puts a lot of new tools in the editor, including header tags, boxes and positioning tools. These are useful features, but perhaps you do not want your members changing the semantic structure of the page by adding H1 tags. Or maybe you don't want them being able to add custom boxes with colors. Based on this feedback, we have introduced a permission levels system. At the heart of the system lies three editor permission levels: Minimal, Standard and Advanced. Specific editor features are assigned to one or more levels. For example, you may only want header tags and content boxes to be for the 'advanced' permission level which only administrators can use. These permission levels are configurable via the Admin Control Panel. When is Each Restriction Level Used? Now that we have set up the permission levels, we need to apply them to member groups. We do this by simplying heading over to the Member Groups section of the Admin Control Panel. In the "Content" section of that form, there are two new options: Default Editor Restriction Level: This is the restriction level the group uses by default, for example in Forum Topics and Blog Posts. Editor Restriction Level for Comments: This is the level used for Comments (including Topic Replies) throughout the Community. When a member has multiple groups, they will use the most permissible editor setting out of all groups. Custom Embeds In response to news that the ability to toggle into 'source mode' and directly edit the underlying structure of the editor document was not implemented because editor technology has moved on, many people told us they used that feature to add custom iframes from specific services they use. We understood the need for custom embeds, and we've added the option to create iframe elements with any whitelisted URL from a link. CleanShot 2024-06-20 at 15.49.43.mp4 Additionally, iframes created this way have configurable height and width so you can resize to your liking This feature has two editor permissions: "Can Embed External Content," and "Can Convert Links to iframes". Adding iframes into a post can potentially be a security issue, so strong controls are needed to ensure there isn't abuse of this system. The editor will only allow links to be converted to iframes if the domain has been whitelisted. The whitelist exists in the new tab, Admin Control Panel > System > Posting & Editor > Embeds. The feature can also be entirely disabled from here. That wraps up this round of changes based on your comments. We hope that you enjoy this update to our Invision Community 5 editor and we always appreciate your feedback. View full blog entry
  13. We recently announced the new Invision Community 5 editor which adds many new exciting features such as semantically correct header tags, custom boxes and more. As the new editor is a leap forward in technology, some legacy features had to be left behind. We received a lot of messages about these changes, and have created new tools based on that feedback to ensure you still have the tools you need. The new features are based around restricting some high level editor functionality for specific member groups and enabling an easy way to add custom embeds. Permission Levels Invision Community 5 puts a lot of new tools in the editor, including header tags, boxes and positioning tools. These are useful features, but perhaps you do not want your members changing the semantic structure of the page by adding H1 tags. Or maybe you don't want them being able to add custom boxes with colors. Based on this feedback, we have introduced a permission levels system. At the heart of the system lies three editor permission levels: Minimal, Standard and Advanced. Specific editor features are assigned to one or more levels. For example, you may only want header tags and content boxes to be for the 'advanced' permission level which only administrators can use. These permission levels are configurable via the Admin Control Panel. When is Each Restriction Level Used? Now that we have set up the permission levels, we need to apply them to member groups. We do this by simplying heading over to the Member Groups section of the Admin Control Panel. In the "Content" section of that form, there are two new options: Default Editor Restriction Level: This is the restriction level the group uses by default, for example in Forum Topics and Blog Posts. Editor Restriction Level for Comments: This is the level used for Comments (including Topic Replies) throughout the Community. When a member has multiple groups, they will use the most permissible editor setting out of all groups. Custom Embeds In response to news that the ability to toggle into 'source mode' and directly edit the underlying structure of the editor document was not implemented because editor technology has moved on, many people told us they used that feature to add custom iframes from specific services they use. We understood the need for custom embeds, and we've added the option to create iframe elements with any whitelisted URL from a link. CleanShot 2024-06-20 at 15.49.43.mp4 Additionally, iframes created this way have configurable height and width so you can resize to your liking This feature has two editor permissions: "Can Embed External Content," and "Can Convert Links to iframes". Adding iframes into a post can potentially be a security issue, so strong controls are needed to ensure there isn't abuse of this system. The editor will only allow links to be converted to iframes if the domain has been whitelisted. The whitelist exists in the new tab, Admin Control Panel > System > Posting & Editor > Embeds. The feature can also be entirely disabled from here. That wraps up this round of changes based on your comments. We hope that you enjoy this update to our Invision Community 5 editor and we always appreciate your feedback.
  14. We recently announced the new Invision Community 5 editor which adds many new exciting features such as semantically correct header tags, custom boxes and more. As the new editor is a leap forward in technology, some legacy features had to be left behind. We received a lot of messages about these changes, and have created new tools based on that feedback to ensure you still have the tools you need. The new features are based around restricting some high level editor functionality for specific member groups and enabling an easy way to add custom embeds. Permission Levels Invision Community 5 puts a lot of new tools in the editor, including header tags, boxes and positioning tools. These are useful features, but perhaps you do not want your members changing the semantic structure of the page by adding H1 tags. Or maybe you don't want them being able to add custom boxes with colors. Based on this feedback, we have introduced a permission levels system. At the heart of the system lies three editor permission levels: Minimal, Standard and Advanced. Specific editor features are assigned to one or more levels. For example, you may only want header tags and content boxes to be for the 'advanced' permission level which only administrators can use. These permission levels are configurable via the Admin Control Panel. When is Each Restriction Level Used? Now that we have set up the permission levels, we need to apply them to member groups. We do this by simplying heading over to the Member Groups section of the Admin Control Panel. In the "Content" section of that form, there are two new options: Default Editor Restriction Level: This is the restriction level the group uses by default, for example in Forum Topics and Blog Posts. Editor Restriction Level for Comments: This is the level used for Comments (including Topic Replies) throughout the Community. When a member has multiple groups, they will use the most permissible editor setting out of all groups. Custom Embeds In response to news that the ability to toggle into 'source mode' and directly edit the underlying structure of the editor document was not implemented because editor technology has moved on, many people told us they used that feature to add custom iframes from specific services they use. We understood the need for custom embeds, and we've added the option to create iframe elements with any whitelisted URL from a link. CleanShot 2024-06-20 at 15.49.43.mp4 Additionally, iframes created this way have configurable height and width so you can resize to your liking This feature has two editor permissions: "Can Embed External Content," and "Can Convert Links to iframes". Adding iframes into a post can potentially be a security issue, so strong controls are needed to ensure there isn't abuse of this system. The editor will only allow links to be converted to iframes if the domain has been whitelisted. The whitelist exists in the new tab, Admin Control Panel > System > Posting & Editor > Embeds. The feature can also be entirely disabled from here. That wraps up this round of changes based on your comments. We hope that you enjoy this update to our Invision Community 5 editor and we always appreciate your feedback.
  15. Invision Community v5 takes a fresh approach to tagging and content discovery. It overhauls the concept to bring content across different sections together with a beautiful new tag page. Tagging is a powerful concept but underused with Invision Community 4 due to overly complex interfaces in different areas of the suite, a confusing open tagging model option and no real benefit in content discovery beyond a simple list of content items. A driving force behind Invision Community 5 is the question of how we can help time-pressured community members find the content that most interests them. Invision Community has robust taxonomy through forum and category structures, but what about content in less visible areas such as Blogs, galleries or Events? How can we bring those together to homogenise the type of content and focus on the content itself? Taxonomy via tagging across all applications in the community suite is the answer. However, we needed to re-approach how tagging was implemented in the Invision Community to bring our new vision to life. Out with the old The current tagging system is implemented loosely, allowing open tagging, which is more akin to hashtags than high-level taxonomy. Allowing forums, albums, and blog categories to define their own tags turns tagging into more of a status label, which does nothing to help bring disparate content together. In with the new With a new focus on taxonomy and content discovery, we set about rebuilding tagging for Invision Community 5. The UI to tag items is the same, but now each defined, globally available tag has its own page with cover image and ability to feature items within that tag page. A uniform approach to different content items in the UI breaks down the barrier between content types and focuses solely on the content. Tags featured on its page are automatically displayed on the community Featured Content page. Finally, tags can now be followed, allowing your community to get a daily or weekly digest of all new tagged items, bringing people back to read more of the content they love. Let’s take a closer look In Invision Community 5, all tags are defined in the Admin Control Panel. The ability to use open tagging and per-node tags has been removed, but don’t worry—the upgrade system will offer conversion for those tags. Once defined, the tags are available for all content types and feature on a dedicated new tag page. This page features cover photos and more information on the tag via a description. Content from across your suite will be displayed on this page. If a single piece of content has multiple tags, it will appear on every relevant tag page making it easy to have content in multiple areas. If you want to permanently or temporarily feature individual content, perhaps your latest news or product release, you can do so right from the tag page. Featured content will show on the community’s Featured Content Page. Blurring the lines Now that we have an attractive and focused page for each tag, we can start to blur the lines between applications and, indeed, forums and categories, offering a new way to organise content. For some communities, the need for multiple forums to categorise content is diminished, and instead, tagging can be used to separate and find content from across the community. Tags can be featured in the menu system, offering new ways into your community for new visitors, regular community members, and even those who visit daily. Invision Community 5 is fearless in challenging past decisions or streamlining features to make them stronger and more focused. Our new approach to tagging takes a vague and underutilised concept and pushes it front and centre in any content strategy. How will you use it in your community?
  16. Invision Community v5 takes a fresh approach to tagging and content discovery. It overhauls the concept to bring content across different sections together with a beautiful new tag page. Tagging is a powerful concept but underused with Invision Community 4 due to overly complex interfaces in different areas of the suite, a confusing open tagging model option and no real benefit in content discovery beyond a simple list of content items. A driving force behind Invision Community 5 is the question of how we can help time-pressured community members find the content that most interests them. Invision Community has robust taxonomy through forum and category structures, but what about content in less visible areas such as Blogs, galleries or Events? How can we bring those together to homogenise the type of content and focus on the content itself? Taxonomy via tagging across all applications in the community suite is the answer. However, we needed to re-approach how tagging was implemented in the Invision Community to bring our new vision to life. Out with the old The current tagging system is implemented loosely, allowing open tagging, which is more akin to hashtags than high-level taxonomy. Allowing forums, albums, and blog categories to define their own tags turns tagging into more of a status label, which does nothing to help bring disparate content together. In with the new With a new focus on taxonomy and content discovery, we set about rebuilding tagging for Invision Community 5. The UI to tag items is the same, but now each defined, globally available tag has its own page with cover image and ability to feature items within that tag page. A uniform approach to different content items in the UI breaks down the barrier between content types and focuses solely on the content. Tags featured on its page are automatically displayed on the community Featured Content page. Finally, tags can now be followed, allowing your community to get a daily or weekly digest of all new tagged items, bringing people back to read more of the content they love. Let’s take a closer look In Invision Community 5, all tags are defined in the Admin Control Panel. The ability to use open tagging and per-node tags has been removed, but don’t worry—the upgrade system will offer conversion for those tags. Once defined, the tags are available for all content types and feature on a dedicated new tag page. This page features cover photos and more information on the tag via a description. Content from across your suite will be displayed on this page. If a single piece of content has multiple tags, it will appear on every relevant tag page making it easy to have content in multiple areas. If you want to permanently or temporarily feature individual content, perhaps your latest news or product release, you can do so right from the tag page. Featured content will show on the community’s Featured Content Page. Blurring the lines Now that we have an attractive and focused page for each tag, we can start to blur the lines between applications and, indeed, forums and categories, offering a new way to organise content. For some communities, the need for multiple forums to categorise content is diminished, and instead, tagging can be used to separate and find content from across the community. Tags can be featured in the menu system, offering new ways into your community for new visitors, regular community members, and even those who visit daily. Invision Community 5 is fearless in challenging past decisions or streamlining features to make them stronger and more focused. Our new approach to tagging takes a vague and underutilised concept and pushes it front and centre in any content strategy. How will you use it in your community?
  17. Invision Community v5 takes a fresh approach to tagging and content discovery. It overhauls the concept to bring content across different sections together with a beautiful new tag page. Tagging is a powerful concept but underused with Invision Community 4 due to overly complex interfaces in different areas of the suite, a confusing open tagging model option and no real benefit in content discovery beyond a simple list of content items. A driving force behind Invision Community 5 is the question of how we can help time-pressured community members find the content that most interests them. Invision Community has robust taxonomy through forum and category structures, but what about content in less visible areas such as Blogs, galleries or Events? How can we bring those together to homogenise the type of content and focus on the content itself? Taxonomy via tagging across all applications in the community suite is the answer. However, we needed to re-approach how tagging was implemented in the Invision Community to bring our new vision to life. Out with the old The current tagging system is implemented loosely, allowing open tagging, which is more akin to hashtags than high-level taxonomy. Allowing forums, albums, and blog categories to define their own tags turns tagging into more of a status label, which does nothing to help bring disparate content together. In with the new With a new focus on taxonomy and content discovery, we set about rebuilding tagging for Invision Community 5. The UI to tag items is the same, but now each defined, globally available tag has its own page with cover image and ability to feature items within that tag page. A uniform approach to different content items in the UI breaks down the barrier between content types and focuses solely on the content. Tags featured on its page are automatically displayed on the community Featured Content page. Finally, tags can now be followed, allowing your community to get a daily or weekly digest of all new tagged items, bringing people back to read more of the content they love. Let’s take a closer look In Invision Community 5, all tags are defined in the Admin Control Panel. The ability to use open tagging and per-node tags has been removed, but don’t worry—the upgrade system will offer conversion for those tags. Once defined, the tags are available for all content types and feature on a dedicated new tag page. This page features cover photos and more information on the tag via a description. Content from across your suite will be displayed on this page. If a single piece of content has multiple tags, it will appear on every relevant tag page making it easy to have content in multiple areas. If you want to permanently or temporarily feature individual content, perhaps your latest news or product release, you can do so right from the tag page. Featured content will show on the community’s Featured Content Page. Blurring the lines Now that we have an attractive and focused page for each tag, we can start to blur the lines between applications and, indeed, forums and categories, offering a new way to organise content. For some communities, the need for multiple forums to categorise content is diminished, and instead, tagging can be used to separate and find content from across the community. Tags can be featured in the menu system, offering new ways into your community for new visitors, regular community members, and even those who visit daily. Invision Community 5 is fearless in challenging past decisions or streamlining features to make them stronger and more focused. Our new approach to tagging takes a vague and underutilised concept and pushes it front and centre in any content strategy. How will you use it in your community? View full blog entry
  18. Invision Community v5 takes a fresh approach to tagging and content discovery. It overhauls the concept to bring content across different sections together with a beautiful new tag page. Tagging is a powerful concept but underused with Invision Community 4 due to overly complex interfaces in different areas of the suite, a confusing open tagging model option and no real benefit in content discovery beyond a simple list of content items. A driving force behind Invision Community 5 is the question of how we can help time-pressured community members find the content that most interests them. Invision Community has robust taxonomy through forum and category structures, but what about content in less visible areas such as Blogs, galleries or Events? How can we bring those together to homogenise the type of content and focus on the content itself? Taxonomy via tagging across all applications in the community suite is the answer. However, we needed to re-approach how tagging was implemented in the Invision Community to bring our new vision to life. Out with the old The current tagging system is implemented loosely, allowing open tagging, which is more akin to hashtags than high-level taxonomy. Allowing forums, albums, and blog categories to define their own tags turns tagging into more of a status label, which does nothing to help bring disparate content together. In with the new With a new focus on taxonomy and content discovery, we set about rebuilding tagging for Invision Community 5. The UI to tag items is the same, but now each defined, globally available tag has its own page with cover image and ability to feature items within that tag page. A uniform approach to different content items in the UI breaks down the barrier between content types and focuses solely on the content. Tags featured on its page are automatically displayed on the community Featured Content page. Finally, tags can now be followed, allowing your community to get a daily or weekly digest of all new tagged items, bringing people back to read more of the content they love. Let’s take a closer look In Invision Community 5, all tags are defined in the Admin Control Panel. The ability to use open tagging and per-node tags has been removed, but don’t worry—the upgrade system will offer conversion for those tags. Once defined, the tags are available for all content types and feature on a dedicated new tag page. This page features cover photos and more information on the tag via a description. Content from across your suite will be displayed on this page. If a single piece of content has multiple tags, it will appear on every relevant tag page making it easy to have content in multiple areas. If you want to permanently or temporarily feature individual content, perhaps your latest news or product release, you can do so right from the tag page. Featured content will show on the community’s Featured Content Page. Blurring the lines Now that we have an attractive and focused page for each tag, we can start to blur the lines between applications and, indeed, forums and categories, offering a new way to organise content. For some communities, the need for multiple forums to categorise content is diminished, and instead, tagging can be used to separate and find content from across the community. Tags can be featured in the menu system, offering new ways into your community for new visitors, regular community members, and even those who visit daily. Invision Community 5 is fearless in challenging past decisions or streamlining features to make them stronger and more focused. Our new approach to tagging takes a vague and underutilised concept and pushes it front and centre in any content strategy. How will you use it in your community? View full blog entry
  19. Invision Community v5 takes a fresh approach to tagging and content discovery. It overhauls the concept to bring content across different sections together with a beautiful new tag page. Tagging is a powerful concept but underused with Invision Community 4 due to overly complex interfaces in different areas of the suite, a confusing open tagging model option and no real benefit in content discovery beyond a simple list of content items. A driving force behind Invision Community 5 is the question of how we can help time-pressured community members find the content that most interests them. Invision Community has robust taxonomy through forum and category structures, but what about content in less visible areas such as Blogs, galleries or Events? How can we bring those together to homogenise the type of content and focus on the content itself? Taxonomy via tagging across all applications in the community suite is the answer. However, we needed to re-approach how tagging was implemented in the Invision Community to bring our new vision to life. Out with the old The current tagging system is implemented loosely, allowing open tagging, which is more akin to hashtags than high-level taxonomy. Allowing forums, albums, and blog categories to define their own tags turns tagging into more of a status label, which does nothing to help bring disparate content together. In with the new With a new focus on taxonomy and content discovery, we set about rebuilding tagging for Invision Community 5. The UI to tag items is the same, but now each defined, globally available tag has its own page with cover image and ability to feature items within that tag page. A uniform approach to different content items in the UI breaks down the barrier between content types and focuses solely on the content. Tags featured on its page are automatically displayed on the community Featured Content page. Finally, tags can now be followed, allowing your community to get a daily or weekly digest of all new tagged items, bringing people back to read more of the content they love. Let’s take a closer look In Invision Community 5, all tags are defined in the Admin Control Panel. The ability to use open tagging and per-node tags has been removed, but don’t worry—the upgrade system will offer conversion for those tags. Once defined, the tags are available for all content types and feature on a dedicated new tag page. This page features cover photos and more information on the tag via a description. Content from across your suite will be displayed on this page. If a single piece of content has multiple tags, it will appear on every relevant tag page making it easy to have content in multiple areas. If you want to permanently or temporarily feature individual content, perhaps your latest news or product release, you can do so right from the tag page. Featured content will show on the community’s Featured Content Page. Blurring the lines Now that we have an attractive and focused page for each tag, we can start to blur the lines between applications and, indeed, forums and categories, offering a new way to organise content. For some communities, the need for multiple forums to categorise content is diminished, and instead, tagging can be used to separate and find content from across the community. Tags can be featured in the menu system, offering new ways into your community for new visitors, regular community members, and even those who visit daily. Invision Community 5 is fearless in challenging past decisions or streamlining features to make them stronger and more focused. Our new approach to tagging takes a vague and underutilised concept and pushes it front and centre in any content strategy. How will you use it in your community? View full blog entry
  20. As we find ourselves with our toes over the precipice of June; signalling the half way point of the year, I thought it's a good time for an update. Apologies southern hemisphere. Invision Community 5 has been in alpha testing for a while, and a small group have found a good number of bugs, and offered their thoughts and suggestions, some of which we've implemented. During this time we've wrapped up the new editor, a boat load of UI improvements and more. We are now ready for the next stage, which is to give our alpha testers their own Cloud v5 to test with. This opens up testing for the Admin CP, and all areas without using developer mode. v5 has a lot of changes to how CSS, JS and resources are managed. They are now built when we build the apps, and should never need rebuilding. We also store compiled templates now, so lots of slow eval() calls are no longer needed. In brief testing locally, it has made the entire platform super-fast. We are choosing to use a Cloud v5 to test with, rather than a traditional download for two reasons. The first is that using our hosting platform means we don't have to chase down issues with PHP, MySQL and unix versions which can be time consuming in the early stages. The second is that we're still writing the new build code, so we can't actually produce a versioned zip just yet. 😂 But fear not, downloadable versions will be coming at some point. We're aiming to have this alpha demo system ready next week, so if you want to help alpha test, drop a comment below. I want to keep the first round (1-2 weeks) fairly small or it becomes overwhelming sifting through the feedback and bugs but please do register your interest. In terms of functionality, we're wrapping up the tagging changes; I'd expect a blog on that next week. The final parts of the Pages app are coming together. We even tested an upgrade of this site to v5 to see how the Pages built pages looked, and much to all of our relief, it looks great with just a few CSS classes needing updating. It's been a long journey - and a little longer than we'd first hoped but we're getting closer to betas when the fun really starts. We're really proud of v5 and we hope you like what we've created.
  21. As we find ourselves with our toes over the precipice of June; signalling the half way point of the year, I thought it's a good time for an update. Apologies southern hemisphere. Invision Community 5 has been in alpha testing for a while, and a small group have found a good number of bugs, and offered their thoughts and suggestions, some of which we've implemented. During this time we've wrapped up the new editor, a boat load of UI improvements and more. We are now ready for the next stage, which is to give our alpha testers their own Cloud v5 to test with. This opens up testing for the Admin CP, and all areas without using developer mode. v5 has a lot of changes to how CSS, JS and resources are managed. They are now built when we build the apps, and should never need rebuilding. We also store compiled templates now, so lots of slow eval() calls are no longer needed. In brief testing locally, it has made the entire platform super-fast. We are choosing to use a Cloud v5 to test with, rather than a traditional download for two reasons. The first is that using our hosting platform means we don't have to chase down issues with PHP, MySQL and unix versions which can be time consuming in the early stages. The second is that we're still writing the new build code, so we can't actually produce a versioned zip just yet. 😂 But fear not, downloadable versions will be coming at some point. We're aiming to have this alpha demo system ready next week, so if you want to help alpha test, drop a comment below. I want to keep the first round (1-2 weeks) fairly small or it becomes overwhelming sifting through the feedback and bugs but please do register your interest. In terms of functionality, we're wrapping up the tagging changes; I'd expect a blog on that next week. The final parts of the Pages app are coming together. We even tested an upgrade of this site to v5 to see how the Pages built pages looked, and much to all of our relief, it looks great with just a few CSS classes needing updating. It's been a long journey - and a little longer than we'd first hoped but we're getting closer to betas when the fun really starts. We're really proud of v5 and we hope you like what we've created.
  22. As we find ourselves with our toes over the precipice of June; signalling the half way point of the year, I thought it's a good time for an update. Apologies southern hemisphere. Invision Community 5 has been in alpha testing for a while, and a small group have found a good number of bugs, and offered their thoughts and suggestions, some of which we've implemented. During this time we've wrapped up the new editor, a boat load of UI improvements and more. We are now ready for the next stage, which is to give our alpha testers their own Cloud v5 to test with. This opens up testing for the Admin CP, and all areas without using developer mode. v5 has a lot of changes to how CSS, JS and resources are managed. They are now built when we build the apps, and should never need rebuilding. We also store compiled templates now, so lots of slow eval() calls are no longer needed. In brief testing locally, it has made the entire platform super-fast. We are choosing to use a Cloud v5 to test with, rather than a traditional download for two reasons. The first is that using our hosting platform means we don't have to chase down issues with PHP, MySQL and unix versions which can be time consuming in the early stages. The second is that we're still writing the new build code, so we can't actually produce a versioned zip just yet. 😂 But fear not, downloadable versions will be coming at some point. We're aiming to have this alpha demo system ready next week, so if you want to help alpha test, drop a comment below. I want to keep the first round (1-2 weeks) fairly small or it becomes overwhelming sifting through the feedback and bugs but please do register your interest. In terms of functionality, we're wrapping up the tagging changes; I'd expect a blog on that next week. The final parts of the Pages app are coming together. We even tested an upgrade of this site to v5 to see how the Pages built pages looked, and much to all of our relief, it looks great with just a few CSS classes needing updating. It's been a long journey - and a little longer than we'd first hoped but we're getting closer to betas when the fun really starts. We're really proud of v5 and we hope you like what we've created.
  23. Invision Community 5 has a brand new editing experience powered by a lightweight, fast React text editor built for mobile and modern browsers. The venerable CKEditor v4 at the core of our current editor is starting to show its age, so we wanted a clean slate with Invision Community v5 with an editor that was optimized for mobile use, easily extensible and had a feature set that would take us into the next era of Invision Community and beyond. The obvious choice was to consider the latest version of CKEditor, but it didn't fit our needs as it wasn't easily extensible, external plug-ins would no longer be possible, and its large footprint would affect page speed scores and be painful to use with a mobile connection. After a long search, we settled on Tiptap as the base for our editor. Written in React, loaded in chunks when needed for optimal performance and with many APIs and extensibility options, it was the perfect fit. Aside from the technical improvements, the editor offers new tools and a great base for writing our own plugins. I'll walk you through the main features throughout this blog. If you want a more technical deep dive, then please see my development blog. The Toolbar The toolbar has been redesigned to put the most commonly used styles first, with the least used styles and functions into an ellipses menu. The new paragraph menu contains the header styles, as well as the code block. The plus menu adds lists, boxes and quotes. The benefit of this new compact menu is that it displays just the same on mobile. Currently, there are different editor styles for desktops, tablets and mobiles with some style buttons removed to save space. With Invision Community 5, this is no longer the case. Even the smallest display gets all the functionality. mobile-toolbar.mp4 Emojis & Icons Emojis have become a great way to embellish writing and express emotion. The new emoji picker has been modernized with larger emojis and tooltips to showcase the emoji shortcodes. The Icons tab, new for Invision Community 5, allows you to add Font Awesome Icons directly to your content. Lastly, both the emoji selector and the shortcode suggestion dropdown support arrow-key navigation, so you don't have to move your hands from the keyboard to the mouse. Content Boxes The feature I'm personally most excited about is boxes. The concept started as an abstraction of spoilers because sometimes you just want "a box" - a section that stands out from the rest of the content, something we do manually in our documentation and guides on this site. Each box has a tile and the following options: Expandable - You can mark a box as "expandable" which is functionally the same as a spoiler. One improvement is that expandable boxes use native HTML details and summary elements instead of plain Javascript animated divs. Colors - You can optionally keep it grey on grey like spoilers, but I think that's so boring! The colors automatically adjust to the theme colors, so it will look great in dark and light mode. Float (left/right/none) - You can make the box align to the left or right of other content just like you can for images Width - When the box is floated, you can set the width to big, medium or small. Boxes.mp4 Link Expansion Invision Community has long expanded some links, such as YouTube, offering more context or even a mini-player where appropriate. With Invision Community 5, we've added support for embedding dynamic link previews using site metadata. This is a preview of a topic on our forum. For those unaware, the Open Graph (OG) Protocol is essentially a way webpages can specify a title, image, and description to be dynamically embedded on another platform. This is the underlying technology when you see the link preview in Meta, X, Slack, or iMessage. Code Blocks and Inline Code The new editor adds inline, syntax-highlighted code blocks and inline code. Both formats can be applied via the toolbar, or optionally, you can wrap text in a single backtick (`) to convert it to an inline code block or triple backticks (```) to convert it to a code block. The code blocks also support numerous languages for syntax highlighting, including a new custom highlighter for the Invision HTML Template Syntax (Invision Community theme creators and application developers, you're welcome!) Semantic Headings and Relative Sizes Invision Community 5 adds a block selector with headings 1 through 6 in the new editor. It's possibly the most common request I hear so that people can use consistent styling rather than just big bold text in a paragraph tag. Semantic headings are also ideal for SEO and accessibility. In addition to the block selector, you can create headings with the corresponding markdown shortcut. Consecutive pound signs (#) at the start of a line followed by a space (the number of pounds corresponds to the "level" of the heading). For example ### creates a Heading 3 (<h3/>) creates the heading for you. Using clear header tags means screen readers and search engines can better understand your content as using absolute font sizes, such as 16px, can make it unclear what type of element is actually being used. Is it a heading or just a paragraph with large bold text? Furthermore, you may want different sizes depending on the content and device type. Mobile devices may benefit from a large base font size. So we added percent-based font sizes which change the font size based on whatever the default would be for that block. text-menus.mp4 Further UX Improvements The new editor in Invision Community 5 has several tangible improvements, including a mobile-first design. In the current editor, some functionality was hidden behind modals and double clicks, which are either not obvious on mobile devices or not possible at all. The new editor no longer relies on modals and instead uses buttons and dropdown menus that work perfectly with mobile and other touch-based devices. New Line Arrows For block content, such as boxes, images and quotes, we've added the ability to create a new line before or after the block with the click of a button. This was an issue of frustration for mobile and touch devices where it was not always clear where the cursor was and a finger is a much less accurate aiming device! Sticky Toolbar Anyone who has authored a long piece of content knows the pain of scrolling up and down to get the toolbar in view. To make writing longer content less stressful, we've made the toolbar sticky so that it will always be fixed at the top of the editor after scrolling down. sticky-toolbar.mp4 Markdown Style Shortcuts One common request is to support markdown in the editor. While we opted not to include full markdown support, the new editor recognizes many markdown-style formatting shortcuts. markdown.mp4 Colors A common challenge with rich text editors on sites with multiple themes is colors often need to consistently look right across all themes. This is even more important with Invision Community 5, as it has a native dark mode feature. For this reason, we opted to offer a reduced set of color options that all adapt dynamically to the theme. I mentioned this about box colors above, but this is also true of the font color. The difference in shade is slight, but it's very noticeable without it. Toggling between light and dark mode will never produce unreadable text. colors.mp4 We can't wait for you to try the new editor; it has already been very popular with our small testing group. Which feature are you most looking forward to trying? View full blog entry
  24. Invision Community 5 has a brand new editing experience powered by a lightweight, fast React text editor built for mobile and modern browsers. The venerable CKEditor v4 at the core of our current editor is starting to show its age, so we wanted a clean slate with Invision Community v5 with an editor that was optimized for mobile use, easily extensible and had a feature set that would take us into the next era of Invision Community and beyond. The obvious choice was to consider the latest version of CKEditor, but it didn't fit our needs as it wasn't easily extensible, external plug-ins would no longer be possible, and its large footprint would affect page speed scores and be painful to use with a mobile connection. After a long search, we settled on Tiptap as the base for our editor. Written in React, loaded in chunks when needed for optimal performance and with many APIs and extensibility options, it was the perfect fit. Aside from the technical improvements, the editor offers new tools and a great base for writing our own plugins. I'll walk you through the main features throughout this blog. If you want a more technical deep dive, then please see my development blog. The Toolbar The toolbar has been redesigned to put the most commonly used styles first, with the least used styles and functions into an ellipses menu. The new paragraph menu contains the header styles, as well as the code block. The plus menu adds lists, boxes and quotes. The benefit of this new compact menu is that it displays just the same on mobile. Currently, there are different editor styles for desktops, tablets and mobiles with some style buttons removed to save space. With Invision Community 5, this is no longer the case. Even the smallest display gets all the functionality. mobile-toolbar.mp4 Emojis & Icons Emojis have become a great way to embellish writing and express emotion. The new emoji picker has been modernized with larger emojis and tooltips to showcase the emoji shortcodes. The Icons tab, new for Invision Community 5, allows you to add Font Awesome Icons directly to your content. Lastly, both the emoji selector and the shortcode suggestion dropdown support arrow-key navigation, so you don't have to move your hands from the keyboard to the mouse. Content Boxes The feature I'm personally most excited about is boxes. The concept started as an abstraction of spoilers because sometimes you just want "a box" - a section that stands out from the rest of the content, something we do manually in our documentation and guides on this site. Each box has a tile and the following options: Expandable - You can mark a box as "expandable" which is functionally the same as a spoiler. One improvement is that expandable boxes use native HTML details and summary elements instead of plain Javascript animated divs. Colors - You can optionally keep it grey on grey like spoilers, but I think that's so boring! The colors automatically adjust to the theme colors, so it will look great in dark and light mode. Float (left/right/none) - You can make the box align to the left or right of other content just like you can for images Width - When the box is floated, you can set the width to big, medium or small. Boxes.mp4 Link Expansion Invision Community has long expanded some links, such as YouTube, offering more context or even a mini-player where appropriate. With Invision Community 5, we've added support for embedding dynamic link previews using site metadata. This is a preview of a topic on our forum. For those unaware, the Open Graph (OG) Protocol is essentially a way webpages can specify a title, image, and description to be dynamically embedded on another platform. This is the underlying technology when you see the link preview in Meta, X, Slack, or iMessage. Code Blocks and Inline Code The new editor adds inline, syntax-highlighted code blocks and inline code. Both formats can be applied via the toolbar, or optionally, you can wrap text in a single backtick (`) to convert it to an inline code block or triple backticks (```) to convert it to a code block. The code blocks also support numerous languages for syntax highlighting, including a new custom highlighter for the Invision HTML Template Syntax (Invision Community theme creators and application developers, you're welcome!) Semantic Headings and Relative Sizes Invision Community 5 adds a block selector with headings 1 through 6 in the new editor. It's possibly the most common request I hear so that people can use consistent styling rather than just big bold text in a paragraph tag. Semantic headings are also ideal for SEO and accessibility. In addition to the block selector, you can create headings with the corresponding markdown shortcut. Consecutive pound signs (#) at the start of a line followed by a space (the number of pounds corresponds to the "level" of the heading). For example ### creates a Heading 3 (<h3/>) creates the heading for you. Using clear header tags means screen readers and search engines can better understand your content as using absolute font sizes, such as 16px, can make it unclear what type of element is actually being used. Is it a heading or just a paragraph with large bold text? Furthermore, you may want different sizes depending on the content and device type. Mobile devices may benefit from a large base font size. So we added percent-based font sizes which change the font size based on whatever the default would be for that block. text-menus.mp4 Further UX Improvements The new editor in Invision Community 5 has several tangible improvements, including a mobile-first design. In the current editor, some functionality was hidden behind modals and double clicks, which are either not obvious on mobile devices or not possible at all. The new editor no longer relies on modals and instead uses buttons and dropdown menus that work perfectly with mobile and other touch-based devices. New Line Arrows For block content, such as boxes, images and quotes, we've added the ability to create a new line before or after the block with the click of a button. This was an issue of frustration for mobile and touch devices where it was not always clear where the cursor was and a finger is a much less accurate aiming device! Sticky Toolbar Anyone who has authored a long piece of content knows the pain of scrolling up and down to get the toolbar in view. To make writing longer content less stressful, we've made the toolbar sticky so that it will always be fixed at the top of the editor after scrolling down. sticky-toolbar.mp4 Markdown Style Shortcuts One common request is to support markdown in the editor. While we opted not to include full markdown support, the new editor recognizes many markdown-style formatting shortcuts. markdown.mp4 Colors A common challenge with rich text editors on sites with multiple themes is colors often need to consistently look right across all themes. This is even more important with Invision Community 5, as it has a native dark mode feature. For this reason, we opted to offer a reduced set of color options that all adapt dynamically to the theme. I mentioned this about box colors above, but this is also true of the font color. The difference in shade is slight, but it's very noticeable without it. Toggling between light and dark mode will never produce unreadable text. colors.mp4 We can't wait for you to try the new editor; it has already been very popular with our small testing group. Which feature are you most looking forward to trying? View full blog entry
  25. Invision Community 5 has a brand new editing experience powered by a lightweight, fast React text editor built for mobile and modern browsers. The venerable CKEditor v4 at the core of our current editor is starting to show its age, so we wanted a clean slate with Invision Community v5 with an editor that was optimized for mobile use, easily extensible and had a feature set that would take us into the next era of Invision Community and beyond. The obvious choice was to consider the latest version of CKEditor, but it didn't fit our needs as it wasn't easily extensible, external plug-ins would no longer be possible, and its large footprint would affect page speed scores and be painful to use with a mobile connection. After a long search, we settled on Tiptap as the base for our editor. Written in React, loaded in chunks when needed for optimal performance and with many APIs and extensibility options, it was the perfect fit. Aside from the technical improvements, the editor offers new tools and a great base for writing our own plugins. I'll walk you through the main features throughout this blog. If you want a more technical deep dive, then please see my development blog. The Toolbar The toolbar has been redesigned to put the most commonly used styles first, with the least used styles and functions into an ellipses menu. The new paragraph menu contains the header styles, as well as the code block. The plus menu adds lists, boxes and quotes. The benefit of this new compact menu is that it displays just the same on mobile. Currently, there are different editor styles for desktops, tablets and mobiles with some style buttons removed to save space. With Invision Community 5, this is no longer the case. Even the smallest display gets all the functionality. mobile-toolbar.mp4 Emojis & Icons Emojis have become a great way to embellish writing and express emotion. The new emoji picker has been modernized with larger emojis and tooltips to showcase the emoji shortcodes. The Icons tab, new for Invision Community 5, allows you to add Font Awesome Icons directly to your content. Lastly, both the emoji selector and the shortcode suggestion dropdown support arrow-key navigation, so you don't have to move your hands from the keyboard to the mouse. Content Boxes The feature I'm personally most excited about is boxes. The concept started as an abstraction of spoilers because sometimes you just want "a box" - a section that stands out from the rest of the content, something we do manually in our documentation and guides on this site. Each box has a tile and the following options: Expandable - You can mark a box as "expandable" which is functionally the same as a spoiler. One improvement is that expandable boxes use native HTML details and summary elements instead of plain Javascript animated divs. Colors - You can optionally keep it grey on grey like spoilers, but I think that's so boring! The colors automatically adjust to the theme colors, so it will look great in dark and light mode. Float (left/right/none) - You can make the box align to the left or right of other content just like you can for images Width - When the box is floated, you can set the width to big, medium or small. Boxes.mp4 Link Expansion Invision Community has long expanded some links, such as YouTube, offering more context or even a mini-player where appropriate. With Invision Community 5, we've added support for embedding dynamic link previews using site metadata. This is a preview of a topic on our forum. For those unaware, the Open Graph (OG) Protocol is essentially a way webpages can specify a title, image, and description to be dynamically embedded on another platform. This is the underlying technology when you see the link preview in Meta, X, Slack, or iMessage. Code Blocks and Inline Code The new editor adds inline, syntax-highlighted code blocks and inline code. Both formats can be applied via the toolbar, or optionally, you can wrap text in a single backtick (`) to convert it to an inline code block or triple backticks (```) to convert it to a code block. The code blocks also support numerous languages for syntax highlighting, including a new custom highlighter for the Invision HTML Template Syntax (Invision Community theme creators and application developers, you're welcome!) Semantic Headings and Relative Sizes Invision Community 5 adds a block selector with headings 1 through 6 in the new editor. It's possibly the most common request I hear so that people can use consistent styling rather than just big bold text in a paragraph tag. Semantic headings are also ideal for SEO and accessibility. In addition to the block selector, you can create headings with the corresponding markdown shortcut. Consecutive pound signs (#) at the start of a line followed by a space (the number of pounds corresponds to the "level" of the heading). For example ### creates a Heading 3 (<h3/>) creates the heading for you. Using clear header tags means screen readers and search engines can better understand your content as using absolute font sizes, such as 16px, can make it unclear what type of element is actually being used. Is it a heading or just a paragraph with large bold text? Furthermore, you may want different sizes depending on the content and device type. Mobile devices may benefit from a large base font size. So we added percent-based font sizes which change the font size based on whatever the default would be for that block. text-menus.mp4 Further UX Improvements The new editor in Invision Community 5 has several tangible improvements, including a mobile-first design. In the current editor, some functionality was hidden behind modals and double clicks, which are either not obvious on mobile devices or not possible at all. The new editor no longer relies on modals and instead uses buttons and dropdown menus that work perfectly with mobile and other touch-based devices. New Line Arrows For block content, such as boxes, images and quotes, we've added the ability to create a new line before or after the block with the click of a button. This was an issue of frustration for mobile and touch devices where it was not always clear where the cursor was and a finger is a much less accurate aiming device! Sticky Toolbar Anyone who has authored a long piece of content knows the pain of scrolling up and down to get the toolbar in view. To make writing longer content less stressful, we've made the toolbar sticky so that it will always be fixed at the top of the editor after scrolling down. sticky-toolbar.mp4 Markdown Style Shortcuts One common request is to support markdown in the editor. While we opted not to include full markdown support, the new editor recognizes many markdown-style formatting shortcuts. markdown.mp4 Colors A common challenge with rich text editors on sites with multiple themes is colors often need to consistently look right across all themes. This is even more important with Invision Community 5, as it has a native dark mode feature. For this reason, we opted to offer a reduced set of color options that all adapt dynamically to the theme. I mentioned this about box colors above, but this is also true of the font color. The difference in shade is slight, but it's very noticeable without it. Toggling between light and dark mode will never produce unreadable text. colors.mp4 We can't wait for you to try the new editor; it has already been very popular with our small testing group. Which feature are you most looking forward to trying?
×
×
  • Create New...