User Guide

Working with Images, PDFs, and Other Files

  1. Expression Engine will enable you to upload files to your site, but you should plan on creating and editing any files before you upload them. The following tools may be useful for working with files.


  2. For PDFs: saving a word doc to PDF


  3. Image files: Adobe Photoshop, Pixlr (Free)


  4. There are many great tutorials on the web about using Photoshop, so we'll focus on using the free tool Pixlr in this guide.


  5. You should be thoughtful about the size of any image that you upload to your site.  Images that are too large may take too long to load, while images that are too small will look fuzzy. Refer to documentation written specifically for you site for guidelines.


  1. This technique works best when the image has a specific height and width.


  2. Visit http://pixlr.com/editor/


  3. Select 'Open image from Computer'


  4. Select the image you wish to crop.  You should see the image open in the browser.


  5. Choose the crop tool - by default it should already be enabled. The crop tool icon is located in the upper left corner of the tools window. You can click on it, or type 'C' on your keyboard if it's not already active.


  6. Select Constraint > Output Size at the top of the screen.


  7. Enter the new image dimensions where it says Width and Height at the top of the screen. The admin tool should provide the proper image dimensions.


  8. Drag the pointer over the selection of the image you wish to display on the site.  This may include most of the image, or a small portion of the image.


  9. Press enter on your keyboard. You can reverse the crop by selecting Edit > Undo in the black tool bar, if the cropped image isn't satisfactory.


  10. Save the image through File > Save when you're happy with the final result. Photos work best in the JPEG format.


  1. This technique works best when you don't want to crop out content and you need to constrain the image to only a width or a height.


  2. Visit http://pixlr.com/editor/


  3. Select 'Open image from Computer'


  4. Select the image you wish to resize. You should see the image open in the browser.


  5. Choose Image > Image Size in the black tool bar.


  6. Make sure that "Constrain proportions" is selected.


  7. Enter a new height or width for the image.  The other size should automatically adjust.


  8. Save the image through File > Save when you're happy with the final result. Photos work best in the JPEG format.


  1. This technique works best if you want to crop out stuff from the image, and you need to constrain the image to only a width or a height.


  2. Visit http://pixlr.com/editor/


  3. Select 'Open image from Computer'


  4. Select the image you wish to crop and resize. You should see the image open in the browser.


  5. Choose the crop tool - by default it should already be enabled. The crop tool icon is located in the upper left corner of the tools window. You can click on it, or type 'C' on your keyboard if it's not already active.


  6. Select Constraint > No Restriction at the top of the screen.


  7. Drag the pointer over the selection of the image you wish to display on the site.


  8. Press enter on your keyboard. You can reverse the crop by selecting Edit > Undo in the black tool bar, if the cropped image isn't satisfactory.


  9. Choose Image > Image Size in the black tool bar.


  10. Make sure that "Constrain proportions" is selected.


  11. Enter a new height or width for the image. The other size should automatically adjust.


  12. Save the image through File > Save when you're happy with the final result. Photos work best in the JPEG format.


  1. Click on the 'Add files' button in the image field.


  2. The file assets manager will pop-up on the page. Click on the 'Upload Files' button. Select and upload the new image.


  3. The image should appear in the file selection window (it may take a minute to upload). Click on the image, and click 'Add Files.' The file selection window will disappear and the new image will be displayed in the image field.


  4. You'll want to add alternative text to the image as a fallback if the image cannot be viewed. Right click on the image you and select 'Edit Image.' Add brief text conveying the subject of the image the field labeled 'Alt Text.' Click 'Save Changes'


  1. Highlight the text you wish to link to a PDF or a word doc. Click on the link icon.


  2. Click the button labeled 'Browse Server.'


  3. The file assets manager will pop-up on the page. Select the upload location you want on the left. Click on the 'Upload Files' button. Select and upload the new file.


  4. Select the list view icon to more easily view the list of files on the site. Click on the file you you just uploaded, and click 'Add Files.'


  5. Click Ok.