You are here: Home / Web Services / Tutorials / How to Tutorials / Add & Manage Pictures

Add & Manage Pictures

by brian.ortiz — last modified Dec 17, 2014 10:22 AM
Images play a key role in customizing your website. They can potentially be more important than the text in some instances. With your Propertyshelf website, you can add and manipulate photos on your pages in various ways

Images play a key role in customizing your website. They can potentially be more important than the text in some instances. With your Propertyshelf website, you can add and mainipulate photos on your pages in various ways

Suggestion: Uploading the images into dedicated folders to keep them organized:

 

The first step is to upload the images from your computer to your web site. We recommend you create a "Pics" folder under your home page, so you can always find where you have stored your photos.

  • Click on Home,
  • Click on Content
  • Add new Folder
  • Label it what you want, i.e. Pictures

Note: if you dont want anyone visiting the site to have acces/view this folder on the navigation - First click on Edit then click on settings under edit options and select "exclude from navigation as shown below:

In the Pics folder, you can then create separate folders to organize photos in specific categories.

After you have created this folder, you are ready to start uploading. In the top portion of the screen click on the Upload tab, select files on your computer, select (up to 100 depending on file size) pictures locally on your computer and click on select as illustrated below:

Note: please do not move away from this window until the mass upload is finished. To continue working simply start new tab (ctrl "T")

Option: Referring an Image that is uploaded to your site directly onto a page


Go to the page where you wish to add the image. Click on the Edit tab. Place the curser in the position in the body text as to where you would like to insert the image. Then, click the Insert/Edit Image icon (green tree) in your tool bar above the body text.

 

Clicking the above icon in your toolbar will bring you to the insert image box see above.

Navigate your way up to get to the Pics folder and click on the that folder. Hint: you can search for "Pics" in the search bar to skip hunting for your folder.

Once in the pics folder, select the image you would like to insert into the page by clicking in one of the buttons to the left of the photo names.

Insert image with image selected.png

Notice there are 3 sections in the screen now. You can adjust the description of your photo, the alignment, and the dimensions.

  • The default description is the title of the photo. If you already have a good name for the photo, you can lignore giving the image a description here, or you can change it to give the image a more detailed descrition. (consider google keywords)
  • The alignment controls the placement and how the text will wrap around the image.
  • The dimensions control how big the image will be on the page.

Picture33.png

Once you have selected the property image and adjusted it as needed, click Insert, and the image will be placed on the page. It should look something like this:

Image inserted in body text.png

Once inserted into the body text of a page you can also change the size of the picture manually (by dragging the corners to the desired size by its corners)

Tips:

Adding images to your site is very important, however, to make sure your viewers get the best experience possible, please keep in mind that and file size are crucial items to pay attention too.

The file size is very important in terms of speed. Larger files take longer to load, causing the viewer to wait. In areas where the internet is slow, this could be very frustrating for your viewer. We recommend that your file size be NO larger than 1024 pixels, and the height can adjust accordingly.

Most browsers support GIF and JPEG file formats for images. PNG's are also supported on more modern browsers, but not all browsers, so be aware of this.

Option: Uploading a picture directly from your computer into a page placing the image in the contents of the folder most relevant to the page you are on:

  1. Put your cursor within the page at the location you want the place the picture.
  2. click on the picture icon on the menu bar.
  3. Click on the Upload button
  4. select the picture on your computer and click on select
  5. follow the steps from the before mentioned option

Option: Adding Images to Propertyshelf Media Pages:

To add images to a Propertyshelf Media Page, simpy click on the "Add Image" button on the green document actions bar (see image below). You will then be prompted to upload an image file to the server. You can specify many images for a media page, and they will generally be displayed as clickable thumbnails for your users to click on that will zoom to a full size view.

Now you can rearrange the pictures in the Media Page by clicking on display and choosing a different display option. Maik our developer has developed this popular tool. The left picture below is what the media page was set us (banner on top and small images on bottom)

Propertyshelf MLS Webservice Media Pages

by changing the display setting to banner on Top, images right it changed the look to the following:

Propertyshelf MLS website image tools

Once an Image of a Media Page is clicked on it enlarges and the viewer via a screen show can click through the rest of the pictures of the site.