1) Poor Caption Formatting

Carnegie Science staff connect with community members before the Great North American Eclipse.
This is a caption that describes the photo above. It is useful but is very hard to tell apart from the other text when embedded in a story. The only formatting you can do here is italics, bold, and links. Everything else breaks the caption, so you cannot change the size or font or add a page break in the html.  This is added via "data-caption="

The problem

The caption font is not distinct from the paragraph font and is not offset from the paragraph text when embedded. This is confusing when reading and looks unfinished/low quality. 

The solution

Create a distinct caption style that has a smaller font size and perhaps even a different font weight than the paragraph font. The caption should sit beneath the image and span the full width of the image. I would also suggest adding a break line to indicate the caption has ended. 

This is an example of a solution we created in HTML:

Carnegie’s Phillip Cleves scuba diving on the Great Barrier Reef in Australia. Cleves uses cutting-edge biology techniques to better understand the risks coral face due to climate change.

EXAMPLE FORMATTING: Carnegie’s Phillip Cleves scuba diving on the Great Barrier Reef in Australia. Cleves uses cutting-edge biology techniques to better understand the risks coral face due to climate change. Credit: Amanda Tinoco/Carnegie Science

 


2) Image Description on Embedded Images

Plant Biology Building

Plant biology building and the corn fields in Palo Alto, CA. 

Plant biology building and the corn fields in Palo Alto, CA. 

The problem:

Adding an image description automatically creates a caption that starts as a "fig-caption" tag but gets turned into a "data-caption" tag and creates multiples of itself. Any attempt to edit or adjust the caption causes it to create weird multiples of itself. Toggling the "caption" option on in the image editing screen does the same. There is no way that we can find to turn this off. If an image has an image description and we try to embed it, it is essentially unusable, and we need to reupload it. 

  • The image description should not automatically become the caption. We don't always want the image description to be the caption. Sometimes the image description has more detail than we would want in a caption or vice versa.
  • The image description should not override the image caption. 
  • The caption shouldn't create multiple copies of itself.

The solution

  • An image description that is just that remains a useful metadata entry and is not related to the image caption. 
  • A place to manually add a caption that does not get overridden by the image description.

3) Files in Media Gallery 

The problem

  • The file name becomes the image's title on image carousels and the image description automatically becomes the an on-image caption (which actually looks really nice compared to other captioning on the website) and neither are easy to edit. You have to go into "Files" and change the information there. You can also plan your file names and image descriptions on upload. 
     
  • Because of the issues above (section 2), adding an image description to a pre-existing image file will mess up the caption anywhere else that image is being used. 
     
  • Other forms of media, like YouTube Videos, are similar and default to the title of the video as the media's title, which is often to long for the space. 

The solution

  • Keeping the automated file name and image description automated is probably fine, but we would also want to be able to manually enter the title and captions if we want. ​​