What's new
Welcome

Join us now to get access to all our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, and so, so much more. It's also quick and totally free, so what are you waiting for?

XF News Upcoming Changes for XF2 2.1

XenD

Staff member
XenMake Team
Customers
Joined
Feb 4, 2018
Messages
16
Likes
5
Points
3
Age
36
Website
xenmake.com
#1
Dear customers,
We want to share Upcoming Changes for XF2 2.1,
Also, XenMake Team making preparations for these changes.
We want you to know that we will try to give you the best support in this process.

What on earth is URL unfurling?

I'll just show you. It's easier!


1540400554971.png


When a URL is inserted into content and that URL exists on its own line within the content, we will "unfurl" it to a richer preview which includes the page title, metadata logo, description and favicon. Such rich previews add more context for users as to what the link contains. URL unfurling can be used anywhere that accepts BB code currently.

The functionality is enabled by default, but you can switch it off if you want to in the "Messages" section of the Admin CP.


Consistent Emoji styles

Emojis are but different browsers and devices have vastly different styles. You just need to look at something like Emojipedia to give you some idea of the different styles available.


Therefore, we felt that it's about time to add some consistency so we're adding a new option in XF 2.1 to do just that:


1540400608265.png


We actually default to EmojiOne here (to be consistent with smilies) but as you can see you can opt out entirely (by selecting "Native") or use "Twemoji" if that's your preference.

If you select "EmojiOne" then emojis will be dynamically replaced with their equivalent EmojiOne image to go from:


1540400618059.png


To:


1540400626612.png

Emoji (and smilies!) autocomplete


1540400713628.png
That classic song. If you're <grinning> and you know it <clap> your <raised_hands>
That's right, we now show you emoji and smilie suggestions as you type Often this can be more convenient than opening up your smilies or device emoji keyboard and the fact that it gives you all of your smilies and emojis in one place is very, er... y...

As soon as the editor detects : followed by a couple of letters, it starts searching the entirety of your emojis and smilies for something that matches and returns you the results. You can then pick the desired smilie/emoji using your keyboard or with a click/tap.

The emojis inserted into the editor will follow whichever emoji style you have chosen, but behind the scenes they will be converted back to their native emoji character on saving.


Video uploads

Do you remember a time when people didn't have their phones out recording videos of random stuff? No... neither do I... Anyway, what do people do with those videos when they want to upload them? Well, they probably don't upload them to your forum, sadly. Well, not yet, anyway.

Ironically, I'm not going to make a video demonstrating this feature because it will be mostly a process you're familiar with. You simply click "Attach files", select your video and insert it into your post.


1540400745811.png


And the end result:


1540400757035.png


There are no fancy HTML5 video players, there's no complex dependencies, and there's no performance taxing transcoding process. Everything above is totally native to the browser and OS that you're using.

As a result, it is theoretically possible that certain video formats may not display correctly on certain devices, but realistically here we're talking about extremely old videos or extremely old devices. Most browsers can support MP4, WEBM and OGG files and most devices that XF actively supports have been outputting videos in MP4 for years.
 
Last edited:

XenD

Staff member
XenMake Team
Customers
Joined
Feb 4, 2018
Messages
16
Likes
5
Points
3
Age
36
Website
xenmake.com
#2
Font Awesome 5

In what was some relatively poor timing, around about the time we released XenForo 2.0, Font Awesome 5 was released. As you may know, Font Awesome 5 brings a huge number of new icons and in three different styles, light, regular and solid. There's technically a fourth style too, which now represents all of the brand icons.

The number of changes in FA5 means that we've had to wait until a more significant release to implement it. So here we are

First and foremost, you will probably want to decide which style you would like. To do this, we have created a new style property under the "Typography" style property group:

1540400948242.png



Note: the default we have chosen is "Regular" and therefore the Admin CP will always use "Regular" regardless of the setting here.
It's somewhat tricky to show you exactly what each style looks like, but a comparison of the editor toolbars probably gives the best idea:


1540400955363.png
Existing XF 2.0 editor with FA4

1540400960617.png
XF 2.1 editor with FA5 "solid" style

1540400967313.png
XF 2.1 editor with FA5 "regular" style (the new default)

1540400974683.png
XF 2.1 editor with FA5 "light" style
We will talk a little bit more about how to use icons in templates at a later date, as there are some changes there. You can, however, just use the HTML code provided on the FA5 website for a specific icon. It is worth noting that the names of some icons and some concepts have changed so your existing icons may not work after upgrading.

A note to style designers:
We have put some measures in place to avoid styles from breaking completely (mostly related to the use of the FA variables in Less templates) but as some variable names and icon names have changed, it is possible that some of your existing icons may render as empty squares or be missing entirely. We strongly recommend you test your styles against XF 2.1 at the earliest of opportunities to ensure that you can be roughly ready for a 2.1 compliant version once it reaches stable.
 

XenD

Staff member
XenMake Team
Customers
Joined
Feb 4, 2018
Messages
16
Likes
5
Points
3
Age
36
Website
xenmake.com
#3
Enhanced editor integration and BB code option syntax

Just because we're implementing a bit of a "new-kid-on-the-block" text formatting approach, doesn't mean we're entirely done with BB code. As mentioned above, it still has its place, not least because of a much more flexible syntax.

Admittedly, BB code can constrain us in terms of which functionality we can support. One headache we're solving with XF 2.1 relates to the options we provide to BB code tags in order to make the available functionality more flexible. Which enables us to do things like this:

1540401224620.png

What ultimately makes this possible is a much more flexible BB code options syntax. The resulting BB code for the above post looks like this:

Code:
[IMG align="left" width="337px" alt="PHP versions"]https://xenforo.com/community/attachments/1539019830210-png.185010/[/IMG]
This is what I might have used the other day if we had been running XF 2.1 already :rolleyes:

Editor button / dropdown management

Throughout the years we have had a few requests to move specific editor buttons, or to manage the content of drop downs or even fully configuring the editor buttons. So our next reveal should take care of your editor configuration needs.


1540401273979.png


The XenForo editor actually supports a total of four toolbar configurations behind the scenes, which are shown depending on the device viewport. By default, all of them apart from the "Extra small" toolbar are the same, but we're now allowing you to configure them independently. Just click the toolbar you'd like to edit:


1540401282144.png


Moving the buttons around, or adding additional buttons, is as simple as dragging and dropping, and it works with touch devices too. In the screen recording above, you can see us add the "Insert quote" button into the editor, and change the position of a few others.

Once saved, the changes are reflected on the front end immediately:


1540401287698.png


In addition to moving buttons around, you can also create and edit your own dropdowns. Seeing as we added "Insert quote" to the main editor toolbar above, we probably don't need it in the default "Insert" menu anymore:


1540401293775.png


You can even change the icon! Here we simply removed the "Insert quote" button from this dropdown. As we've updated an existing dropdown, that is updated immediately on the front-end with the new icon and the "Insert quote" button now removed. You can of course create new dropdowns and position them on the toolbar accordingly.

1540401300712.png
 

XenD

Staff member
XenMake Team
Customers
Joined
Feb 4, 2018
Messages
16
Likes
5
Points
3
Age
36
Website
xenmake.com
#4
Tables!

There is often an assumption that when we use a rich text editor such as Froala that we can automatically support all of its features. That would certainly make life easier, but unfortunately rich text editors produce HTML and we therefore have to convert any HTML to BB code on save and back again for rendering.

Therefore there are significant barriers in introducing some features, but we feel that there's enough support for tables that we should bring them to you in XF 2.1


1540401385209.png


You can of course write the BB code manually, which most likely uses a familiar syntax if you're familiar with HTML tables. Here's a snippet of the above:

Code:
[TABLE]
[TR]
[TH]Version[/TH]
[TH]Release date[/TH]
[TH]Last release[/TH]
[/TR]
[TR]
[TD]1.0[/TD]
[TD]March 8, 2011[/TD]
[TD]1.0.4 - July 12, 2011[/TD]
[/TR]
[/TABLE]
But, of course, it's probably easier just to use the newly built-in "Insert table" button!

1540401561807.png
 

XenD

Staff member
XenMake Team
Customers
Joined
Feb 4, 2018
Messages
16
Likes
5
Points
3
Age
36
Website
xenmake.com
#5
Admin options UI tweaks

We already ship a huge number of options with XF and the list of option groups only gets more crowded as you install more and more add-ons. It certainly sometimes feels like you "can't see the wood for the trees" so we've now given developers the ability to associate Font Awesome icons to their option groups just to give a little bit of visual separation between an otherwise long wall of text.

1540402051033.png



Quick access to option groups in the Admin CP

In addition to this nice visual tweak, we felt that sometimes option groups were something that needed to be accessed fairly frequently across different tasks in the Admin CP.


1540402076144.png

There was some speculation about what the "cog" icon next to search might have been for. And although it isn't exciting as some of you might have been hoping for, it is definitely useful. Clicking it will show you all option groups:


1540402067888.png

Widget display conditions

If you have ever had to display a widget, but only conditionally based on user group or some other criteria, then you'll know that this isn't exactly straightforward. The current approach actually requires you to create the desired widget without assigning it to a position, and then create a HTML widget to add your conditions manually and call the widget you want.

One of the things many people have told us they like from our Navigation feature is the ability to use template syntax-like conditions so it made a lot of sense to bring that feature to widgets too.

If you have a widget that you only want to display to a specific user group then it's as simple as adding something like this to the new "Display conditions" field:


1540402125180.png
 

XenD

Staff member
XenMake Team
Customers
Joined
Feb 4, 2018
Messages
16
Likes
5
Points
3
Age
36
Website
xenmake.com
#6
Redesigned approval queue

The approval queue can be a fairly daunting place. It contains a lot of information all laid out in a long column with the relevant actions being at the bottom. We've redesigned how this information is displayed in XF 2.1 and overall still kept the important information. For developers, the template code to create an approval queue item is simpler too.

This is what the approval queue looks like now:


1540402250632.png


There is now a greater focus on the content itself that needs to be reviewed, with the actions being listed over on the right.

To make navigating through the queue easier, we've now added a new filter bar.

1540402257042.png


As well as being able to filter the list by content type, it is also possible to sort the queue in descending order so that you can view the most recently created entries first, if you wish.
 
Top