Logos

Sometimes coverage has logos. In-depth supports using any image file from the CDN as a logo. All file formats are supported, but it is strongly recommended you use an SVG.

Probably not. A multi-part project, possibly with sidebars, doesn't need a logo. If coverage is going to be spread out across a long time or across platforms (e.g. Olympics, election 2020) then a logo could serve as a unifying factor. Despite what an editor might insist upon, we generally recommend against project logos. They add clutter to a page and, being so new, often have little "brand value" for readers.

Warning

Sometimes, stories have a paid sponsors who want logos. This is not the tool for that. In-depth supports the corporate sponsor-logo ad code. Reach out to the Storytelling Studio to get this set up.

Examples

The Women of the Century project, such as this story, uses a project-wide logo.

Screen image of an in-depth story using a logo

Analytics

None

Configuration

Logo options are set inside a {logo} block in the configuration panel.

value purpose required default
logo CDN url for image, preferably SVG Yes None
altText Good, descriptive alt text for the logo Yes None
link When set with a full URL, the logo becomes a link to another page. No None
text Optional text below the logo, perhaps a project title. No None
textAlign Makes the text in the logo display be left, center or right aligned No left
size Make it large or small than the standard thumbnail rail size. No medium
offset Move the logo down this number of elements. Will be limited between zero and the length of the story (paragraphs and all assets) No 0
position Can be floated left, floated right or flat, which will unfloat the logo and put it in between elements. If offset is 0, it will sit above the first graf. No right

Example

{logo}
logo: https://www.gannett-cdn.com/usat-storytelling/marx/elex-logo.svg
altText: Gannett Election 2020 coverage
text: Gannett Election 2020 coverage
position: flat
link: https://www.usatoday.com/storytelling/election-2020-voter-guide/
textAlign: center
size: large
offset:0
{}