Embed HTML in Lead Art Spot

| | Filed Under: Tutorials

In addition to pre-existing templates for lead and inline art spots (like video and youtube), you can also embed ANY html code you’d like. This can be an embed option from a service like Vuvox or HTML that you write, pointing the media that you upload to our rosebud.journalism.berkeley.edu server. For this tutorial, we’ll walk you through embedding a Google MyMap, like the ones we learned in Multimedia Bootcamp. The principals apply to all services that have an embed option.

The End Goal

media_1256247182983.png

Between our title and byline is the lead art spot. It can be video, youtube, a photo or any HTML you’d like.

Complete your project at the external service

media_1256228762170.png

Above is a complete map project at Google Maps.

Find the “embed code” option

media_1256228874220.png

In Google Maps, the embed code is hidden under the "Link" option. Under the "Paste HTML to embed in website" there is a default embed code. Default code will usually work, but probably won’t be a great fit for our site. When possible, find the "customize" option for embed code. Our goal is to export forgeign projects to a size that match our site’s size pefectly.

Set custom size

media_1256229472253.png

Find the custom embed size option. The size that we really care about for the lead art spot is the width. All lead art on our sites needs be 620 pixels. The height is not set, but you should try to make your art as horizontal as possible. Vertical art is prohibited in all but the rarest of circumstatnce. Square art is frowned upon.

Copy the embed code

media_1256229769197.png

Embed the code into your post

media_1256229923763.png

In the Custom Fields of our post, select a custom field of type "lead_embed". In the Value, paste your embed code.

Add our title and caption

media_1256229971163.png

The value field for the embed work much like our simpler lead_video, lead_youtube, lead_vimeo, etc. The format is always ID|Title|Caption. The "|" is the "pipe character, which is the key (plus "Shift") above the "return" key on your Mac. Unlike YouTube, Video and Vimeo, our ID for lead_embed is very long, and is simply our embed code. After the embed code put in the pipes for title and caption. The title and caption are parsed out by CalPress and inserted in the appropriate spot in your post.

Filed Under: Tutorials