CMS Tutorials Inserting Images (Advanced) This tutorial assumes some familiarity with inserting images using the Evergreen™ Content Management System. For a detailed rundown of the basic process, please review our Image Insert tutorial. In this tutorial, we’ll walk you through some of the additional options available to the content editor regarding the importation of images. While following along, feel free to personalize your own experience with your own tastes and objectives. Use this tutorial as a loose guide to familiarizing yourself with the tools and options available through Evergreen™ but don’t be afraid to forge your own path by experimenting and feeling your way around the application. Now enjoy!   The Image Window After selecting the page you’re interested in adding an image to and clicking the Image tool button in the toolbar ( ), the Image window should appear. As before, locate the desired image by clicking the ( ) button. This will launch the image management window. This time, let’s practice a little more organization with our images. Instead of immediately clicking Browse…, let’s create a unique folder for this particular page’s images and let’s be sure to nest this folder in the preexisting folder of Assets/images. To do this, note the dropdown menu in the top left corner of the window. Click this dropdown and select Assets/images. This happens to be a preconfigured folder dedicated to the hosting of images. Now let’s create a new folder, unique to the webpage we’re currently adding an image to. To do this, click the New Folder link near the top of the window. The following box will appear: Enter the name of this new folder into the form field and hit create followed by close & refresh. For the purposes of this tutorial, we have chosen to name our folder Tutorial. Being that we just created this folder, the contents of it should be empty. Now, Browse… for an image and upload it into this folder as instructed in the Image Insert tutorial. Click Ok. Your image management window should now have closed and you should be viewing the Image window. First, fill in the Title field. What you enter will appear whenever a user hovers their cursor over the image on the webpage. The Alignment field denotes how, in relation to the text on the page, you would like your image to be aligned. For our example, we’ve chosen right from the dropdown menu. Notice how the preview screen adjusts to reflect our choices. Suppose you want your image to be bordered. Click the Border Style for a popup of additional options. Click ok once you’ve chosen your desired style. You will generally ignore the Width and Height fields. These fields allow the editor to resize the chosen image given new pixel dimensions. As a rule of thumb, try and make all of your image edits outside of Evergreen in a designated image editor. The Spacing fields provide inputs for image padding. Suppose you don’t like how close your image is to your text. To place some buffer space between the two, simply identify the correct Spacing field and input an appropriate positive integer. For our example, we’ve decided to space our image 20 px on the left. Now that all fields have been addressed, click insert to finalize the placement of your image. Notice how our image appears exactly how we arranged for it to appear on the page.   Assuming you followed along without any major hurdles, you too now know your way around the image importation tools available through Evergreen™. For additional instructional material, visit the Tutorials section of our website. If you still have questions, feel free to contact us at sales@cascadewebdev.com. Finish ||

___----------------__