This guide was created with Scribe in 39 seconds. Sign in and create your own!
Omni CMS: Hero Images
Sophia Bruen |
0 step |
39 seconds
To make hero images display on desktop, tablet and mobile devices, you must create and upload three sizes so the display can react based on the viewer's device.
1
In the image resizing software of your choice, create 3 resized versions of your image in the sizes indicated below:
**Hero Sizes**\
Desktop: 1900px X 250px\
Tablet: 900px X 200 px\
Mobile: 600px X 125px
2
Rename your 3 hero images to follow these naming conventions:
\
Desktop: website-description-hero.jpg\
Tablet: website-description-hero-tablet.jpg\
Mobile: website-description-hero-mobile.jpg
3
Navigate to [https://www.fgcu.edu/oucms](https://a.cms.omniupdate.com/11/#oucampus/fgcu/www)
4
Click "Content"
Zoom Saved
5
Click "Pages"
Zoom Saved
6
Navigate to the folder of the site you'd like to edit.
Zoom Saved
7
Click "images" to open up your images folder.
Zoom Saved
8
Click "UPLOAD"
Zoom Saved
9
Click "ADD"
Zoom Saved
10
After ensuring your the naming conventions are correct, click "START UPLOAD"
Zoom Saved
11
Now we must publish the images. Select the images you just uploaded by checking the boxes.
Zoom Saved
12
We must publish to both publish targets, webdev and production. Click "Publish"
Zoom Saved
13
Ensure that webdev is selected in the publish target dropdown. Click "PUBLISH"
Zoom Saved
14
Next publish to production. Click "Publish"
Zoom Saved
15
Select "www" in the publish target dropdown.
Zoom Saved
16
Click "PUBLISH"
Zoom Saved
Have something to say?Create an account to leave messages for the author to see!Create an account
Feedback
This Scribe is in tip-top shape!Leave feedback if there are any issues with this Scribe