Image sizing in GreenOrbit


GreenOrbit has simplified the process of adding images by removing the need to specify exact pixel dimensions. The Image Component with GreenOrbit works to resize images automatically to suit the column it has been placed into. Images will be resized by width to match the column width and then resized by height to maintain the original image ratio.


Adjusting image ratios


A major key feature within GreenOrbit is the option for cropping images to a specific ratio.  This is option is also accompanied with the option to zoom into a specific area of the image.  Once you are satisfied with the appearance of the image click "Apply".  For more information on the controls within the Image Component can be found on the GreenOrbit Learn Site. 


(Ability to Customize the Aspect Ratio - Height and Width)


General recommendation for images


When working with images, our primary recommendation is to simply ensure that you are working with high quality images. We recommended that your original image dimensions you upload to your site are between 1500 and 2500 pixels wide. Images smaller than 1500 pixels may appear blurry or pixelated when they stretch to fill containers, such as banners.  Using a high quality original image will allow for that image to be resized down to suit the area it is being used within thereby maintaining the clarity of the image. 


Uploading images at low resolutions can result in the image being resized, or stretched, to a size larger than the original which will result in reduced image quality and pixelation. If an uploaded image appears to be blurry then the original image size was most likely too small.



Targeting more specific image sizes


There may be times when you are looking to target specific sizes for an image, for example when creating text-heavy images that benefit from not being resized. To help with this, we have provided guidelines in the next section that outline examples of image widths in pixels. These can be referenced when creating custom images in GreenOrbit.


Note: These examples have been provided based on common templates available within the GreenOrbit software. Changes to the structure of templates within GreenOrbit will affect these size recommendations.




Example Banner Dimensions



4 COLUMN LAYOUT AND DIMENSIONS


  • Layout: 4 columns
  • Dimensions: 328 pixels wide





3 COLUMN LAYOUT AND DIMENSIONS


  • Layout: 3 columns (Unequal width) 
  • Dimensions: Left & Right 328 pixels wide, Middle 672 pixels wide




3 COLUMN LAYOUT EQUAL WIDTH AND DIMENSIONS


  • Layout: 3 columns
  • Dimensions: 448 pixels wide





2 COLUMN LAYOUT EQUAL WIDTH AND DIMENSIONS


  • Layout: 4 columns (First 3 columns merged)
  • Dimensions: Left 1040 pixels wide, Right 336 pixels





2 COLUMN LAYOUT EQUAL WIDTH AND DIMENSIONS


  • Layout: 4 columns (First 3 columns merged)
  • Dimensions: Full width column 1408 pixels wide, 2 equal column below 688 pixels