Skip to content
Piano Slideshow Recipes
Changing :root Variables via Javascript
There are going to be many instances where you may want to change the CSS :root value via JS. This simple code block will help you achieve this.
// Resets CSS :root variable
document.documentElement.style.setProperty('--rootValueName', '#cssValue');
Adding NEW Fonts
Custom Fonts
In CustomCSS, add the following code, replacing the font family name and the source with your font. The source, as in the example, can be a saved font in a Google bucket folder. Assign the font to any element you like. You may add as many different fonts as you like.
@font-face {
font-family: "Kablammo";
src: url("https://storage.googleapis.com/nytpi/nextGenAdResources/Kablammo-Regular.ttf");
}
#mainSubheader{
font-family: "Kablammo", sans-serif !important;
}
Google Fonts with weighted variations
Go to Google Fonts, find the font you like and select the variations of the font you would like to include. There is a link the the font with the weighted variations. Copy that and replace the font family name and the source with your Google font. You may add as many different fonts as you like.
@font-face {
font-family: "Roboto";
src: url("https://fonts.googleapis.com/css2?family=Roboto:wght@100,400;500;700&display=swap");
}
#mainSubheader{
font-family: "Roboto", sans-serif!important;
font-weight: 400;
}
Adjust Logo Sizing
There are a few options when it comes to updating the logo sizing.
The most important style to bear in mind is the max-width with a default size of 140px. If you find that your logo is rendering too wide or too narrow, this should be the first property to update.
The height property on the other hand is defaulted to 100%. If you find that your logo is rendering too tall, this value should be adjusted to a <100% value accordingly.
.sponsorLogo {
max-width: 140px;
height: 100%;
}
Manipulating Gradients
Modifying core background gradient
This changes the background gradient color for main gradient. Use if you need help with the gradient CSS.
.imgColumn-bottomGradient {
background: linear-gradient(0deg, rgba(204,0,0,1) 0%, rgba(255,255,255,0) 100%)!important;
}
Modifying the gradient per Piano slide
You can change the gradient for each piano slide. To change the color for each slide, use the code below and change “data-index” number to target a particular slide. Indexes are zero-based, so “0” is the first slide.
// Changes the gradient color of the first and last slide to red
.imgColumn[data-index='0'] > .imgColumn-bottomGradient {
background: linear-gradient(0deg, rgba(204,0,0,1) 0%, rgba(255,255,255,0) 100%)!important;
}
.imgColumn[data-index='4'] > .imgColumn-bottomGradient {
background: linear-gradient(0deg, rgba(204,0,0,1) 0%, rgba(255,255,255,0) 100%)!important;
}
Modifying the CTA
Changing the CTA color
.sponsorButton {
background: red;
color: white;
}
Adding a new color and hover state to the CTA
.sponsorButton {
background: red;
color: white;
transition: all 250ms ease-in-out;
}
.sponsorButton:hover {
background: blue;
color: white;
}
Adjusting or Removing Magnify Hover Style
Removing the Hover Effect
The code to remove or adjust the style on hover uses the same CSS selector. You can either set transform: scale(1) !important; or you can set transform: none !important; to completely remove the hover state.
#app:not(.is-expanded):not(.is-transitioning):not(.is-animating) .imgColumn:hover .imgsContainer {
transform: scale(1) !important;
transform: none !important;
}
Adjusting the Size of the Magnify Effect
Update the scale() value in order to change the amount of zoom on hover. The default is scale(1.1).
#app:not(.is-expanded):not(.is-transitioning):not(.is-animating) .imgColumn:hover .imgsContainer {
transform: scale(1.05) !important;
}
Manipulating Vertical Spacing of Piano Key Text
Vertical Centering (on Magnify Unit)
The piano key headlines are already vertically centered on the Dim unit, so vertically centering the text on the Magnify unit involves matching the style from the Dim unit.
.imgColumn-info {
align-items: center;
height: calc(100% - 110px);
bottom: 110px;
}
Aligning Text to the Bottom (on Dim Unit)
If you want to achieve the opposite effect with the text of the Dim unit aligned lower on the key similar to the Magnify unit, use the below code instead.
.imgColumn-info {
align-items: flex-end!important;
padding: 0 10px 40px!important;
}
NOTE: In both examples, the 110px and 195px values are matched in both the height and bottom CSS properties.
Bearing this in mind, with a default value of calc(100% - 110px) being equal to 100% of the visible piano key height, you can increase this value to increase the amount of space below the headline text or vice-versa.
Swapping the Logo and CTA Positions
.sponsorCta {
padding: 0 40px;
flex-flow: row-reverse;
}
Changing the Divider Color
.has-dividers .imgColumn:after,
.has-dividers .imgColumn:not(:first-of-type) .imgColumn-info:before {
background-color: red;
}
Adding a disclaimer
Add a disclaimer with the following code. Simply replace the disclaimer text and use the two CSS blocks to control your positioning for both mobile and desktop. NOTE: In this solution the CSS is embedded via javascript. Follow the conventions in this example to modify or expand your CSS. If you would like to hide the mobile block, add the following line to the mobileCSS object: 'display': 'none'
// Adds a disclaimer to the bottom of the Piano unit on desktop and at the top in mobile.
let disclaimer = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut ante quis metus luctus commodo.";
let desktopCSS = {
'position': 'absolute',
'bottom': 0,
'left': '0',
'color': 'white',
'z-index': 20,
'font-size': '10px',
'padding': '5px 10px'
};
let mobileCSS = {
'position': 'absolute',
'width': '100%',
'top': 0,
'left': '0',
'color': 'white',
'z-index': 20,
'font-size': '10px',
'padding': '5px 10px'
}
let css = window.innerWidth > 414 ? desktopCSS : mobileCSS; const div=document.createElement("span"),node=document.createTextNode(disclaimer);div.className="disclaimer",div.appendChild(node);const element=document.getElementById("app");element.appendChild(div),Object.assign(document.getElementsByClassName(div.className)[0].style,css);
Changing the Main Sub-header text on Mobile
If you would like to change the mainSubheader text when in mobile, implement the following code. Included is a version with an “observer” that will change the text when in responsive mode on your browser. We recommend you only use this version for testing and use the non-observer version for Production.
// mainSubheader Mobile Text Swapper
// Oberserver version, use for testing
const mainSubheader = document.getElementById('mainSubheader');
const resizeObserver = new ResizeObserver((entries) => {
if (window.innerWidth < 768) {
mainSubheader.innerHTML = "Mobile Text";
} else {
mainSubheader.innerHTML = "Desktop Text";
}
});
resizeObserver.observe(mainSubheader);
// mainSubheader Mobile Text Swapper
// Non-Oberserver version, use for production
const mainSubheader = document.getElementById('mainSubheader');
if (window.innerWidth < 768) {
mainSubheader.innerHTML = "Mobile Text";
} else {
mainSubheader.innerHTML = "Desktop Text";
}
Adding Custom Expanded Piano Slide URLs
You can add unique URLs for each expanded image slide to click out to a separate URL than the overall unit CTA.
In the creative for your FlexXL Piano Slideshow unit, add the following Javascript variable to the CustomJS field:
const customImageUrls = [
{
location: 'image-1',
url: 'https://www.nytimes.com/section/arts'
},
{
location: 'image-2',
url: 'https://www.nytimes.com/section/books/review'
},
{
location: 'image-3',
url: 'https://www.nytimes.com/section/climate'
},
{
location: 'image-4',
url: 'https://www.nytimes.com/section/arts/dance'
},
{
location: 'image-5',
url: 'https://www.nytimes.com/section/education'
}
];
Each object maps to each image in the slideshow through the location value:
Update the url string values in each image object to point to the unique URL you want that particular image to click out. For example purposes, we have NYT pages for each image above. You can add empty strings ('') to default that image’s URL to be the overall unit’s CTA, or add a URL for a specific image to link to your client’s preferred URL.
It is possible to only have one or some of these images link to a unique CTA, while having the others point to the overall unit’s CTA (default functionality).
To do so, leave the url value of the image object that you don’t want to have a unique CTA as empty strings ('').
Example:
const customImageUrls = [
{
location: 'image-1',
url: 'https://www.nytimes.com/section/arts'
},
{
location: 'image-2',
url: ''
},
{
location: 'image-3',
url: ''
},
{
location: 'image-4',
url: 'https://www.nytimes.com/section/arts/dance'
},
{
location: 'image-5',
url: 'https://www.nytimes.com/section/education'
}
];
In the above example, only image 1, 4, and 5 will link to a custom URL when the expanded image is clicked on by the user. Images 2 and 3 will link to the unit’s CTA URL.
Updated Event Tracking with Custom Image URLs
In order to capture tracking for these unique URL events separately from existing tracking, you’ll see a separate tracking event when a user interacts with the expanded image’s background, headline, and messaging.
Expanded Image URL ET (Default and Custom)
Description
Type
Location
Expanded image background click (default)
clickURL
expanded-column-background-#
Expanded image background click (custom URL)
clickURL
expanded-column-background-#-custom-#
Expanded image headline click (default)
clickURL
messaging-#
Expanded image headline click (custom URL)
clickURL
messaging-#-custom-#
Expanded image messaging click (default)
clickURL
messaging-#
Expanded image messaging click (custom URL)
clickURL
messaging-#-custom-#
There are no rows in this table
*Blue background rows are the new custom URL tracking that will only execute when the Javascript code snippet has been added to the unit. Otherwise, only our existing default tracking events (rows without the blue background) will trigger as expected.
For Ad Solutions
Ad Solutions producers must engage with Campaign Management (CM) to receive the custom URLs from the client via Monday.com. The Ad Solutions producer will be responsible to add those URLs to the recipe — the CM should not make changes in the CustomJS field on the creative.
If you have any questions, please feel free to reach out to Lana Chiad (@lana.chiad on Slack).
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.