Skip to Main Content
Call Toll Free: 1-800-788-4476

01_REUSABLE CONTENT STORAGE & STYLE GUIDE: Images

Stored content ensures consistent updating and overall appearance. This guide includes a page called Boxes to Map or Copy, and tips for formatting various components of boxes.

Before you upload a new image...

 

  • In Image Manager, review Shared Image Library for existing assets
  • Consider uploading an image, but first...
    • Make a decision whether to put new image in Shared Library for possible reuse (must checkmark), or in Personal LIbrary (the default)
    • Refer new images to Administrator to put in Shared Library before adding the image to a guide
    • Move to Shared and change the filename to match protocol.  File naming protocol:  [filename]_##x### in pixels for width and height  (e.g. PubMed-for-Handhelds_whiteborder_75x94.jpg is 75 pixels wide x 94 pixels high.
    • Choose a reusable image from folder labeled for size, appropriate to box in which it will appear. 
    • Is this how images get resized?  Experiment! Set percentage for width only!  with exception of Book or Journal covers inside Gallery boxes:  These need to be 200 px maximum height to look even.

Alternative Text

from https://support.springshare.com/accessibility/images
Tips for Alternative Text for Specific Types of Images

  • Purely decorative image - If the image is purely decorative and the surrounding copy explains the image, then alt text is most likely not needed. (e.g. alt= " ")
  • Images that are screenshots - If the image is a screenshot of a database or catalog, with annotations, it is strongly encouraged that you add descriptive copy around the image. Leave the alt text empty. (e.g. alt= " ")
  • Images that contain copy - If your graphic contains copy, be sure to either add in descriptive copy around the image or repeat that copy in the alt text.

How do I create an empty/null alt tag?

Just to be clear, when we state that the alt text is not needed that does not mean that the alt attribute isn't  needed. The HTML alt attribute should still be included, but with a null value.

Depending on the screen reader, it will either 'skip' over the image entirely or it will just say "image". Someone who is fully sighted would easily skip over a decorative image, therefore a null alt text value allows someone with a screen reader to accomplish the same thing.

To create an empty or null alt attribute, simply don't put anything in the alternative attribute field. Leave it completely blank.

This will automatically generate an empty null attribute. 

Book & Journal covers

Font Awesome

Using Font Awesome Icons

Adding a Font Awesome icon to your Rich Text editor is easy.

Add the following code via the Source Button in the RichText Editor at the location you want the icon to appear.

<i class="fa fa-lg fa-bicycle"></i>  

To further style your icon:

Size 60px: <i class="fa fa-bicycle" style="font-size:60px;"></i>
Size 80px, Blue: <i class="fa fa-bicycle" style="font-size:80px;color:blue;"></i>
Size 100px, Purple: <i class="fa fa-bicycle" style="font-size:60px;color:#8B008B;"></i>

from https://support.springshare.com/libguides/bestpractices/images  where sample images display at bottom [1/24/2018]

Naming an Image

Responsive images

Size and Alignment

Alignment

To center an image in a column, center the cursor and then add the image.

Alignment of assets that display images:  
Image Manager has a white rectangle in Logos_shared:  Logo_half-height_placeholder_150x76.jpg   
This is used to Indent an entry that lacks an image in order to align it with entries that are decorated with a logo 150px wide.

 

 

File size maximum

  • 80-150 KB for standard images
  • 250-350 KB  for larger images

 

Recommended Sizes in pixels - all saved images should have w x h appended to filename

As of March 2018, preferred image width is based on percentage width of columns.
These sizes fit well inside columns because they are sized bout 20px smaller width than portion (in pixels) of full banner width.

25%   280w    for narrowest columns
33% 350w
50% 564w    
75% 840w
100% 1170w is banner width
  • Book covers (locally produced covers are sized to match those imported from LibGuides' partner)
    • 180w x 270h or 208w x 270h  are common sizes for imported image from third party
      Height seems more important that width for book covers.  An exception to the rule that width "rules"
  • Buttons
  • Photos
    • 280w-564w-840w-1170w [banner width]
  • [Placeholders] is in AO' s personal folder
  • Logos
    Since our guides have white background, this is an easy way to create a standard size logo: Capture with Faststone Editor;  Select a rectangle that incorporates the logo and enough white background to make a square;  Crop; Resize; Save as  [whatever]_##w x ##h.
    • 75w x 75h  
    • 150w x 150h    
  • Screenprints
    • 564w to 840w, based on 50-75% of screen width.  Choice depends on complexity and apparent font sizes in the screenprint.
  • Small icons
    • 25w x 25h
  • Thumbnails (see also Logos folder)  
    Upload source images at 75w to allow flexibility.   
    Why it might be preferable to upload multiple sizes of the same image:  Filenames appended with dimensions allow you to choose the correct image from the Image manager, and to have flexibility in design since differently sized Thumbnail images may be needed across LibGuides.  Read on...
    Editing the width in Assets results in resizing everywhere the Link occurs.  
    Editing an original Asset from within a box results in resizing everywhere the Link occurs.
    In other words, copy in order to create a new Asset whenever more than one size of a specific Thumbnail is needed across LibGuides site.
    Setting "width only" keeps height of image in proportion.  
    Maintain consistent width for thumbnails in lists of Links, Documents, etc.  
    • 75w works well for Links in narrow columns (25%) for complex images with white borders. 
    • 50w works well for Links in narrow columns (25%) but tends to overwhelm lists of links.
    • 25w works best for Links in narrow columns (25%) for simple logos.