KNOWLEDGE CENTER

 

 



 

 

 

 

 

         

 Add an Image 

 

 

 

 

 

 

 

 

We recommend that you insert Images often in order to have

 

 a vibrant and attractive website.

 

Be sure to use Images to reinforce information.

 

 To add an Image, there will be several steps involved.

 

 

 

 

  

 

 

      1.   To insert an Image into your page, start in Edit, and place an Article to your page. To review placing an Article, go to the page Add an Article,

             or click here.

 

          •  An Article can contain just an Image.  You don't have to add text if it's not needed.

 

      2.   Move your cursor into the Article and click.  Go to the top of your screen to the 5th section of the Editing Toolbar, and click the "Insert Image"

              icon  .   Webtreepro will bring up the Library screen.

 

 

  This is a portion of the Library screen.

  

  

                            

   3.   Let's look at the left side of the Library screen.  If you already have an Image saved in the Library, you can click on the folder where it is stored. The Library

         will show all the contents of that folder.

 

   4.   My Content are files uploaded by the logged in user and only available to the logged in user.

 

   5.   Site Content is available to any logged in user of the site. The subsets of Site Content are:

 

  • Articles
  • Files
  • Images
  • Media

Other subsets can be added, such as Slide Shows and/or Flash presentations.  To add a new subset, do a right click on a file.  The  flyout at the right, will appear.  Click New Folder, and a New Folder will appear in the the list.  Now, you can name the Folder as you wish.

 

   6.   Shared Content is only for parent sites.  This Content is available to both Parent and Child site user.

 

         
 

 

Search for a Stored Image:

 

 

   Now that you have selected your file, you'll need to find the appropriate Image.  Here are several ways to search for it.

 

   1.    Use the Search bar to enter part of the letters, numbers, or words that are in the title of the Image-file.  The Library will show a list of titles

           for you to review.  Double click on the title of the Image-file you want, and click Search .  The Library will bring up the selected file.  

 

              •  If you need to check and see if this is the right file, you can click on the Image's title.  That will bring up a Preview screen, seen

                                         below. To exit the Preview screen, click Close Preview  .

 

              •  You can, also, roll your cursor over the title of the Image-file to see a "Thumbnail" picture of the Image.  We'll discuss "Thumbnails"

                                         a little later.

 

 

 

 

 

     2.   Another way to search for a particular Image is found up in the Library Toolbar in the first dropdown box, Show.  Using the dropdown arrow, you can

            choose a filter to avoid searching through the entire contents of the Library.  Some of these filters include "Images Only," "No Images," and "Videos." 

 

     3.   Next to Show, is the View dropdown.  You can look for the Image-file by changing the View from Listing to Thumbnails which will give you a small

            picture of each Image, see the example below.  Double click on the image to see a Preview of the image.  The Image will come up in a new screen

           seen above.   Click on Close Preview  to exit the Preview screen.  Click once on the Thumbnail picture to select an  Image.  

           To see more about the Listiing View go to the image below the next green horizontal lline. 

 

 

                                                                                                             

 

 

 

 

 

   4.   You can, also, search for Keywords, if you have entered in Keywords using the Library Properties tool.  (Properties is located to the left of Show.)

           Enter in a Keyword in the Search bar, and click Search .  The Library will bring up all the Image-files that has the Keyword attached

           to the Image-file.

 

   5.    Using the actual title of Created Date will help you find a particular Image-file, too.  If you know the date when the Image was stored, click on

           the title Created Date.  The Library will group the Images by the dates they were stored, from the earliest date to the latest date.  Click again,

           and the Library will group the Images from the most recent date to the earliest date.  It is a quick and easy way to search for a recently stored Image.

 

  

 

 6.   Now go to the bottom of the Library page and click Select    which will place your Image where the cursor is flashing on your working page.

 

 

Note: 

 

If the file is not already loaded in your Library, you might want to read the page Image Storage in the Library, or click here.

 

 

 

     
 

 

Using the screen below for reference, let's continue with the Insert Image process.

 

 

 

 This view of the Library screen is in "Listing" mode.  It lists the names of the Images in alphabetical order.

                                                                                                                                                  

 

 

 

 

 

 

 

   1.  If you want to make sure an Image is the best one to use, you can preview it by clicking on the title of the Image, or by moving your mouse

        over the name.  If you click on the title, the Image will come up in a new screen called  Preview of the image seen above. 

         To exit the screen and return to the Library, click Close Preview  .

 

   2.  To select an Image, click the gray box to the left of the Image's name.  The Library will show the Image to the right of your screen.  See below, down arrow.

         It will also give you the width, height, and other qualities of the Image, as seen at the left arrow pointing to the Layout section.

 

                                                                                                                                                                                        

 

 
 

 

 

    3.   Alternative text  is added text that will appear as a pop-up when a visitor's mouse is placed over the Image.  This is helpful for search engine

          optimization.

    4.  Layout:

      • You can change the Width and/ or the Height of the Image in pixels.
      • If the lock icon  is closed as shown, you can change the width or height, and then, hit your Tab key on the keyboard.  Webtreepro will automatically adjust the other measurement.
      • You can click on and open the lock  and change the width and/or height to whatever you like, but be aware, you may cause the Image to become distorted.   At any  time, the original Image can be restored by selecting  Restore Original which is located below the icon.

 

   5.   Alignment will allow you to wrap text around the Image. Options include Left, Right, Middle, etc.

 

   6.   Border Thickness specifies a black border in pixel width.   If you choose “0” the Image's border will be invisible.

 

   7.   Space may be added around the Image to enhance its appearance.

   8.   Now, you are ready to insert your Image.  Click on Select  , and the Image will be placed inside the Article where your cursor has been

          flashing...all this time.

 

      • At this time, the Image will have "handles" around it, seen above. The "handles" tell you the Image can be adjusted at this point.  If adjustments are necessary, go up to the Editing Toolbar, and click on the  icon.  It will bring you back to the Library screen where you can adjust your Image's properties. 
      •  Then, at the bottom of the page, click  Replace image in the editor     to replace the old Image with your newly,   

                     adjusted Image.

   

      •  For more details about editing an Image, you may want to read the page Edit or Delete an Image, or click here.

   9.   If you decide to not add an Image, click Cancel    and you will return to your working page without saving an Image.