Release Notes

Written By Rachana TR (Super Administrator)

Updated at May 31st, 2023

Page-Builder Release Note - 12th May 2023

Reduce (Time to Live)TTL time for Tag Pages

Behavior before the deployment: Earlier it used to take 10800 seconds to reflect the changes on tag pages.
Behavior after the deployment: Now it has been changed to 600 seconds


Page-Builder Release Note - 11th May 2023

Layout issue for two column six stories and three column twelve stories for RTL pages
Behavior before the change: For 2 col 6 stories and 3 col 12 stories  Text was not properly synchronized with images which was not a good user experience.
Behavior after change: After the fix, images coming on the left-hand side will have synchronized text on the right-hand side. The team has changed the image resolution to a small size

Page Builder becomes unresponsive and goes blank
Behavior before the change: Page Builder was going blank after we adding Ad/Widget slots after the 2nd card.
Behavior after the change: Page Builder Story templates have 3 dummy cards so when the user tried to add a slot after card 3 it was going blank because of non-availability of the next card. The team has added multiple cards in dummy templates so this will override this.

Page-Builder Release Note - 27th April 2023

Display Alternative images (if available) on Related Story cards
Despite setting an alternative image for any story, it was not picking alternative images for related story pages.
What changes have been made now?
The Page Builder team has set the priority logic for alternative images for related stories.
Current behavior after enhancement: Now it will give priority to Alternative Image, then      Hero image (If no alternate image is set)  and lastly Page Builder Fallback image( if no alternate and hero image is set) for related stories.

Author Image and name alignment for Arrow: Opinion Collection layout for RTL pages
Problem Statement: For Arrow: Opinion Collection layout in Page Builder, Author Image and Author name was not aligned properly. For example: Author's Name used to display at the top right corner of the layout above Story Headline and the author image is used to display on Left-hand side
What has changed now?
The author image has been shifted to Right-hand side just below the author name which gives a good user UI experience.

Resizing of images across all rows and aside collection
Earlier page builder used to show small-size images as the text area was covering more space in any of the layouts we pick from Page Builder. Resulting it was not a good UI experience having small-size images with more text.
What has changed now?
The team has fixed the sizing of images for all such pages and increased image size so that images won’t look smaller compared to the text area and gives a good UI experience to readers.

Page-Builder Release Note - 12th April 2023

Enhancement: Multiple Payment gateway options to subscribers on Ahead

Earlier, users had limited options for payment gateways when subscribing. However, with this enhancement, we are offering the experience to pay via multiple payment gateways as well as currencies.

Publishers Requirements:
Taking into account feedback and requests from both publishers and users, there was a request to provide end-users with the option of choosing between Razorpay (for INR) and Paypal (for USD) as payment methods. The payment gateway should then display the amount and currency corresponding to the customer’s selection, and handle the transaction process accordingly.

We have introduced the following feature for our PB Publishers:
1. Publishers can now provide two distinct plans - one for INR (connected to Razorpay) and one for USD (connected to Paypal).
2. End-users on Ahead will be able to see both plans and select the one they prefer.
3. If the user selects the INR plan and clicks “subscribe,” the Razorpay gateway will open, and they can proceed with the transaction.
4. If the user selects the USD plan and clicks “subscribe,” the Paypal gateway will open, and they can proceed with the transaction.

For PayPal transactions, below is how we would be managing the Success and Failure workflows:
When we implemented the Paypal Recurring subscription, we had to manage the routing separately. To address this, we created a route using Bold Static Pages. If the static page route is not added in Bold, the transaction popup may not display correctly, which leads to a poor user experience. However, the transaction will still be processed in the background.

To prevent the issue described above, we need to complete the following actions on Bold CMS:
=> Create a static page.
=> Add /paypal-payment-success and /paypal-payment-failed routes to Bold using static pages

Incase the static page route is not added on bold, this is how the transaction popup shows up and is a bad UX(but at the background transaction would’ve happened)
 



Sample code for payment success screen:

<p>Payment successful</p>
<a href="/">Go to home page</a>
<script>
(function() {
var queryParams = window.location.search
if( queryParams.includes('token')) {
window.opener.postMessage(queryParams, "*");
}
})();
</script>

Sample code for payment failure screen:

<p>Payment Failed</p>
<a href="/">Go to home page</a>
<script>
(function() {
window.close();
})();
</script>

Finally, once the above scripts have been added to the static pages, successful transactions will redirect the transaction popup to the user details page for active subscriptions. If the transaction fails, the popup will be redirected back to the subscription page.

Read more about Paypal Transaction Route on Bold Static Pages here

Page-Builder Release Note - 23rd March 2023

Feature: Option to load Daily Motion / Youtube videos in iframe

Problem Statement/Feature request: Currently, Ahead websites utilize lazy loading for all videos and JS embeds to enhance user experience, improve performance, discourage ad-blocker installation, and minimize data consumption on costly or limited networks. However, this approach requires users to manually click on videos to play them. Autoplay videos generate significantly more revenue than display ads and have been shown to boost engagement, ad clicks, sales, and revenue.

Expected outcome: To address this, Ahead is proposing a toggle option for publishers to choose between lazy loading for a performant website and eager loading for a feature-rich experience. This feature will only be implemented for DailyMotion videos. With this change, if the option for “Disable Lazy Load for JS Embed” is checked on PB, the videos from Daily Motion will Autoplay.

To enable autoplay, the following settings need to be configured in Bold and PageBuilder:
In Bold, the client must set a valid player ID by navigating to Settings > Integration > Add Integration > DailyMotion.
For PageBuilder, the client must go to General Settings > Manage > Performance and select the checkbox for “Disable Lazy Load for JS Embed” to activate autoplay.

Page-Builder Release Note - 14th March 2023

Feature: Updated/Published time for Amp Stories

At present, PB provides flexibility in determining the published and updated time for non-AMP stories. However, this functionality should also be extended to AMP stories.

Current Behaviour: Current behavior displays the published time on AMP stories at all times.

Expected Behaviour: The expected behavior is to synchronize the published and updated time of AMP stories with that of non-AMP stories. Any changes made in PB with respect to published or updated time should be reflected on both AMP and non-AMP story pages.

Note:

Live-Blog Story template: The settings for published and updated time will be derived from the live-blog template settings in PB.

For all other story templates: The settings for published and updated time will be taken from the text template in PB.

Page-Builder Release Note - 23 Feb 2023

Enhancement: Live Blog icon on Story Cards

As of today, for Live Blog, on story pages, readers can view a red dynamic symbol indicating that this is an active story running with regular updates.
However, on the Home Page, this very Live Blog doesn’t have an indicator, and a reader may not be able to identify it instantaneously.

The change on Ahead is to add this very dynamic red symbol that would ideally grab a reader's intention and lead to more engagement on our publishers' websites.

Furthermore, the size of the Live Blog symbol on Story Pages will also be increased for web pages to give a more apt UI impression.

Enhancement: Dark Mode for Static Pages

There are 4 types main types of Static Pages. HTML | JSON | XML | Text. Our change is more to do with the html.
In the html also, there are simply a lot of possibilities on setting up the static page. with html tags, with css, with js etc.., and this is a reason why static pages were not considered into dark mode before. Now, taking account of this limitless possibilities, so what is done is

(a) BG colour of the page set to #1D1D1D for dark mode.
(b) Text elements coming out of plain html tags will be set to white colour for dark mode for readability.
(c) Better shadow/opacity options have been provided to differentiate between header / <p> tags.

Assume a publisher uses some specific formatting on a font, it takes that colour. also any other CSS elements will retain from the code as it is written and we do not invert the colours there. Also, set up a html page along with script where when time is displayed the text colour changes every second. while the dark mode is set, we don't get into changing the font colour coming out of a the style set using JS.

You can change to light / dark mode and see while the BG / text colour changes, other formats like ROW BG / Table colour are something we dont want to touch & have not touched..

Enhancement: Dark Mode for Search Bar in Header 5 & 6

The 11 headers where except the header 5 & header 6 - the colour of search bar is taken from primary / secondary header colour (existing functionality, works). Header 5 & Header 6 search bars will have #1D1D1D in dark mode & #FFFFFF in light mode.

Page-Builder Release Note - 21 Feb 2023

Enhancement: Disable the Service worker shell for all publishers via PageBuilder

We introduced the functionality to disable the service worker shell across publishers via a DB toggle. Considering that publishers are now requesting this quite frequently, we now propose to have this toggle on PB.

How does this help publishers?
   a. Widgets & Ads load consistently
   b. Uptik in revenue (observed across a few publishers)
   c. Ease of use, no dependency on customer support/ tech
          
How will impact readers?
               a. Offline support / caching will be missing — tech wise
               b. Will not affect the browsing of a user unless their network is off

Note:
For new publishers, the service worker shell should be disabled (initial config).
For existing publishers having the service worker shell disabled, the same should reflect on the UI toggle.

Feature: Handle Published and Updated time across the website 

As of today, PB provides the option on Story Pages to choose which dateTime publishers would like to display - Published On or Updated On, or Both.

With the change brought in for the logic of “Published On”, the reader experience for a story displaying only the “Updated On” on the story page and always the “Published On” on other pages has not been well received.

Outcome expected:
The change in PB is to provide the publisher the flexibility to choose whichever dateTime they would like to display across the website to maintain consistency and keep the reader experience seamless.

Enhancement: Published/Updated time on Liveblog

Scenario 1:
As a publisher, I should be able to choose which DateTime i.e. Published Time or Updated Time, can I display on the different pages - Home, Section, Tag, Author, Author Listing, Search, Story (related stories)

Scenario 2:
As a publisher, I should be able to choose which DateTime can I display for Live Blogs on the different pages. 
Home, Section, Tag, Author, Author Listing, Search, Story (related stories)

1. Settings → General Settings → Manage → Time Settings → Placed between Time ago Format and Structured data time zone
2. Default logic in PB will remain as is i.e. Published Time will be displayed everywhere
3. To show Updated Time, the publisher will have to select the same from the global settings
4. In particular for Live Blogs, we advise the publishers to use Updated Time (disclaimer will be present)

Page-Builder Release Note - 13th to 17th Feb 2023

Feature: Support for AdSense on visual stories.  

Now, we support AdSense Ads on visual stories as well. Before this update, only targeted Ads were rendered on web stories. Now, enter either Ad Manager or Ad sense details by going to Settings ⇒ General Settings ⇒ AMP Configuration in Pagebuilder.
At this point of time in PB, both Ad Manager & Ad Sense details can be entered at the same time for Web stories but the priority will be with Ad Manager in this particular case. 
Ad requests will be served if there are a minimum of 8 slots in the web story.




Enhancement: ‘Since’ Time Format Update - Specific to Arabic Publishers - changes for 1 | 2 minute(s) & 1 | 2 hour(s).
 

This is an update relevant to middle east publishers for Arabic language localization in the timestamp in the ‘most read’ widget.

Under this update,
since 2 seconds will become منذ ثانيتان
since 1 minute will become منذ دقيقة
since 1 hour will become منذ ساعة
since 2 minutes will become منذ دقيقتان
since 2 hours will become منذ ساعتان

How this works is if an 'exact' search text is found, it gets replaced with the replace text as provided:


replace text: search text

"منذ 2 ثواني": "منذ ثانيتان"
"منذ 1 دقيقة": "منذ دقيقة"
"منذ 2 دقائق": "منذ دقيقتان"
"منذ 1 ساعة": "منذ ساعة"
"منذ 2 ساعات": "منذ ساعتان"


For this to work, make the following changes: 

1. Select 'Since 4 hours' in Pagebuilder by going to Settings ⇒  General Settings ==> Manage ==> Time Settings
2. Custom Labels should be enabled from Settings ⇒ General Settings ⇒ Custom Labels  & below labels should contain localized words specifically as provided in above quote of 'search text'. “Since”, “Seconds”, “minute”,” minutes”, “hour”, and “hours”.



This change will be applicable to:
All available 24 layouts, Related Stories (side & bottom) ,Search Page,Tag Page and Author Page.

Page-Builder Release Note - 30 Sept 2022

New Features and Enhancements on Ahead/PB

1. New Header: Header 6
2. RTL Preview on Pagebuilder
3. Uniform Time Zone
4. SEO Metadata on static pages
5. AMP Auto Redirection
6. Shortcodes Targetted Serving of custom code on templates

1) New Header: Header 6
A new header is introduced to Ahead/PB named “Header 6”.


The new header adds the following:
- Bigger logo, center aligned.
- The logo is now allocated a maximum of 104px height on the Desktop and
64px on Mobile. For reference, other headers except “Header 5”
allocates a maximum of 56px on desktop and 32px on mobile.
- This helps to give more prominence to the logo and establish brand
identity.

- Date and time.
- You can now choose to display the date and time on the header. This
works by picking the time from the user's device.
- You can choose to enable date alone
- You can choose to enable time alone
- You can choose to enable the date and time together
- You can choose the date format. Options in the image below


- Date and time can be configured from Header Settings > Date and
Time


- Mega menu on Header (Desktop Only)
- MegaMenu comes to use for publishers who do have a large number of
 links to be displayed to the end user.
- The mega Menu is powered by the menu group with slug
  “mega-menu” created on Bold CMS.
-  The mega menu opens up on click on the 3 dots that come up on the
  primary menu bar.


 

- The background color of the megamenu is set from Header Settings >
 HAMBURGER AND MEGAMENU
- Header 6 provides the following functionalities as well.
- Enable or Disable App download links
- Enable or Disable Sign-in, Subscribe Buttons
- Enable or Disable Social Media Icons
- Enable or Disable Hamburger Logo, see the following image.

2) RTL Preview on Pagebuilder

Publishers whose Language orientation is RTL (Right To Left), now get their
pagebuilder layout preview orientation set as RTL.
- The layout orientation will be set automatically on page builder based on the
preference of the publisher set on Bold Instance.
- The feature helps RTL publishers while setting and maintaining the layout of
different components on page builder to see how exactly the component will
render on the website.




3) Uniform Time Zone

The publisher can now set the timezone from which they are publishing set in the page
builder and they will be used in the following cases.
- Datetime tag in scouse code.
- The time will be displayed(in story pages) in the local time, which will
  be picked from the user's device. However, the HTML behind it will
include the time in the timezone chosen by the publisher.
- Eg HTML : <time datetime="2021-09-09T11:23:31+05:30">9 sep,
2021, 11:23</time>
In Schema
- In structured data, the timezone chosen will be made use of.
- Following is a screenshot of a story page tested on the Structured data
testing tool.


4) SEO Metadata on static pages

When an editor setup a static page from bold, he can now add the following
metadata on the Bold CMS. Following are the metadata that can be passed from the
CMS.

- Meta Title
- Meta Description
- Meta Keywords
The website now consumes this data and will be added as part of the metadata of
the page.


5) AMP Auto Redirection

In page builder, the publisher does have the option to enable and disable AMP
pages.
- By default, the AMP pages are turned on. This would generate a
corresponding AMP story page for Story pages.
- If a publisher Turns off these AMP story pages from pagebuilder, all of the
AMP story links which were indexed by search engines /shared on social
media will throw a 404.
- The Auto redirection ensures the AMP story links are redirected to the
non-AMP story pages in the event of the AMP story template being turned off.
- This helps in stopping the 404’s from getting populated in the Google search
console ”Not found (404)” error list.
- This helps in keeping the SEO juice intact.

6) Shortcodes & Targetted Serving of custom code on templates

The publishing house does have need of adding custom code onto the <head> and
<body> tags in the HTML to meet requirements around custom widgets, 3rd party
integrations etc.
- A publisher can add custom code to the website via General Settings >
Manage > Insert Custom Code > Click Here to Insert(Pop-up)
- The publisher can choose to serve the custom code on all pages of the
website or on specific templates.
- The publisher can choose the template by clicking on the tabs on the left
side.
- To serve the custom code on all pages he can choose “All Pages” from the
menu.
- Once custom code is added, changes are made on the custom code. He needs to
save the same and publish it for the changes to reflect on the website.


Shortcode on Insert code

- We have now exposed 5 variables that can be used along with custom code
as shortcode.
- Following are the variables
- Page Type: This variable will tell if the page that you are visiting is
story page, section page, tag page, etc.
- Story Id : This variable exposes the story ID from Bold CMS. This
variable provides data only on story page. On other pages “null” will be
the response.
- Primary Section : This variable exposes the primary section that the
story is tagged to.On other pages “null” will be the response.
- Story Slug : This variable exposes the story slug.On other pages “null”
will be the response.
- Story Type: This variable exposes the story type and tells if the story
the user is visiting is text story, video story, live blog etc. On other
pages “null” will be the response.

Colour Palette for breaking news text 

Earlier, had the flexibility for breaking news bg colour alone. After the current change, irrespective of the bg color light mode has black breaking news text and dark mode has white text.
Publishers however can change the text colour from the palette flexibility.
Flexibility to handle text colour for breaking news text colour to be handled with the colour palette.
Default colour(on reset)-light mode: white bg colour and black text
Default colour(on reset)-dark mode: black bg colour and white text