Create Your Favorite StateImpact Features in Core Publisher

NPR Digital Services has created an excellent resource for reporters who are new to Core Publisher, replete with a downloadable manual. There are a few things, though, that we’ve grown accustomed to created on our WordPress StateImpact sites that are not yet included in that documentation.

Below are some of our recommendations for how you can duplicate some of those features (including maps, charts and graphs, tables, document viewers, images, topic pages, pages, featured posts) on your station site.

MAPS

  • Google Fusion Maps can be embedded as iframes and include the new built-in legend feature. This works well in both Core Publisher posts and pages.

Here is some guidance to help you through that process.

CHARTS AND GRAPHS

  • Google Spreadsheets will likely be the best option, even though images will have to be created and uploaded as full-screen images OR as iframes. It isn’t optimal, but it work.

Toolbox Instructions from Emilie Ritter Saunders on embedding them (and instructions from Yan Lu on creating charts and graphs, if you’re not too comfortable with that part).

  • For ready-made Google charts with official data, like this, the iFrame embed is a good option and easy to update.

  • Also, if you are going the iframe route,know that you can modify the iframe width and/or height to 100%. To do this, simply add 100% (including the percent sign) into the embed code, overriding the pixel measurements.

TABLES

  • Tables can easily be displayed in Core Publisher by using the iframe publishing option in Google Fusion Tables. However, filterable tables are not an option, unfortunately.

  • If you want to take it out of the iFrame and simply display the entire table, make sure the code reads: scrolling = “no”

Here are some handy Toolbox Instructions from Emilie Ritter Saunders on embedding tables in CP.

DOCUMENTS

  • One option for displaying documents is to use Scribd, a free tool that displays nicely. However, it doesn’t give you the option to annotate them, like we’ve been able to do with Document Cloud.

  • Document Cloud CAN be embedded in CorePublisher with the use of a simple html iframe code.

To do this, cut and paste the code below into the your html, or source, viewer, inserting your DocCloud url:

<p><iframe src=”[INSERT ADDRESS FOR YOUR DOC HERE,  LIKE: https://www.documentcloud.org/documents/289870-clevelandplanfinal.html” style=”float:left” frameborder=”0″ height=”500″ scrolling=”no” width=”600″></iframe></p>

  • Another option, if you don’t want to display your document, is to upload it directly to Core Publisher and insert it in your post. This will create an inline link to the document. .

To do this, navigate to content–> file and simply drag and drop your pdf or other files into the page or post.

IMAGES

  • Posts: You have two options in Core Publisher: smaller, right-aligned images and and full width. Be sure to pay attention to where your cursor is when you upload the photo, as that is where your image will be inserted. You can also go into source view (html) to move image code without removing and replacing your image.

  • Know that you CANNOT easily link out from an image in a post or page to another post or page. If you have a savvy web developer and an available server, though, you might be able to create a workaround.

Here’s how you do that, courtesy of NHPR’s lovely digital producer Sara Plourde:

1. Create an incredibly basic html file with images and hyperlinks.
2. Upload it to your station’s server, if you have a space for that.
3. Create iframe with source code that pulls from said html location on the server. For example:
<p><iframe src=”http://info.nhpr.org/sites/default/files/files/WOMButtons.html” style=”float:left” frameborder=”0″ height=”80″ scrolling=”no” width=”600″></iframe></p>

  • Size: Core Publisher only provides two image sizes. However, you can also use the above method to iframe straight images and display them in their original glory. Ms. Plourde did that with this one by uploading it to the NHPR server and inserting as an iframe, using the code below:

<p><iframe src=”http://mediad.publicbroadcasting.net/p/nhpr/files/GunSeriesLogo.png” frameborder=”0″ height=”150px” scrolling=”no” width=”600px”></iframe></p>

TOPIC PAGES

  • Here are Digital Service’s handy instructions for creating a Topic Page in Core Publisher. There are a few differences to be aware of:

    • Tags: You can pull in posts from up to five tags!

    • Featured Image: You can have a primary image used to promo the page.

    • Related Content: While there isn’t a specific related content widget, you can add your related content via inline headlines (but without any images).

    • Multimedia: You’ll need to use iFrames for images, video, maps and tables and stuff (see above).

PAGES

  • Here are the instructions for creating a page in Core Publisher.

  • On a static page, you can remove the right rail if you need to (in order to display something visual). Although it makes it non-responsive, you can also go full-width to support really big visual elements.

  • It is also very important (as it is in WP) to NOT switch back to view mode from source mode after building something. This strips all code and styling and goofs up your page functionality.

JIFFY POSTS

  • Instructions on using a similar tool, called a “web clip” in Core Publisher-land.

ESSENTIAL READING / FEATURED POSTS:

  • Instructions on using a similar tool, called “sky boxes” here.

  • The Core Publisher folks have also created additional ways to feature select content, including:

  • Here is documentation on what type of content can be added to each area of your site.

Leave a Reply

Your email address will not be published. Required fields are marked *