VIDEO TRANSCRIPT In this video we'll learn how to upload images and documents so you can use them on your website. When we talk about using images on the site we mean images that appear in the slideshow, people profiles, and news stories, for example. When we say documents, we are talking about PDFs, Word Docs, Excel sheets, or other non-image type files, for which you might want to add links on your site for visitors to download. If you plan to use images or documents on your website, we recommend that you upload them to the “Digital Assets Manager” or THE DAM before getting to work on your website pages. The DAM is kind of like a digital file cabinet where you can store pictures and documents for use anywhere on your website. Before we get started, please note the following best practices regarding image dimensions and file sizes for AEM websites. We’ll also briefly outline best practices for naming files, for accessibility reasons, and to make them easier to find in a search. Most of the AEM components (the slideshow , and news feed thumbnails, for example) are designed to accommodate images whose dimensions conform to a 4 to 3 ratio, meaning, the width to height measurement in pixels is in multiples of four to three. We want to keep the files at manageable sizes, so when you upload an image to your DAM, please make sure that the image is no more than 1000x750 pixels. This standard applies for most photos. In the case of people profile photos, images should be at a 2 to 3 ratio, measuring no larger than 600x900 pixels. Anything larger should be resized before uploading. Please also check that file sizes are no larger than 1MB. If you need assistance resizing or cropping photos, or reducing file sizes, please contact the help desk. accessiblewebsiteservices.com/accessible-file-naming-conventions/ We strongly encourage you and your department to adhere to a consistent file naming routine, to help you locate the files when you need them, and also for accessibility and search engine optimization. File naming best practices include keeping names short and avoiding special characters including periods and parentheses. Please don’t put spaces in the filename- use a dash instead. Some units choose to start the file name with a date for chronological sorting. It is up to you what convention you use, but we think you’d like to avoid having files in your DAM with names like “IMG_7476253” or “draftmanuscript-finalfinal!version3”. Now that we know a little more about image dimensions, file sizes, and file names, let’s upload some assets to the DAM. Start by entering “author.lsa.umich.edu” into your browser, and you will see the dashboard screen with your site tile or tiles on it. Select the appropriate site tile. If you’re in training, please select “AEM Training Website”. You should now see a new dashboard with a set of navigation tiles, or cards. Look for the one that is labeled “Assets”, and click the dots in its lower right corner. AEM default will show you the screen in card view, but if your view doesn’t match this one, no worries. You can select from three views in the top right corner of the screen, by clicking the dropdown icon to the right of “create”. The choices are “Card View”, “Column View”, and “List View”. Let’s look at all three. First, “Card View” shows you your site’s asset folders as several ‘cards’, labeled ‘yoursitename-documents’; ‘yoursitename-slideshow’; and ‘yoursitename-images’. If we click on the ‘train-slideshow’ card, we will then see the images within the training site’s homepage slideshow folder, displayed as tiles or cards. Let’s go back up a level. I’ll click the dropdown menu at top-center of my screen that says ‘train-slideshow’ and select ‘train-assets’ to return to our previous location. You can also hit the back button in your browser. Now let’s switch to ‘column view’ using the dropdown at the upper right. In column view, your assets folders will appear in a directory style that looks exactly the same as the sites screen. If I select ‘train-slideshow’ I will see a list of the folder’s images, with icons and names, appear in an additional column. Let’s go back up a level, one more time. I’ll click the dropdown menu at top-center of my screen that says ‘train-slideshow’ and select ‘train-assets’ to return to our previous location. Now let’s switch to ‘list view’ using the dropdown at the upper right. In list view you see only the contents of the folder you selected. In all three views you may add images or documents to the DAM by dragging and dropping them from a local folder (like on your desktop, or perhaps a jump drive, etc) into the DAM folder open on your screen. Let’s do this. Let’s return to card view. Click the slideshow card to enter your slideshow. Drag and drop an image anywhere in the screen. Want to get rid of an asset? Delete it by mousing over the image and selecting it using the check. At the top of the screen, a toolbar will appear. Depending on the resolution of your screen, the delete icon - a trash can - will either be visible at the top right, or it will be revealed by clicking the dots to expand the menu. Select delete and tell the system that’s really what you want to do. Let’s do it again, in column view. Change the view in the dropdown on the upper right, and drag and drop an image in with the other images you see. Again, scroll to the bottom of the list to confirm your image is there. To delete it, click inside the image thumbnail, and once again use the delete icon. Finally, let’s add the image in list view. Change the view in the dropdown on the upper right, and drag and drop an image in with the other images you see. Again, scroll to the bottom of the list to confirm your image is there. To delete it, click inside the image thumbnail, and once again use the delete icon that appears in the upper right. The exact same steps may be followed for uploading PDFs and other files. Find your site’s documents folder, and drag and drop the file into the folder. Congratulations! You have now added and deleted assets from your digital assets manager! Technology Services is here to support you. If you need any assistance, please email the help desk.
VIDEO TRANSCRIPT
In this video we'll learn how to upload images and documents so you can use them on your website. When we talk about using images on the site we mean images that appear in the slideshow, people profiles, and news stories, for example. When we say documents, we are talking about PDFs, Word Docs, Excel sheets, or other non-image type files, for which you might want to add links on your site for visitors to download.
If you plan to use images or documents on your website, we recommend that you upload them to the “Digital Assets Manager” or THE DAM before getting to work on your website pages. The DAM is kind of like a digital file cabinet where you can store pictures and documents for use anywhere on your website.
Before we get started, please note the following best practices regarding image dimensions and file sizes for AEM websites. We’ll also briefly outline best practices for naming files, for accessibility reasons, and to make them easier to find in a search.
Most of the AEM components (the slideshow , and news feed thumbnails, for example) are designed to accommodate images whose dimensions conform to a 4 to 3 ratio, meaning, the width to height measurement in pixels is in multiples of four to three. We want to keep the files at manageable sizes, so when you upload an image to your DAM, please make sure that the image is no more than 1000x750 pixels. This standard applies for most photos. In the case of people profile photos, images should be at a 2 to 3 ratio, measuring no larger than 600x900 pixels. Anything larger should be resized before uploading. Please also check that file sizes are no larger than 1MB.
If you need assistance resizing or cropping photos, or reducing file sizes, please contact the help desk.
accessiblewebsiteservices.com/accessible-file-naming-conventions/
We strongly encourage you and your department to adhere to a consistent file naming routine, to help you locate the files when you need them, and also for accessibility and search engine optimization.
File naming best practices include keeping names short and avoiding special characters including periods and parentheses. Please don’t put spaces in the filename- use a dash instead.
Some units choose to start the file name with a date for chronological sorting. It is up to you what convention you use, but we think you’d like to avoid having files in your DAM with names like “IMG_7476253” or “draftmanuscript-finalfinal!version3”.
Now that we know a little more about image dimensions, file sizes, and file names, let’s upload some assets to the DAM.
Start by entering “author.lsa.umich.edu” into your browser, and you will see the dashboard screen with your site tile or tiles on it. Select the appropriate site tile. If you’re in training, please select “AEM Training Website”.
You should now see a new dashboard with a set of navigation tiles, or cards. Look for the one that is labeled “Assets”, and click the dots in its lower right corner.
AEM default will show you the screen in card view, but if your view doesn’t match this one, no worries. You can select from three views in the top right corner of the screen, by clicking the dropdown icon to the right of “create”. The choices are “Card View”, “Column View”, and “List View”. Let’s look at all three.
First, “Card View” shows you your site’s asset folders as several ‘cards’, labeled ‘yoursitename-documents’; ‘yoursitename-slideshow’; and ‘yoursitename-images’. If we click on the ‘train-slideshow’ card, we will then see the images within the training site’s homepage slideshow folder, displayed as tiles or cards.
Let’s go back up a level. I’ll click the dropdown menu at top-center of my screen that says ‘train-slideshow’ and select ‘train-assets’ to return to our previous location. You can also hit the back button in your browser. Now let’s switch to ‘column view’ using the dropdown at the upper right.
In column view, your assets folders will appear in a directory style that looks exactly the same as the sites screen. If I select ‘train-slideshow’ I will see a list of the folder’s images, with icons and names, appear in an additional column.
Let’s go back up a level, one more time. I’ll click the dropdown menu at top-center of my screen that says ‘train-slideshow’ and select ‘train-assets’ to return to our previous location. Now let’s switch to ‘list view’ using the dropdown at the upper right.
In list view you see only the contents of the folder you selected.
In all three views you may add images or documents to the DAM by dragging and dropping them from a local folder (like on your desktop, or perhaps a jump drive, etc) into the DAM folder open on your screen. Let’s do this.
Let’s return to card view. Click the slideshow card to enter your slideshow. Drag and drop an image anywhere in the screen.
Want to get rid of an asset? Delete it by mousing over the image and selecting it using the check. At the top of the screen, a toolbar will appear. Depending on the resolution of your screen, the delete icon - a trash can - will either be visible at the top right, or it will be revealed by clicking the dots to expand the menu. Select delete and tell the system that’s really what you want to do.
Let’s do it again, in column view. Change the view in the dropdown on the upper right, and drag and drop an image in with the other images you see. Again, scroll to the bottom of the list to confirm your image is there. To delete it, click inside the image thumbnail, and once again use the delete icon.
Finally, let’s add the image in list view. Change the view in the dropdown on the upper right, and drag and drop an image in with the other images you see. Again, scroll to the bottom of the list to confirm your image is there. To delete it, click inside the image thumbnail, and once again use the delete icon that appears in the upper right.
The exact same steps may be followed for uploading PDFs and other files. Find your site’s documents folder, and drag and drop the file into the folder.
Congratulations! You have now added and deleted assets from your digital assets manager!
Technology Services is here to support you. If you need any assistance, please email the help desk.