Skip to content

Images

There are a few ways to add images to Grove stories/episodes. These ways have a lot in common.

File types

Grove likes PNGs, JPGs and GIFs! Yes, GIFs! All are uploaded the same way. Grove does NOT like WebPs.

Primary Visual

This is the image, gallery or video on a news story or pod episode that appears below the headline (and player, if present) and above the body text. It's in the Main tab.

Change None to Image from the dropdown.

Click our good friend, the magnifying glass icon:

Now follow the instructions for Inline image, below.

Inline image

This is an image in the body text. Start by clicking the mountain-range icon in the toolbar of the editor.

Click our good friend, the magnifying glass icon.

You will see an image search window appear. Since we shouldn't be reusing stuff without express permission of Visuals, go straight to the New Image button in the lower-left corner of the window:

Click the Choose button to the right of New Upload under File.

Behold! You are now looking at your computer's file system. Find your image file and click it

OR!

Drag the image from your computer into Grove:

There it is! Now let's look at all the fields below it.

Internal Name: This is what the image will be called in Grove. It will default to the file name or whatever's in the metadata.

Copyright Type: Same as in Seamus. Choose the proper one for rights management purposes.

Caption: Edit it! Here are our guidelines.

Alt Text: This will autofill with the original caption, but you can and should do better. Here are some guidelines for writing it.

Credit: Will fill in automatically if the photo has metadata. If not, here are our guidelines.

Source: Will fill in automatically if the photo has metadata. If not, here are our guidelines.

NOTE: Grove works a bit differently from Seamus here, at least for now. You'll often need to take the Source (Getty Images, AP, etc.) from the Credit field and paste it over whatever's in the Source field, so you have the photographer's name in Credit and the agency in Source.

Known issue!

Right now, you can't have an empty field if the image has metadata for it. The best you can do is add an empty character. Here's how. You'll still get a rogue slash, though.

Source URL: Sometimes you need a link to Storify or whatever in a source. Here's where you put that link.

Internal Notes: idk

Tags: No need.

As for Enlargement and Links, if you didn't do enlargements in Seamus, don't do it here.

To link a photo, add the URL under Link URL.

Ignore For Stations, natch.

When all this is done, click the Save button in the upper right, then the < Back link in the upper left:

You're here again, with one difference:

Yes, that's the image's Internal Name at the top of the window under Label. Click the name.

Whoa! Now it's in the story!!!

From here, if you have changes to any of the above, you don't have to leave the story. You can edit them there, under the photo.

Image crops

Grove is going to crop for you. Most of the time it will do a decent job, but you need to check its work.

Start with the Styles tab:

Make sure you're looking at NPR Crop:

Under Display Size, you'll see, at least for now, small, medium, large and x-large. If you're putting the photo in text, small and medium will have a text wrap and will appear in the right margin.

Under Image Crop, you'll see some familiar vocabulary:

If you leave this set to Automatic, the photo will use the Custom crop.

Your old friends Standard, Wide, Square, Slide, Brick, Vertical and Custom are here, too. They are cropped for you. To check that they look OK, do the following:

  1. Choose Standard. Look at the preview. Does it look OK?
  2. Choose Wide. Look at the preview. Does it look OK? This photo will appear as the promo image on the homepage.
  3. Choose Square. Look at the preview. Does it look OK? This photo will appear as the promo image on mobile.

If you're using Slide, Brick or Vertical, check those as well.

Custom is the same as Automatic. It will show the image at the original crop and aspect ratio, which is generally what you want for news images.

Focus point

When you open the image with the pencil icon, you will see the image with the words "Click inside the image to set a focus point for all sizes" at the bottom. Why? When a photo is too tall for its crop, you can set the focus point higher or lower to change what it shows.

Adjusting the focus point takes this crop from this:

To this:

Manual crops

You CAN change the crop beyond what focus point will allow. This is how:

  1. Click the pencil near the upper-right corner of the photo.
  2. Click the paintbrush (not a pencil) in the upper-right corner of the photo:

  1. Click the SIZES tab.
  2. Under Filters check Npr.org:

  1. You'll see, in this order: Brick, Custom, Slide, Square, Standard, Vertical and Wide.
  2. Click the image you wish to manually crop.
  3. Size and position the box however you want:

  1. When you have cropped all the images you want to crop, click the blue DONE button.

You can undo the crops on single images or all the images at once, using the Reset button.

Promo images

These are the images that appear where your story is listed. For instance, the promo image for the homepage is the Wide crop of the Primary Visual. But what if you want one photo on your story and a different photo on the homepage?

That's what the Promo tab is for.

To change the promo image for all sizes, go to the Promo tab and use the magnifying glass to choose something else:

Now you have changed the image for ALL promos — homepage and mobile and wherever the Standard crop goes. Use the Refresh All Promo Images? toggle to see them populate:

If you want to change individual promos — like have an image of Margot Robbie on the desktop homepage (Wide) and Ryan Gosling on the app homepage (Square)?

You'll see this in the Promo tab — and it will probably have your ORIGINAL image, not the new one, btw:

Expand each one you want to change and select a different photo. If you want to crop it, do the usual — pencil, paintbrush, Sizes, Npr.org, etc.

Apple News

There are four Apple News Custom crops.

If you don't use these, the image that will appear on Apple News stories is the one you uploaded, complete with its original crop and aspect ratio. No other crop "sticks" on Apple News.

They appear in the Styles tab for images:

They also appear in the SIZES tab in the Image Editor:

Galleries

To add a Gallery to body text, click the mountain-range icon and choose Gallery.

Add a Title and Description, if you need them. If you don't, don't.

Hide Title And Description toggle doesn't work.

Hide Caption On Slides doesn't work.

Under Items, you should choose Advanced.

Where it says Grid View, change to List View. It should look like this:

If you want to use a gallery that's been built, choose Use Existing Gallery under Items instead:

Click Upload Files or Add Image.

If you click Add Image, you'll see a window with Item and a magnifying glass at the top. Click the magnifying glass. Now you're in a search window:

Start finding and clicking the images you want. When you're done, click the X in the top-right corner of the search window.

You're back in the gallery. If you need to edit captions, etc., do it now.

When you're done, click Save & Close.

If you choose Upload Files instead of Add Image, you can choose multiple files or choose a folder. Your files will appear. Whatever you see for metadata, ignore and proceed.

Click Upload. You can then edit metadata individually (if your images actually had it). If you don't see a place to edit that, make sure you switched Grid View to List View.

When you're done, click Save & Close.

Bulk upload

Drag files or a folder into the Upload widget on the Grove dashboard:

Behold, all of your files will upload:

All of the fields below the images will be empty. Anything you add here will apply to ALL IMAGES. If all of your images are from wires, you can set their Copyright Type all at once!

When you're done, you'll see all of your images in a search window.

Advanced

Get the URL

On the image editing page, click the three-dot icon next to the paintbrush icon:

Choose Original Image and the image will open in a new tab, with its true URL.

See all metadata

On the image editing page, click the three-dot icon next to the paintbrush icon. Choose Source Data. You'll find the original file name (scroll to OriginalFilename) and other goodies here.

Find resolution

The resolution of the image as uploaded will appear wherever the Internal Name does — in stories, at the top of the photo editing page, in search, etc.:

The AR after the dimensions stands for "aspect ratio."