Setting dimensions for website images and watermarks

Upon uploading your images in the Media Manager in Propertybase you will see that the images are cropped/resized to a standard of 800 x 600 pixels and the thumbnails are set to 100 x 100 pixels. These standards will only apply in Propertybase. The original image size is stored in our system and available for use within your website, portals and pdf expose's. You are also able to define custom dimension for display by adding a Setting to your Propertybase ORG.

The setting will allow you to define what sizes of images will be displayed in your website, portals and pdf expose's. Without this setting all images will go to your external application in the Propertybase standard sizes. Utilizing this setting, various sizes are able to be added. Simply follow the convention when adding the values. Each dimension will need to be added as: Width x Height. All consecutive dimensions will need to be separated by a semi-colon (;). See example below:

Key propertyMedia_imageSizes
Value
2048x1536;900x700;300x300

This setting does not work retroactively, meaning the setting will only take affect with images added after the setting was put in place. When querying images for your website (e.g. Weblistings) you will need to add the dimension parameters before the image name in the URL. By default Propertybase provides the resolutions midres (800x600) and thumbnail (100x100). 

Note: if you only specify dimensions like 400x200, the image might not actually be this exact size. That is due to the fact, that in this mode the image will be resized to fit, i.e. the wider side will be fit in the new dimensions and the original aspect ration is kept.resize without further options:

resize without
options

To get an image that has the exact dimensions, you have to add a ^ to the dimensions like that: 800x600^. Keep in mind that this will lead to a crop, ie parts will be cut off. We encourage all customers to use this setting (We also use that setting as a default for our two standard sizes that are created on each upload).

resize with ^:

resize with
^

Another option that is available here is to add a !, which results in a new image with the exact specified dimensions, but streched to fit, ie it will result in distortion.

resize with !:

resize with
!

 

Here are a few examples:

Standard Image URL's:

https://s3.amazonaws.com/propertybase-clients/00Db0000000HIoQEAW/a0Cb0000000Isda/p17pin0qil1s6v1vssah09ir35i2/midres/iStock_000016934330_Small.jpg

https://s3.amazonaws.com/propertybase-clients/00Db0000000HIoQEAW/a0Cb0000000Isda/p17pin0qil1s6v1vssah09ir35i2/thumbnail/iStock_000016934330_Small.jpg

Custom Image dimension URL's:

https://s3.amazonaws.com/propertybase-clients/00Db0000000HIoQEAW/a0Cb0000000Isda/p17pin0qil1s6v1vssah09ir35i2/300x300/iStock_000016934330_Small.jpg

Watermarks

The Media Manager also supports watermarking images. Watermark images are treated differently then the ones found in the media manager as they are stored in a setting. This way they are available to all images which need them. The setting where the watermark image must be stored has the key called: propertyMedia_imageSizes 

Key/Name propertyMedia_imageSizes
Formating [width]x[height];[width]x[height]wmhttp://your.domain.com/path/to/your/watermark.jpg
Example  800x600;235x544;300x500wmhttp://360cadservices.com/web/img/watermark.original.png

[width]x[height]wmhttp://your.domain.com/path/to/your/watermark.jpg

In words: the syntax for a watermark version is defining the resolution of the resulting watermarked image by giving the width & height, separated by the character 'x' followed by 'wm' followed by the complete url to the watermark stamp.

Finding Watermark Images: The resulting watermarked image is not visible from within the org (we do not put the watermarked versions in one of our previews). If you want to use them for the website or anything else, you can find them on our storage by going to the path of the original image (you can see that path in the propertyMedia object or by just clicking the download link of that image), then adding the slug '/[width]x[height]wm/' after the last path segment and before the actual filename.

Example: Original: https://s3.amazonaws.com/propertybase-clients/00DD0000000oRiSMAU/a0CD000000l16Rw/p194f1s33t1gv316oo18lmj1ku8h4/12.jpg

Watermark: https://s3.amazonaws.com/propertybase-clients/00DD0000000oRiSMAU/a0CD000000l16Rw/p194f1s33t1gv316oo18lmj1ku8h4/800x600wm/12.jpg

  • CustomSizes: Similar to the watermarked versions, you can list all custom image sizes you want to be created each time a new image is uploaded or a new version is created. Just create (if it doesn't already exist) a setting called PropertyMedia_imageSizes

ImportantThe watermarks will only work for images added after the setting was added. All existing images in Propertybase will no have the watermark.

 

 

 

Powered by Zendesk