# User Interface flags
WARNING
In progress
The following are all the user interface flags that can be defined in the Tenant's definition.json.
# allowInlineStyles
When set to true, will set any custom inline style within a data-style attribute so Marfeel can then implement custom CSS.
Values: True/False. Defaults to false.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"configuration":{
...,
"allowInlineStyles": "true",
...
},
...
}
in the Marfeel version of the article HTML:
<span data-style="background-color: #FFF00">Highlighted content</span>
in the custom scss:
span[data-style*="background-color: #FFF00"] {
background-color: #FFF00;
font-weight: 700;
}
# collapseGalleries
Prevents a tenant's images from being displayed as a gallery in their Marfeel version.
Values: True/False. Defaults to true,
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"configuration":{
...,
"collapseGalleries": "false",
...
},
...
}
See a usage example in the embed Gallery guide.
# collapsableGalleriesBlacklist
This flag prevents images that contain specific ids, classes, or attributes from being displayed as a gallery.
Values: String containing a comma-separarted list of selectors
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"configuration":{
...,
"collapsableGalleriesBlacklist": "[data-src*=ext_resources/img/rally],[src*=ext_resources/img/rally],.featured img",
...
},
...
}
# cookiesPolicy
Link to the Tenant's cookie policy.
Values: String. Defaults to empty.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"cookiesPolicy": "http://www.example.com/cookiesPolicy",
...
}
# customDetailsLayout
Defines one of the custom Marfeel article detail layouts residing in the tenant's folder in themes/default/detailsLayouts. The layouts are JSP files.
Values: String
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"configuration":{
...,
"customDetailsLayout": "rankings/rankings,/deportes/ranking/",
...
},
...
}
# customFooter
Defines the elements to include in a Tenant's custom footer such links, main logo, and copyright. When active, it also adds the elements to the AMP version.
Values: Object containing:
- a
linksarray - a
mainLogoarray - a
copystring - a
addLastUpdatedboolean
They are all optional and default to empty, or false.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"customFooter": {
"links":[
["Classifieds", "https://classifieds.example.com/"],
["Workwithus", "http://workwithus.example.com/"]
],
"mainLogo":["example","https://example.com/img/logo.png", 120, 80],
"copy": "© 2018 example.com., ALL RIGHTS RESERVED, see our Privacy Policy and Terms of Use",
"addLastUpdated": true
},
...
},
...
},
...
}
Each link is an array of strings, containing the visible text followed by the URL.
The mainLogo is an array containing:
- the alt text of the logo - mandatory
- the URL of the logo - mandatory
- the width - optional, defaults to
120 - the height - optional, defaults to
auto
Learn more about it in the footer customisation article.
# customStickyAd
This flag prevents the sticky ad from overlapping on the sharingBar.
Values:
- In definition.json: True/False. Defaults to
false. - In custom.scss:
$customStickyAdSelector: _(CSS selector of element)_. Defaults tonull.
TIP
To enable this flag, the configuration both in definition.json and custom.scss is required.
WARNING
Do not use it when the sticky ad has the Marfeel classes (mrf-sticky-wrapper) because they already have the necessary styles.
When you activate the flag customStickyAd in the definition.json, Marfeel will generate a file inside of optionalComponents.scss where the variable customStickyAdSelector can be used to add the corresponding CSS selector (opens new window).
Example:
// Definition.json
"features": {
"useInventoryJsonInTouch": true,
"customStickyAd": true,
}
// Custom.scss
$customStickyAdSelector: '#tbl-next-up.tbl-next-up.tbl-floating-unit.tbl-next-up-mobile-position-bottom';
Here you can check some examples in real tenants:
# ampExtrasCustomFooter
Enables topExtras and extras JSP in AMP.
Values: Boolean. Defaults to false.
Example:
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"ampExtrasCustomFooter": true,
...
},
# detailsLinksTarget
Defines the target for all the links inside article pages.
Values: "_self", "_blank"... Any valid target value (opens new window).
Defaults to _self for relative links within the page, _blank for all the others.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"configuration":{
...,
"detailsLinksTarget": "_self",
...
},
...
}
# disableImagesReverseProxy
Allows to load images from the Tenant's servers instead of Marfeel's CDN. By default, images are optimized and served by Marfeel's CDN, even for tenants who don't have Marfeel CDN active.
Values: True/False, or the site's hostname. Defaults to false.
Using the site's hostname allows to disable the reverse proxy, but still benefit from image optimization in Marfeel's CDN, if the Tenant has Marfeel CDN active.
Examples:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"disableImagesReverseProxy": true,
// OR
"disableImagesReverseProxy": "www.example.com"
...
},
...
},
...
}
# disableLazyLoadForMedia
When enabled, all media loads at once when an article page opens.
Values: true or empty.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"configuration":{
...,
"disableLazyLoadForMedia": true,
...
},
...
}
WARNING
Remove this flag completely to disable it.
Setting it to false won't work.
# disableAppleMobileWebApp
When set to true, disables the iOS native functionality that hides the address bar if the website is saved as a shortcut.
Values: True/False. Defaults to false.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"disableAppleMobileWebApp": true,
...
},
...
},
...
}
# disableSwipeOnZoomableImage
Disables swiping when a user has zoomed in on an image.
Values: True/False. Defaults to false.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"disableSwipeOnZoomableImage": true,
...
},
...
},
...
}
# disableCaptionRemoval
Maintains the caption when processing the document.
Values: True/False. Defaults to false.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"disableCaptionRemoval": true,
...
},
...
},
...
}
# disableClassicVersion
Hides the classic version link from the customer's Marfeel mobile site that directs a user to the publisher's desktop version.
Values: True/False
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"disableClassicVersion": true,
...
},
...
},
...
}
TIP
This flag is set by default as true for B2C tenants.
# disableInlineRelatedArticles (deprecated)
The inline articles component is deprecated, this flag can be removed safely from any tenant.
# disableLazyDetails
Disables lazy loading for article pages: all the article details load at once.
Values: True/False
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"disableLazyDetails": true,
...
},
...
},
...
}
# disclaimer
Defines the Tenant's disclaimer policy.
Values: String
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"disclaimer": "http://www.tenant.com/disclaimer",
...
}
# enableReact
Enables Marfeel components built with the react library rather than the usual VanillaJS.
In addition to tenants chosen to run with React, this feature is necessary for XPLib tenants that use Widget Providers.
Values: Boolean. Defaults to false.
Example:
{
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"enableReact": true,
...
}
}
}
# expirationPopUp
Defines the expiration time, in days, for the newsletter popup.
The reader will be prompted to opt in to the newsletter once every ... days.
Values: Numerical. Defaults to 1.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"expirationPopUp": 7,
...
},
...
},
...
}
# forcePhotoArticlesByUrlPattern
Changes the behavior of the section page link, forcing specific articles to open in the image gallery view instead of the regular article page.
Values: String, the URL substring that signals which URLs should behave this way. Defaults to empty.
Examples:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"configuration":{
...,
"forcePhotoArticlesByUrlPattern": "/galleries/",
...
},
...
}
- With
"/galleries/", the following articles redirect straight to the image gallery version: - With ""-pictures#"` the following articles redirect straight to the image gallery version:
# forceTopMediaGallery
Displays top media as a gallery of all the images in an article.
Values: True/False. Defaults to false.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"forceTopMediaGallery": true,
...
},
...
},
...
}
# forceXL (deprecated)
This flag is deprecated and can be removed without any behaviour change.
# headerLogoUrl
Specifies a custom external URL that Marfeel redirects to when the header logo is tapped.
Values: String. Defaults to the site's main URI, as defined in the definition.json.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"headerLogoUrl": "http://www.example.com/aboutus",
...
},
...
},
...
}
# galleryTopMediaCaptionFromAlt
Activates captions for top media images in the image gallery. The caption text is picked from the alt attribute of the image if it exists, nothing happens otherwise.
Value: True/False. Defaults to false.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"galleryTopMediaCaptionFromAlt": true,
...
},
...
},
...
}
WARNING
Remove this flag completely to disable it.
Setting it to false won't work.
# headerLinks
Specifies a custom external URL that Marfeel redirects to when the header logo is tapped.
Value: Array of objects. Defaults to empty.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"headerLinks":[{
"id": "learn",
"href": "http://learn.example.com/",
"label": "Learn",
"iconName": "arrow"
},{
"id": "multimedia",
"href": "http://games.example.com/",
"label": "Multimedia - Games",
"img": "http://example.com/images/games.png"
}],
...
},
...
},
...
}
hrefandlabelare mandatory.id, if specificied, is an additional class name for thelicontaining the link.img, if specified, is displayed as a background-image on the left of the link.iconName, if specified, replaces the external link icon on the right hand side of the link.
The iconName will be concatenated with mrf-Icon--, for example mrf-Icon--arrow, and must exist in Marfeel's icon library.
All the available icons are in Marfeel's resources (opens new window).
TIP
iconName can be applied to external sections in sectionsDefinitions too.
# infiniteScrollDetails
Adds infinite scroll to the article details of the Tenant's XL version.
Value: True/False. Defaults to false.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"infiniteScrollDetails": true,
...
},
...
},
...
}
# inlineNextArticleTitle (deprecated)
Allowed to use a custom text in the inline Next Articles component.
This component and this flag are deprecated, you can remove this flag safely.
# todayOnHomeSectionTitle
Allows us to use custom text in the title of the 'Today in Home' recirculation module which can be found at the bottom of articles when entering via deeplinking.
Value: String. Defaults to the section title, like "Home", "Sports"...
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"todayOnHomeSectionTitle": "Custom example text",
...
},
...
},
...
}
TIP
The value is always concatenated to the "Today in" String, which is displayed in the website's language, as defined in the lang property.
To change the default "Today in" string, add the message.properties file in the /index/resources/ path of the Tenant's code repository and override it like this:
today.on.section="Custom example text"
You can remove the title completely by passing an empty string to this flag, and setting an empty string as value of inline.related.articles.
# lang
Defines the language for the user interface. The list of Supported languages is in MarfeelXP (opens new window). There is one file per locale, with a naming convention resembling the following: messages_<locale>.properties.
Values: String
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"lang": "en"
...
},
...
}
# lateralMenuSearch
Adds a search bar. The search feature works out-of-the-box for sites that are Wordpress-based and/or use a ?s= as search query parameter.
Show it in the header as well, using the showSearchInHeader flag. And customize options using searchOptions flag.
Values: True/False. Defaults to false.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"lateralMenuSearch": true,
...
},
...
},
...
}
# mediaCaptionClass (deprecated)
Deprecated
This flag is outdated, topMediaCaptionEnabled flag must be used instead to ensure that the caption styles and the top details ad position are correct.
Defines where an image caption is selected from.
Dependency
This flag requires the topMediaCaptionEnabled flag to be enabled.
Values: String. You can use one of the 2 types described:
- "alt" to get the caption from the alt attribute of the image.
- "caption" to get the caption from the css selector named "caption" defined in providers.json
Example:
{
...,
"userInterface":{
...,
"features":{
...,
"mediaCaptionClass": "caption",
...
},
...
},
...
}
{
"cssMappings": {
...
"caption":".img > div, .gallery-img span.caption"
...
},
...
}
WARNING
You can find other usages of this flag, for example with the selectors as value of mediaCaptionClass instead of inside the providers.json.
This is deprecated and should be updated, to guarantee proper styling.
To style the image caption, see the article pages styling documentation.
# noPhotoArticles
Articles that include mainly a gallery of images instead of text will open the gallery page directly instead of the article page. However, if this flag is used and set to true, it prevents the article from being opened directly in the image gallery.”
Values: True/False
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"configuration":{
...,
"noPhotoArticles": "true"
...
},
...
}
# numberNextArticles
Defines the number of next articles displayed in article pages.
Values: Numerical, defaults to 2.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"numberNextArticles": 4,
...
},
...
},
...
}
# numMosaicSquaresOnScreen
Defines the number of section mosaic squares to be loaded for each screen. Meaning when Marfeel fetches new mosaic squares, the number defined will be fetched.
Values: Numerical. Defaults to 1.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"numMosaicSquaresOnScreen": 8,
...
},
...
},
...
}
# photoGalleriesSlider
Defines a selector that identifies the container for the photo slider and will detect the children images.
Values: DOMString
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"configuration":{
...,
"photoGalleriesSlider": ".rslides"
...
},
...
}
See a usage example in the embed Gallery guide.
# photoGalleriesSliderType
Values: String. Defaults to "paging".
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"configuration":{
...,
"photoGalleriesSliderType": "live"
...
},
...
}
# pushNotificationsChrome
When set to true, creates a new push notifications controller in Chrome.
Values: True/False
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"pushNotificationsChrome": false,
...
},
...
},
...
}
WARNING
Only used by elconfidencial. If you know how to use this flag, edit this file (opens new window) with the information!
# readingTime
Hides both the icon and the time reading estimation.
Values: True/False. Defaults to true.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"readingTime": false,
...
},
...
},
...
}
# removeGalleriesRelatedImages
Removes collapsed galleries from the article details.
Values: True/False Defaults to false
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"removeGalleriesRelatedImages": true,
...
},
...
},
...
}
WARNING
Remove this flag completely to disable it.
Setting it to false won't work.
# removeMultipageRelatedImages
Disables the related images that are shown at the end of a multi-page article if activated.
Values: True/False
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"removeMultipageRelatedImages": "true",
...
},
...
},
...
}
# removeNextPagesRelatedImages
Removes collapsed galleries from nextPages.
Values: True/False. Defaults to false
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"removeNextPagesRelatedImages": true,
...
},
...
},
...
}
WARNING
Remove this flag completely to disable it.
Setting it to false won't work.
# removeTopMedia
Removes the top media from article pages.
Values: True/False. Defaults to false.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"removeTopMedia": true,
...
},
...
},
...
}
# searchOptions
Defines a options of the search form.
Values: Object containing:
- a
inputName. Defaults iss - an
action. Defaults is//www.example.com - a
placeholder. Defaults isSearch
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"searchOptions": {
"inputName": "query",
"action": "//www.example.com/search",
"placeholder": "Search your recipe..."
},
...
},
...
},
...
}
# sectionDefinitions
Defines the sections to render and the navigation menus (top and lateral). See the sectionDefinitions documentation to find the related properties.
Values: Array of objects
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"sectionDefinitions":[{
"name": "home",
"title": "Home",
"url": "https://example.com/"
},
...],
...
}
# showClassicVersionInHeader
Shows the classic version icon on the header.
Values: True/False. Defaults to false.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"showClassicVersionInHeader": true,
...
},
...
},
...
}
# showSearchInHeader
Shows the search bar on the header instead lateralMenu.
::: info You need to have the lateralMenuSearch flag enabled :::
Values: True/False. Defaults to false.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"showSearchInHeader": true,
...
},
...
},
...
}
# showTopMediaCaption
Enables the caption of the top media.
Values: True/False. Defaults to false.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"configuration":{
...,
"showTopMediaCaption": true
...
},
...
},
...
}
Dependency
This flag requires the topMediaCaptionEnabled flag to be enabled.
MarfeelPress specific
Only works if the tenant uses the MarfeelPressFetcher.
# swName
The name of Marfeel javascript file used during the service worker install.
Values: String. Defaults to marfeel_sw.js.
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"swName": "marfeel_sw",
...
},
...
},
...
}
Most definitions don't need this flag.
However, some sites, including Wordpress, do not support the js extension of the service worker file.
Use this flag if the Marfeel service worker is available at a different URL than <example.com/marfeel_sw.js>.
TIP
The scaffolder sets this flag for all MarfeelPress tenants with the value marfeel_sw.
# swipeUpHint
Displays a hint for galleries when the user swipes up.
Values: True/False. Defaults to false
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"swipeUpHint":false,
...
},
...
},
...
}
# topMediaAllowedRatio
Defines a custom ration for the top media selector.
Values: Numerical. Defaults to 1.3
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"topMediaAllowedRatio": 1000,
...
},
...
},
...
}
# topMediaCaptionEnabled
Adds a caption to the Top Media.
- true: Use the Ad Dealer to insert the caption
- alt: The alt attribute of the image tag as the caption
- caption: Use the caption extracted by Boilerpipe.
data-anything: Uses the value in thedata-anything attribute of the image.
See the top media caption documentation to find more information about how to use it.
Values: String. One of:
truealtcaptiondata-xxx
Example:
{
...,
"title":"Title of the awesome example site",
"uri":"www.example.com",
"userInterface":{
...,
"features":{
...,
"topMediaCaptionEnabled": "data-caption",
...
},
...
},
...
}