Classic Websites Platform: Custom Image Sizes

HAVE A RESPONSIVE TEMPLATE? If so, please instead consult the
Responsive Templates section for support. 

 

PhotoShelter supports rescaling screen size and thumbnail images to a size of your choosing. You can specify screen sizes between 250 and 1000 pixels, and thumbnails between 50 and 200 pixels.

  • If you do not specify a custom size, the default size (500 pixels for screen, 100 pixels for thumbnails) will continue to be used.

  • Existing customizations will continue to use default sizes and will not be affected. You must edit your page templates to use the new image sizes for them to take effect.

  • Images will only be scaled down, not up; so if your image is smaller than the size you specify, it will appear at its original size. (Example: if you specify a screen size of 800 pixels, but your original is only 600x400 pixels, it will appear at 600x400.)

  • The custom size parameter specifies the maximum size of an image in either dimension (height or width). E.g. if you specify a custom screen size of 800 pixels:

    • A 1600x1200 (horizontal) image will appear as 800x600.

    • A 1000x1500 (vertical) image will appear as 533x800.

    • A 2000x2000 (square) image will appear as 800x800

 

Available Pages

You can specify custom screen sizes in the following Seamless Customization templates:

  • My Homepage

  • Gallery Image Display

  • Search Results Image Display

And custom thumbnail sizes in the following:

  • Gallery Collection Display

  • Gallery List

  • My Homepage

  • Search Results

 

Specifying Custom Sizes in Widgets

You can specify a custom size parameter for thumbnails or screen images using the size option in the appropriate widget. For example:

  • [[image size="800"]]

    Specifies a screen image size of 800 pixels in either dimension. Sizes between 500 and 1000 are accepted.

  • [[search_thumbs size="150"]]

    Specifies search results thumbnails of 150 pixels in either dimension. Sizes between 50 and 200 are accepted.

The following screen-image widgets will accept the size option:

  • [[image]]
  • [[feature_galleries]]

The following thumbnail widgets will accept the size option:

  • [[gallery_collection_list]]
  • [[gallery_list]]
  • [[gallery_thumbs]]
  • [[search_thumbs]]
  • [[subfeature_galleries]]

 

CSS Styles

PhotoShelter specifies default CSS styles for the LI HTML blocks used for displaying thumbnails. However, these styles assume the default thumbnail size of 100 pixels, so it may be necessary to override these styles when specifying custom thumbnail sizes.

Specifically, the following CSS styles will require adjustment:

  • UL.thumbs LI
  • UL.thumbs LI TABLE TD.slide

These styles have hard-coded widths and heights that are designed around 100 pixel thumbnails, and as such they will not automatically resize to a custom thumbnail size.

Here is an example stylesheet for a Seamless Customization using larger, 150 pixel thumbnails. Note the widths and heights have been enlarged to accommodate the larger thumbnails. The exact size will depend on your specific site's thumbnail layout - how much padding you prefer, if you are displaying additional information (e.g. file name) in the thumbnail, etc.

<style type="text/css">
UL.thumbs LI {
	width: 176px;
	height: 210px;
}

UL.thumbs LI TABLE TD.slide {
	height: 160px;
	width: 160px;
}
</style>

Still have questions? Contact us.

Comments

Powered by Zendesk