Left aligned image at 50%
- This style sets the image width to 50% of its containing pane and aligns it left.
- Right and bottom margins are built in so text and other content doesn’t about the image.
- A caption style has been applied to the text below the image.
Right aligned image at 50%
- This style sets the image width to 50% of its containing pane and aligns it right.
- Right and bottom margins are built in so text and other content doesn’t about the image.
- A caption style has been applied to the text below the image.
Left aligned image at 33%
- This style sets the image width to 33% of its containing pane and aligns it left.
- Right and bottom margins are built in so text and other content doesn’t about the image.
- A caption style has been applied to the text below the image.
Right aligned image at 33%
- This style sets the image width to 33% of its containing pane and aligns it right.
- Right and bottom margins are built in so text and other content doesn’t about the image.
- A caption style has been applied to the text below the image.
Left aligned image at 20%
- This style sets the image width to 20% of its containing pane and aligns it left.
- Right and bottom margins are built in so text and other content doesn’t about the image.
- A caption style has been applied to the text below the image.
Right aligned image at 20%
- This style sets the image width to 20% of its containing pane and aligns it right.
- Right and bottom margins are built in so text and other content doesn’t about the image.
- A caption style has been applied to the text below the image.
Left aligned image at actual size
- This style does not adjust the image size, but positions it to be aligned left.
- This style is best used for images smaller than 200 pixels wide. Styles used for larger images would stretch the image and make it pixelated.
- Right and bottom margins are built in so text and other content doesn’t about the image.
Right aligned image at actual size
- This style does not adjust the image size, but positions it to be aligned right.
- This style is best used for images smaller than 200 pixels wide. Styles used for larger images would stretch the image and make it pixelated.
- Right and bottom margins are built in so text and other content doesn’t about the image.
Circle image (made from a square)
- This style can be used in conjunction with other image styles to align the image.
- This style takes a square image and turns it into a circle. It is very important that you crop and save the image as a square for this to work. For best results, it should be paired with a 1:1 ratio square image.
Full sized image
- This style sets the image to be 100% of the full width of its containing pane, minus any padding that the pane may have built into it.
- This style may distort smaller images and make them blurry. It is best used in smaller columns, or with landscape-oriented images.
- Note: High-resolution images take a considerable amount of time to load - it is best to optimize them for the web.