Content

There are a number of factors to account for when using images in hero unit sections of your website. Push10 has an excellent primer, and here is a helpful excerpt:

By default, the ideal website hero image size for full-screen background images is 1,200 pixels wide. However, if users are browsing on larger screens, these images need to scale up to fill the screen. This can often introduce some blur into the image. If the image is just a background image, this blur is often acceptable – even desirable. But if the image is a foreground image, or contains vital elements that must be sharp, we will often create larger source images in the range of 1,800 pixels or so. The upside? Sharper images. The downside? Larger files which lead to longer load times.

See also the Images section of the Guide to Local Government Websites for helpful optimization tips.

1. Hover over the ‘Hero unit (page header)’ widget and click edit.
   • 
2. Header is recommended  if you have a good landscape orientation image for the department 
   • Select the ‘Header’ radio button
   • Leave the ‘Text’ field as <h1>How do I add a background image to the page header?<h1/>
   • For container background, select the ‘Image’ radio button 
   • For image, select the ‘Yes’ radio button
   • Select an option for the ‘Image Vertical Alignment’ ( you can always go back and modify)
   • Click done
   • To add image, click on the ‘Set featured image’ link in the “Featured image” section located at the bottom right side  
   • Select either upload files or media library
   • Select image
   • Add  alt text 
   • Click on the ‘Set featured image’ button
   • 

Upload

Whether you’re using the featured image or the add media feature you upload your files to ProudCity just like you would attach a file to an email.

Once you have selected and uploaded a file, make sure to fill in the file details: title, caption, alt text and description. This will help with SEO and in the future when searching the media library to reuse the file.

Media library

Once files have been uploaded to ProudCity they live in media library for future use so you do not need to upload a new file every time you would like to use media in your content.  If you are diligent with you file descriptions as mentioned above, the search feature will be even more helpful as your media library goes.

Editing image in the dashboard

Once media is inserted into your content you can double click the image to get some quick edit options to format your text around your image.

If you click on the pencil icon you will get even more options for editing your media, including editing the size of the image. We recommend that you use the present thumbnail, small, medium, large and full size settings for consistency. If you need even more advanced editing capabilities, you can select “edit original” to rotate, crop and customize dimensions.

Tips

Credit and licensing

There is a lot of free media out there, make sure that you are getting permission and licensing if you’re using media that you did not create or pay for.

Creative Commons (CC) is the most common media license to encounter on the web, and essentially breaks down into 3 concerns (the actual licenses are more nuanced, but the gist is):

1. Use my stuff, just cite me!
2. Use my stuff, just not for commercial uses and cite me!
3. Use my stuff, but you can’t change it and cite me!

(you can learn more about the licenses here: https://creativecommons.org/licenses/ )

When getting an image off Flickr, Wikipedia, or google image search (try the advanced options), you will likely see the CC license along with the content, so just make note of the source.

To attribute an image using CC, simply edit the image’s caption with a brief message:

“CC Image courtesy of Librarian by Day on Flickr”

The maxim to follow with licenses generally is some attribution is better than no attribution!

Featured images are pre-formatted into some of our content types and templates such as news posts and departments. Oftentimes the feature post is highlighted in the header of content and previewed as a thumbnail on another page or list.

The add media option provides the admin with more flexibility to post media throughout their content. Simply put your cursor where you want the media to inserted and select add media to start the process.

Media input with the “Add Media” method will not show up in teasers lists, however.   To have an image display in the teaser view and to take more direct control over the appearance of a post, simply check the “Hide Featured Image” checkbox on the edit page after selecting a featured image.

There are some instances where a “portrait” (taller than wide) or “landscape” (wider than tall)  style image may look awkward or not fit nicely into your content.  If you are starting from a very large image, it could be possible to crop (see below) the image to the appropriate aspect ratio.  Often it is just easier to select a new image.

Images will generally be automatically re-sized (like when using the Page Header widget), but you can also select specific sizes when inserting an image into a post.

No minimum file size but some displays of images will not look great if you’ve started with a smaller image.  For instance, the “Page Header” widget in “Header” or “Full Header” mode really needs an image at least 1100px wide to not become visually distorted.

ProudCity recommends that video and audio be posted through a free online account like YouTube.  These services automatically make video streamable to mobile devices, and will easily reach the broadest audience.  YouTube has the additional benefit of being consumable by the home page Social Wall.

Not especially.  The standard file types listed above all have some level of “compression” and will be fine for web-based publishing.  There are certain, more rare, image formats like .tiff and .raw that are “un-compressed,” will likely be too large for easy viewing on the web, and should be avoided.

The most common image file types are: .jpg, .png, .gif.

ProudCity has a 25MB soft file size limit. If you need to upload larger files, please submit a ticket and we assist in large file uploads.

Please note that the following features will not be available for files over 20MB:

• Embedded Document preview on your website
• Indexing the contents of your file (if you are using ProudCity Search+Docs)

Because government serves a wide constituency, structured content in web pages is critically important in addressing the needs of all website visitors. It is particularly important for presenting truly accessible web content.

While ProudCity addresses many content structure issues “behind the scenes,” whether you’re using the our visual or text editors, it’s important to understand the basics and best practices of structured content as you design your web pages.

Learn more.

Information architecture is the critical first step to ensuring your digital government content is findable and usable by those seeking the desired information. Learn more »