Determining Image Dimensions

This is currently written for Chrome

We do not have specific image dimensions listed for theme areas because this changes on a case by case basis. What look does the customer prefer? That’s what we go with in the end. However, it’s possible to determine A) what sizes are being used in certain areas and B) what sizes were originally used in base models of themes and layouts (this is helpful for if someone screwed something up and you want to look back to the original design for reference).

Optional Prep (but highly recommended): Download the View Image Info lightweight Chrome extension here: https://chrome.google.com/webstore/detail/view-image-info-propertie/jldjjifbpipdmligefcogandjojpdagn?hl=en Henceforth this extension will be referred to as VIIE, “view image info extension”

Step 1: Has the site deployed or not? Undeployed sites may not have made a final determination on their image sizing yet. Consult the designer.

Step 2: Check the site’s Style Guide page (NOT the layout, the PAGE: site.edu/style-guide) to see if the information is present there. If not, proceed…

Not using the View Image Info lightweight Chrome extension

What size is already used for images currently present in an area?

1. Right click the image.
   
   
2. Inspect
   
   
3. Look at the code - does the code show an image file? If so, continue below. If not, go to step 4.
   
   
   
   If the code shows an image here, you can determine the intrinsic (aka natural, aka native) size of the image as well as the size it is shown in the browser window. These can be two different sizes due to responsive design changing the display size of the image based on the size of the area the image is in.
   
   
4. Does the code show a background image either inline or in the stylesheet area?
   
   
   
   If so, right click the image URL in the stylesheet area and choose open in a new tab
   
   
   
   Inspect

Using the View Image Info lightweight Chrome extension

1. Right click the image.

2. Select View Image Info (properties) if available. If not available proceed to step 3. 
   
   
   
   The resulting popup will look like this:
   
   
   
   Intrinsic/native/natural dimensions are listed first, with a note of what dimensions the image has been scaled to.

3. If the VIIE option does not appear in the right-click menu, select Inspect instead. Look to the Styles area to find the background image.
   
   
   
   

4. Right click the image URL in the stylesheet area and choose open in a new tab
   
   
   
   

5. From the new tab, right click on the image and select the VIIE option to view the intrinsic/native/natural size of the image used. Yes, this only shows you the natural size and not what the image has been scaled up/down to be. For that, you’ll need to be comfortable looking through more code than is likely necessary, so refer to a designer for details if you really need them. 

What size is was used in the model?
Again, if they screwed something up or are looking to revert back to the original…

1. Create a new layout that you know contains the original image. For example, do you want to know what the original secondary page header images of the Brixton theme were like? Go into a Brixton instance and make a new Secondary layout from the Model. You can either choose to do your inspections inside the editor, or if that’s too complicated because of the editor’s coding, name the layout, save it, and apply it to a test page.
   
   
2. Follow the instructions from either of the two sections above.

Other scenarios

• Scenario 1: Customer complains of slider images being uneven.
  Check to see if any of the images in the slider match each other or if they’re all out of whack. If some of them match, chances are highly likely that they are the dimensions a CS designer gave them when making the site. Check those dimensions and use them. If ALL the slides are screwed up, check the Style Guide to see if the dimensions were logged. If not, contact a designer.
  
  
• Scenario 2: Changed themes/updated layouts and images no longer span the full width of the content area.
  Different themes have different content area widths, ie the size of where you put your content when you click the Edit Page button from any page. This can change per theme, per layout (full vs secondary), and per customer (if the customer asks us to make the secondary nav take up less horizontal space and enlarge the content area.)

Best thing to do is check how wide the content area is when the browser is fully expanded on a desktop.

1. Right click into some space inside the content area.
   
   

2. When the code window opens, move your mouse around to hover over different div elements. The browser will dynamically color these sections and give you their dimensions.
   
   

3. Hovering over the content area div, check what the browser says is the width. 1140 is pretty standard but it can change case by case. Images should be at least that wide to make it from edge to edge of the content area.