Flitterkill

This is an entry about our IPS Community Suite 4.2 release.
You are probably already familiar with our content embedding feature in IPS Community Suite. When a link to content in the community is pasted into the editor (e.g. a topic, or a post, or a gallery image, etc.) it is automatically expanded into a preview of the content, usually with an accompanying image, allowing users to click through to that content if they are interested.

An embedded Gallery image in IPS Community Suite 4.1
While it has proved a useful feature to members, each embed used essentially the same structure - a small thumbnail on the left, a title, and a few lines of text. This works fine for topics, but isn't ideal for other kinds of rich content that might be posted.
In IPS Community Suite 4.2, we greatly improved upon our embedding handling, giving every type of content within every application its own customized embed style, allowing that content to be displayed however works best. This means larger high-res previews of Gallery images, a button to download a file right from the embed for Downloads files, showing a map for Calendar events, and so on. We worked to keep a consistent overall style between apps, but allow each to display its own relevant information.
For users, things will work exactly as they do now - they simply paste a link to content, and it will continue to expand automatically. The changes are also backwards compatible. Any existing embeds in your community will automatically show the new styling you see below - no rebuilding necessary.
So with that in mind, let's take a look what the new embeds look like! I won't show every single embed here because there's a huge number, but I'll try and give you a feel for how we approached the embed styles for each app.

Gallery Image

Comment on a Gallery Image

Gallery Album

Forum Topic

Downloads File

Review on a Downloads File

Calendar Event

Comment on a Calendar Event

Commerce Product

Record from a Pages database
I hope that gives you a good overview of what to expect when your users try out the new embeds for themselves. As always, please share your feedback in the comments below!
 

This entry is about our IPS Community Suite 4.2 release
In 4.1.18 we added Two Factor Authentication. Already in 4.2 we have announced a new setting to trigger 2FA when logging in from a new device, and in 4.2 we are also adding Authy as an authentication handler.
Authy can send a user a text message, make a phone call, or send a push notification to a smartphone app to authenticate the user. You can enable whichever of these options you like.
 
Set Up
To set up Two Factor Authentication with Authy, the user will enter their phone number. To verify their phone number they will then enter a code shown in the Auhy app or have a code sent by text message or phone call. The system will automatically show an appropriate interface based on what options you have enabled - for example, if you don't want to enable the app as an option, it will not reference Authy.

Setting up Authy with the app available as an option

Setting up Authy with just phone or text message options enabled
 
Verification with Authy
When the user needs to verify their account, the system will automatically show an appropriate interface. If you allow verification with the Authy app and either it is the only option you allow, or the system knows that the user has installed the Authy app, the system will prompt them to use the app. This can either be done using Authy's OneTouch option (where the user will receive a push notification to the app, and when they click approve, the screen will automatically refresh) or their SoftToken option (where the user will be instructed to open the Authy app and enter the code they see). If you allow authentication by text message and/or phone call as well, the user will also see options for using those instead.
These screenshots show the process for OneTouch authentication:

The user is shown a waiting screen
 
Simultaneously they will receive a push notification and when opening it be able to approve
Once the user has approved, the waiting screen will automatically refresh with the user authenticated.
For SoftToken authentication, the user is prompted to enter the code shown in the Authy app:

Authy SoftToken option
 
Phone Verification
If you have disabled the Authy app as an option, or the user does not have it installed, they will be prompted to choose from the available options how they want to authenticate.
These screenshots show the process for authenticating by text message:

The user is asked how they want to authenticate

The user receives a text message or phone call with a code

The user enters this code to authenticate
 
Management
If the user changes their phone number they can reconfigure the system in their account settings. The system automatically shows "Phone Verification" rather then "Authy" if the app is not available as an option.

Account Settings showing Authy as Phone Verification
 

Occasionally you'll want to style a specific element on a specific page of your community - maybe you want to change how topic titles are shown inside a topic, or do something specific to the styles used in activity streams, without also altering other screens where the same elements are used.
Your first instinct might be to open the template editor and add some custom classnames so you can style them. This would certainly work, but the downside is your template is now customized, so any future IPS4 updates would leave the template out of date. Not ideal by any means.
Instead, you can use some helpful attributes that IPS4 adds to the body element, and then build a CSS selector around them. There's four attributes, and they always reference the current page the user is on:
data-pageApp - The application key (e.g. core, forums, cms etc.) data-pageModule - The current module with the application (e.g. pages) data-pageController - The current controller within the module (e.g. topic, page etc.) data-pageLocation - Either admin or front. So let's say we want to change how the .ipsPageHeader element looks within topic view. Our selector would look like this:
body[data-pageapp="forums"][data-pagemodule="forums"][data-pagecontroller="topic"] .ipsPageHeader { ...your styles } If you don't want to be that specific, you can just use the attributes you need. For example, if you want to change all .ipsPageHeader styles in the Forums app, you'd do:
body[data-pageapp="forums"] .ipsPageHeader { ...your styles } Tip: If you don't know the correct app/module/controller for the page you're on, you can find out by visiting the page and then viewing the page source. You'll see these attributes in the body tag near the top.
And as always, be sure you add your CSS to custom.css to keep your upgrades easy  
This theme tip is taken from our guides section.