News posts standards and workflow - ucsf-ckm/ucsf-library-ux-and-web-documentation GitHub Wiki
Where
News items are simply blog posts on the main Library site. Each post is assigned a category, and it's easy to view or share a link for only a specific category like Scholarly Communication.
Built-in Layout Features
- Each new post will display the category and any (optional) tags that you've added
- The required featured image will appear at the top of your post, and also on any pages that list multiple news items
- The author photo and bio will appear
- A call to action telling people how to subscribe to newsletters will appear
- Comments are disabled, due to high maintenance and relatively low value
STEPS for writing a news post
Power tip for editors: optimizing
Power tip for editors: editing text
Save the final draft and publish
Simplify your editing space
This only needs to be done once, but it will streamline your interface for all posts that you write.
- Log into the Library website using your WordPress credentials and the editing URL
- Go to Posts > Add New
- Click the three dot kebab menu in the upper left then the Options tab
- Check only the necessary boxes (see image below) sparing you from clutter
- When finished, click the x to hide the options
From now on, you will only see those key panels.
Preparing Images
It's good practice to prep any images you'll be using ahead of time, so they're all ready once you begin writing.
Featured image
- Each post must have a featured image. It appears at the top of the post, and also on the home page when your post is being highlighted or when a user views the list of news items
- After cropping, the image should be 1200px wide with an aspect ratio of 1.91:1 . Do not use smaller images, or they will appear pixelated.
Other images in a post
Images within the body of the post should still be cropped for the best effect in the layout, but they don't need to be a particular ratio for screen resizing like the large featured image.
Cropping and Naming
If you have the software and skills, use Adobe Lightroom or Photoshop or your image editor of choice. If not, use this recommended free web-based tool:
- Go to https://pixlr.com/x/ and follow the instructions to upload your photo
- Select the Crop tool and select aspect preset 19:10 and click Apply to set the aspect ratio
- Edit in any other way you like and save to your computer
- Locate that image and change the name to something descriptive
You now have a file that's ready to be used in a news post!
Optimizing for the Web
This is an important final step to make sure that pages load fast, but on the main library site, it will be done automatically when you upload an image for use in a post.
Power tip for editors: optimizing
If your post has several images within the body (like Carvey – the 3D Carver) it's worth doing a little extra work to optimize more aggressively, since the automatic part is mainly for the large featured image.
When you save out of Pixlr, images in the body should be 900px width max and JPG quality MED. For the featured image, 1200px width max and JPG quality MED
Info about the post
Now that you have your images ready, it's time to write the actual news post
- Create a new post and give it a title
- Add a primary category from those in the pre-determined list
- Add optional tags if you want to include some really specific keywords. If post will be shared to Instagram, be sure to include the tag:
linkinbio - Set a featured image
- Save as Draft in the upper right
Main content
- Once all information about the post is complete, it's time to add the main content
- Write your draft using the best practices in the Editorial Style Guide for the UCSF Library
- Use the basic WordPress editor -- DO NOT click the Edit with Elementor button
Best practices
Try running your content through the Hemingway Editor first to get suggestions for simplification and clarity.
For trouble-free formatting, add links and headings once your text is actually in the WordPress post editing area. That is, if you are writing somewhere else and pasting into WordPress, plain text is best. As of 2022, pasting from Microsoft Word works pretty well but pasting from UCSF Box brings in a bunch of junk and should be avoided.
Power tip for editors: editing text
Write or edit content ahead of time in StackEdit. It will strip out any junk from Box or Word and you can add links and basic formatting using plain text markdown. When you copy-and-paste content from here into into WordPress, everything will just work.
Blocks
- Instead of one big bucket, WordPress now edits content in blocks.
- Each block displays a toolbar when you click into it
- You can add more text by just hitting return, but the + gives you other block options like list or images
- Blocks can be easily moved up and down to rearrange
Images in the main content
Guidelines
- Images in your post must still be cropped and named descriptively, but they don't have to be a specific ratio like the Featured Image
- All images must have alt text for screen reader accessibility (a few words that would explain the meaning of the image to a blind user.)
Image blocks
Start by inserting a block for an image or a gallery. An example post that makes good use of galleries is Makers Lab Art Show Recap.
- Set alignment and link to: None
- Set size to: Full
Best practice for image alignment
- Set the image alignment to none. While it's possible to set it right or left to allow text wrap, it often doesn't reflow very well and is not worth the headache.
- To set images 2 or 3 across, Create Gallery works well. See an example: Makers Lab Art Show Recap.
Galleries
Use to show a series of images in columns
Animated gifs
You can embed one from giphy.com using the gif block
Another approach is to upload it to the media library and use just like any other image. The catch is, the image must be re-sized to the correct pixel width before uploading. Resizing within WordPress will break the animation and it will display as just a static image. See example post.
This is one example of a tool to help with thathttp://gifgifs.com/resizer and another.
Video embeds
There is an embed block that works for YouTube and Vimeo, but videos on Kaltura (Media@UCSF) are not supported. For those use a custom html block.
- Go to the share tab under the Kaltura video (must be logged into MyAccess) and copy the Embed code after setting time and player size to 800x450
- Use a custom html block in WP and paste in the long embed code
Preview the post
At any point after saving a draft, you can preview what the post will look like. Here's a preview of this finished post. The layout and addition of category, tags, author, etc. is all automatic. If you view a live post and resize your window, you can see how the featured image changes to fit the screen size.
Save the final draft and publish
Submit for review
Finally, Save Draft again click Submit Review
Log out of WordPress
Contact your designated editor via email or Slack to discuss the best publish date.
Publishing
A few selected Editors can publish posts after reviewing the content, images, and metadata.
If you are an Editor, authors will need you to publish their posts.
- Review the information about the post (i.e. category, tags, title, featured image) one more time
- Review the content for clarity and consistent Library voice
- Make sure that appropriate images have been added
- Publish the post in the upper right area of Wordpress
In cases where the post author submits all content to the editor instead, the editor will create the post and set the author dropdown to the appropriate name before publishing.
Social Media
The final step is to share the newly published news to the Library's social media accounts, as appropriate.