Profile image

Profile Image purpose and specifications

Adding a Profile Image helps to visually display articles on the website. The image and caption above is an example of a responsive Profile Image that is automatically injected at the very top of the content page and does not appear in the actual content item WYSIWYG.

The two main functions of the Profile Image are:

To include an image at the top of a content item/page automatically (as per above).
To include a visual image with search results, columns, category pages, etc. For an example of this, see https://horttrades.com/tag/safety

Horizontal Profile Image specs
Horizontal Profile images are generally saved at a 3:2 aspect ratio (horizontal), however, it is possible to use any aspect ratio for the image.
Horizontal Profile images should generally be 1600-2000 pixels wide.
Horizontal Profile Images are injected at the very top of the page (example above).

Vertical Profile Image specs
Vertical Profile images are generally saved at a 2:3 aspect ratio, however, it is possible to use any aspect ratio for the image.
Vertical profile images should be 600-1000 pixels wide.
Vertical Profile Images are injected at the top of the actual content, at about 40% of the width of the page.
For an example of a vertical Profile Image and caption, see https://horttrades.com/ministry-blitz-to-focus-on-silica-dust-and-diesel-exhaust

A note on file formats:
Profile images should generally be saved in .jpg format and file sizes optimized using tinypng.com to minimize page load times for users.
If the image contains only a few solid colours, it can be saved as a .png file if the resulting filesize in kilobytes would be smaller than if saved as a .jpg.
Typically, full colour images (photographs) saved in .png format are about triple the size of a .jpg.
Since text in an image is generally a solid colour, it will tend to look clearer when saved as a .png file, but may take longer to load.

To add a Profile Image

With a content item open, click the Hamburger Menu icon (three horizontal lines below the X in the top right corner of Epic content)
At the bottom of the pop-up menu, click the Magnifying Glass icon next to Profile Image.
Select an image or click the Upload icon, the Browse your computer for the image to upload.
Include a photo caption in the Caption field if you want it to show up on the page.
Once the image shows up in the menu, click Save.
Save the content item.

A note on Profile Images

When uploading the Profile Image to EPIC content, whatever text you enter into the Caption field will display automatically under the image at the top of the page.
If you make a spelling error, there is not way to edit it. You will have to upload the image again and type the Caption text correctly.
There is currently no ability to stylize text in the Caption field (ie: bold, italics, etc.)
If the caption is a proper sentence, please include a period at the end.

ADVANCED: To hide a profile image on a content page

We identified it is best practice within reason to include a Profile Image with a content item/story in order to add a visual component.
If you add a Profile Image for the sake of search results, but DO NOT want it to show up on the actual content page, follow these steps:

Add the Profile Image as noted in the steps above (using the Hamburger Menu) and Save the content item.
In the Epic WYSIWYG, add the EXACT SAME image again, either at the very top or very bottom of the page. When adding the image, you can use "thumbnailer" and make the image super small, say 10 pixels wide.
In the source code find the opening image tag for the image you just added, <img> and add <!– in front of it. Note code will turn red.
After the closing </img> tag, type –> this will change the rest of the source code text back to the correct colour and ONLY the text for the entire image should be red. This means that particular code is disabled.

As a summary, placing any code in <!– code goes here –> hides it. Here is an example of a hidden profile image code:
<!– <img alt="" src="/thumbnailer.php?image=/assets/1569437014.esa_respect_the_power_web-cropped.jpg&imgWH=7" style="width: 7px; height: 4px;" /> –>