ESCO Summary Links Web Part

Table of Contents

Summary Links Web Parts 3

Overview of Summary Links Web Part 3

Editing the Fields 4

Current Set of Styles 5

Vertical_ImageLargeHeader 5

CustomerQuote_Quote 6

CustomerQuote_CustomerInfo 6

CustomerQuote_ReadLink 6

ImageAndLargeHeaderFeature 7

ImageAndMediumHeader_NoLink 7

MediumHeader_NoLink 8

RedBulletLink 8

RedLink 9

RedLinkWithSmallPDFIcon 9

ImageWhiteTextBlackOverlay 9

FeatureWithRedHoverAndReadMore 10

FeatureWithLearnMoreLink 10

FeatureWithReadMoreLink 11

FeatureWithReadMoreLinkTitleTop 11

NewsItem_NoImage 12

NewsItem_WithImage 13

PressRelease_WithPDFIcon 13

TheEdge_HeaderNoLink 14

TheEdge_IssueItem 14

FocusOnArrow 14

ImageNoLink 15

WhiteSpace 15

Summary Links Web Parts

Outside of the Page Content, Page Image, and Rotator Images, you will be using mostly the Summary Links web part to populate the pages with content. The Summary Links web part is quite versatile and allows you to set text, images and links without having to worry about formatting.

I have several pre-formatted Summary Links web parts loaded into the web part gallery, but once you have one on the page, you can completely change the styling applied by selecting a different Style setting.

*** Note that the Dealer Link Web Part is an exception to this

Overview of Summary Links Web Part

After you’ve added a Summary Links web part to a page and the page is still in edit mode, you will see the various sections that you can edit.

Each section that is editable has an icon to the top and left, and if you click on it you will see drop-down menu with Edit and Delete options. Each section can contain various text items, an image and a link, so each section can appear quite large.

There is also a blue section at the top where you can re-order the items within the web part.

Typically the Chrome (web part title bar and border) is set to none, so you don’t actually see the web part title unless the page is in edit mode. But you can also use the web part title bar to act as a head for the web part.

Editing the Fields

To edit a section, click on the notepad icon and select Edit. This will open up the dialog box for that item.

The screenshot below (on left) is showing the dialog box and comparing it to how the information is rendered on the page (on right).

· The Title field is displayed below the image

· The Description is displayed below the Title

· The Image URL is set to the image which is displayed

· The Link URL is used by the “Read more” link *Remember to select if you want the link to open in a new window or not

· And perhaps the most important piece is the Style drop-down at the bottom which in this case is set to FeatureWithReadMoreLink.

Even though in this example and in the following illustrations I frequently utilize Title, Description and Image fields, the Description and Image fields are optional for most of them. Most of these Styles will still look good if you only need to display a Title and Link, or some combination of fields.

Some of the Summary Links use the Tooltip as an additional display field.

Current Set of Styles

I’ve created quite a few pre-defined Styles for the Summary Links and they work together with specific zones in the page layouts to display content in a specific format.

Please be aware that some styles do NOT display all the field fields which might be set in the dialog box. As you apply different Styles, you might see the Description field appear and disappear depending upon the style selected. You might also find that for some Styles the text is rendered as a link, and sometimes it’s rendered as plain text.

If you drag a Summary Links web part into a zone and the formatting isn’t quite right, I can most-likely fix that using CSS behind the scenes. So don’t worry if things need to be tweaked a little. I’ve also not had a chance to test placing each web part into each zone to see how things are rendered.

Vertical_ImageLargeHeader

/ Title is displayed below image
The Image is displayed at the top
The Link URL is used for the Title link
The Description is not displayed
This web part will most likely work with different sized images. If there is a lot of title text, it may be displayed wider than the image. I can fix this issues using CSS.
Web Part Library > ESCO Summary Links:
Feature Image and Title

CustomerQuote_Quote

CustomerQuote_CustomerInfo

CustomerQuote_ReadLink

/ The Customer Quote web part is made up of three different Styles.
CustomerQuote_Quote
· Only displays the Description field, not the Title. (The quote images are applied using CSS, not in the web part settings)
CustomerQuote_CustomerInfo
· Title – Customer Name
· Description – Title and company name
· Image – Headshot of customer (should be 68px by 68px)
CustomerQuote_ReadLink
· Uses Title and the display text for the link and the Link URL as the link.
Web Part Library: ESCO Summary Links:
Customer Quote

ImageAndLargeHeaderFeature

Actual web part is larger than this screenshot / ** the gray background only appears when using the Wide Right Rail Page Layout and web part is added to the BottomRowGray web part zone.
Title is displayed as large red text
Description is displayed below it
The Image is displayed at the top
The Link URL is used for the “Learn more” link
Web Part Library: ESCO News & Media:
Large Feature with Image

ImageAndMediumHeader_NoLink

/ This is one Style that does not render any of the content as a link. So if you need to display content which does not link to anything, this will work.
Title – is displayed as a medium sized header
Description – is displayed, if available
Image – is displayed above the Title
Web Part Library: ESCO News & Media:
Wide Right Rail Feature

MediumHeader_NoLink

/ This is one Style that does not render any of the content as a link. So if you need to display content which does not link to anything, this will work.
Title – is displayed as a medium sized header
Image – is displayed above the Title
Description is NOT displayed
I don’t have a pre-formatted web part in the library using this Style, but you can easily utilize another one from the library and just change the Style.

RedBulletLink

When in edit mode, the bullets will not appear aligned
/ You can use this Style in combination with others to create a bulleted list of links under a title or image
Title – displayed as text for link
Link URL – used for URL for link.
** Don’t forget to set the link to open in a new window if linking to PDF or external web site.
Web Part Library: ESCO Summary Links:
Red Bullet Links

RedLink

/ You can use this Style in combination with others to create a list of links under a title or image
Title – displayed as text for link
Link URL – used for URL for link.
** Don’t forget to set the link to open in a new window if linking to PDF or external web site.

RedLinkWithSmallPDFIcon

This is shown with the web part in one of the gray background zones in the right rail. / You can use this Style in combination with others to create a list of links under a title or image
Title – displayed as text for link
Link URL – used for URL for link.
PDF Icon is being placed there by global styling, and not the Image URL of the settings.
** Don’t forget to set the link to open in a new window if linking to PDF or external web site.

ImageWhiteTextBlackOverlay

/ You should place this web part in the right rail, and in NOT in a gray background zone.
Title – displayed as text for link, white on a black background.
Link URL – used for URL for link.
Image – is displayed above the Title
Web Part Library: ESCO Summary Links:
Service

FeatureWithRedHoverAndReadMore

Web part has red background/white text hover state
/ Title – is displayed as a medium sized header
Description – is displayed
Image – is displayed above the Title
Link – the whole block is a link
The “Read more” text is part of the web part styling and can’t be edited through the settings.
Currently this Style is only used on the home page of the site.

FeatureWithLearnMoreLink

/ Title – is displayed as a medium sized header
Description – is displayed
Image – is displayed above the Title
Link – the text “Learn more” uses the link URL
The “Learn more” text is part of the web part styling and can’t be edited through the settings.
Web Part Library: ESCO Summary Links:
FeatureWithLearnMoreLink

FeatureWithReadMoreLink

/ Title – is displayed as a medium sized header
Description – is displayed
Image – is displayed above the Title
Link – the text “Read more” uses the link URL
The “Read more” text is part of the web part styling and can’t be edited through the settings.

FeatureWithReadMoreLinkTitleTop

NewsItem_NoImage

When the item is out of edit mode text will be aligned
/ Title – is displayed as red text
Tooltip – is used as the second line, to display Publication Name and Date in example shown left.
Description – is displayed as normal-sized text
Link – the Title will be used as the link
Web Part Library: ESCO News & Media:
Industry News
*even though this is in the News and Media gallery you can use the web part in other areas

NewsItem_WithImage

/ Title – is displayed as red text
Tooltip – is used as the second line, to display Publication Name and Date in example shown left.
Description – is displayed as normal-sized text
Image – is displayed to the left of the item
Link – the Title will be used as the link
Layout is designed to work with images that are 140px wide.
Web Part Library: ESCO News & Media:
Industry News With Image
*even though this is in the News and Media gallery you can use the web part in other areas

PressRelease_WithPDFIcon

/ Title – is displayed as the smaller gray text at the top
Description – is displayed as the red larger text
Link – the Description will be used as the link
The PDF icon is part of the global styling and cannot be change in the web part settings.
Web Part Library: ESCO News & Media:
Press Releases
*even though this is in the News and Media gallery you can use the web part in other areas

TheEdge_HeaderNoLink

TheEdge_IssueItem

This web part is found on the Multimedia page, which is currently not shown in the navigation
http://webextraspfprd.web.escoextra.local/EN/company/news/Pages/Multimedia.aspx / TheEdge_HeaderNoLink (circled in blue, on left)
Title – is displayed as the smaller gray text at the top
Description – is displayed as the red larger text
Image – shown to the right
TheEdge_IssueItem ( 2 items circled in red, on left)
Title – is displayed as the red text
Description – is displayed below in bold.
Link – is used to for the Title link
The “In this issue” text is part of the styling and cannot be edited.

FocusOnArrow

/ This style is only used on the home page of the site, but could be used other places.
Title – is displayed as the white text
Link – the Title will be used as the link
Image – In the image library linked below there are 5 special Arrow images which have both a gray and red version. I’m using global styling to show the red portion of the image for a hover state.
http://webextraspfprd.web.escoextra.local/General%20Other%20Images/Forms/AllItems.aspx
To re-use this styling you would need to select the Style and then use one of the Arrow images.

ImageNoLink

/ This Style can be used when you want to display an image. Even though you must set a Link in the web part settings, it will not be used.
Image – is displayed as the image
This can be used anywhere on the site and is a better option than the Image Viewer web part because you can easily browse to the image instead of having to copy/paste the path.
Web Part Library: ESCO Summary Links:
Left Column Product Image

WhiteSpace

This Style can be used when need to add some whitespace. Even though you must set a Link and Title in the web part settings, it will not be used.
This can be usefull if trying to align content with web parts in other zones.