Promo Widget Item Component Usage
Add component to any page section in the XML, either at the Lithium Quilt level or in the page Custom Content areas that render in your Lithium Quilt. Parameters must be included. Instances without any parameters will not display.
<@component id="jmp.PromoWidgetItem" parameters />
Promo activation label
Promos are considered inactive and will not show up in rotations until the article label promo_active is assigned to it.
Component instance-level parameters
These configurations are made at the XML level. Parameters are additive, so labels + tags + promoid would include all promos that match any of the included terms except those that you have excluded using the exclude parameter.
Lists of more than one parameter value, i.e., labels="label1, label2" are rotated randomly once for each page refresh, not by Javascript.
Parameter
|
Description & Example
|
|---|
promoid
|
Displays the ad with Lithium ID entered here i.e., "134". Can be a comma-separated list of one or more ads to randomly rotate per each page view (on refresh).
<@component id="jmp.PromoWidgetItem" promoid="134" />
<@component id="jmp.PromoWidgetItem" promoid="134, 718, 401" />
|
labels
|
Randomly displays ads using the labels listed here, comma-separated, one or more.
<@component id="jmp.PromoWidgetItem" labels="Godzilla" />
<@component id="jmp.PromoWidgetItem" labels="Godzilla, Superman" />
|
tags
|
Randomly displays ads using the tags listed here, comma-separated, one or more.
<@component id="jmp.PromoWidgetItem" tags="Goats" />
<@component id="jmp.PromoWidgetItem" tags="Goats, Birds, Cows" />
|
start
|
Displays selected ads starting on the date entered here. Must be in YYYYMMDD format. If this is not configured, ad will show immediately if indicated by other configurations.
<@component id="jmp.PromoWidgetItem" start="20180214" />
|
end
|
Ad will not display after the date entered here. Must be in YYYYMMDD format. If this is not configured, there is no end date.
<@component id="jmp.PromoWidgetItem" end="20180315" />
|
exclude
|
A list of Lithium IDs to exclude from the array. For example, you might want all promos that are in label "humor" but exclude ID "123" and "456".
<@component id="jmp.PromoWidgetItem" labels="humor" exclude="123,456" />
|
Promo item-level configurations
These configurations are made at the promo ad level, in the body text (and cover image, if applicable). Separated into sections, Content, Button, Colors, Inline Image, Background Image.
IMPORTANT: When pasting, please use "past in plain text" or "paste and match style" or the like depending on your platform. If you accidentally overwrite the input area, simply hit UNDO. Content not in the proper input areas will not be rendered.
Content
Should be text-only. No HTML or other styling in these.
| Name |
Description |
Default |
|---|
Headline
|
First, largest text |
"text"
|
Subhead
|
Second, smaller text |
"text"
|
Message
|
Body text, smallest |
"text"
|
Action / Button
Colors should be set using only hexadecicmal color values, i.e., #cc6600 or the CSS keyword transparent.
| Name |
Description |
Default |
|---|
Link
|
Target URL users will go to when they click on the ad |
"http://www.jmp.com"
|
Button text
|
Button text |
“Learn More”
|
Button bg color
|
Main color of the button |
#cc6600 (JMP orange)
|
Button text color
|
Button text color |
#ffffff (white)
|
Colors
Colors should be set using only hexadecicmal color values, i.e., #cc6600 or the CSS keyword transparent.
| Name |
Description |
Default |
|---|
Text color
|
Color for headline, subhead, and message text |
#ffffff (white)
|
Background color
|
Background of promo color. (Background images will have opacity set to 30% by default to show color through them). |
#cc6600 (JMP orange)
|
Border color
|
Border of the ad to differentiate from the ad background and the page background. |
#dddddd (medium gray)
|
Background Image
Set the background image using Lithium’s Cover Photo in the right sidebar (example shown at right). Recommended image size is 1900px x 500px in order to be able to display predicably at all screen sizes.
Selected image will automatically be placed in the background and have its opacity set to 30% by default.
If you want to change how the the background image is displayed, the image's css opacity and position properties are configurable:
| Name |
Description |
Default |
|---|
Image opacity
|
0-100. 0 is fully transparent and will show only the background color, 100 is fully opaque and will show only the background image. |
30
|
Image position
|
CSS background-position values, i.e., "left","center","right" and "top","center","bottom" . Use any two, for example, "left top". Should always be x-axis followed by y-axis, i.e., "left top" |
center center
|
Inline Image
Not recommended but there might be a call for this in some circumstances, such as a headshot on the left or the like.
| Name |
Description |
Default |
|---|
Image
|
An image to put before or after all the text. Keep it simple, if at all. Follow directions when creating an ad. Place cursor in the photo field, then use the Photos button in the text panel. |
null
|
Image position
|
Should the image be before text (vertically) or after, and on the left or right of text? Values are before, after, left, right, two at a time. |
before left
|
