This is a page to demonstrate / test various embedded media formats.
Embedded images come from the Article Image media library. This defines the image, caption data, and other metadata about the image.
Full Width Images
This is a full width image style with image on right. This was added by:
- Clicking on the Insert from Media library button
- Uploading (or selecting an existing image)
- If Uploading, select the image, set the category, and any tags (e.g. full width image, persons name, and the like.)
- Using the Edit Media button to select, full width image display with a right alignment.
This is the same image with a left alignment selection.
This is a centered fullwidth image that places the caption on bottom. It also has the no-border option checked to disable the separator borders.
Side Images
This is a sidebar image floated right.
FIller text...Change, my dear. And it seems not a moment too soon. Rest is for the weary, sleep is for the dead. I feel like a hungry man eager for the feast! This is a situation that requires tact and finesse. Fortunately, I am blessed with both. Boring. And I hate hotels. Small though it is, the human brain can be quite effective when working at full efficiency, not unlike myself! A knight of the GRAND ORDER OF OBERON! Only I would be stupid enough to attack such a person! The waves of time wash us all clean.
Boring. And I hate hotels. Change, my dear. And it seems not a moment too soon. I think it's time to find your Achilles heel, or should I say - flipper. Did I? It must be the carrot juice making me colour blind! You were expecting someone else? My last incarnation…oh, I was never happy with that one. It had a sort of feckless 'charm' which simply wasn't me. A knight of the GRAND ORDER OF OBERON! Only I would be stupid enough to attack such a person! The waves of time wash us all clean. This is a situation that requires tact and finesse. Fortunately, I am blessed with both.
This is a sidebar image floated left.
FIller text...Change, my dear. And it seems not a moment too soon. Rest is for the weary, sleep is for the dead. I feel like a hungry man eager for the feast! This is a situation that requires tact and finesse. Fortunately, I am blessed with both. Boring. And I hate hotels. Small though it is, the human brain can be quite effective when working at full efficiency, not unlike myself! A knight of the GRAND ORDER OF OBERON! Only I would be stupid enough to attack such a person! The waves of time wash us all clean.
Boring. And I hate hotels. Change, my dear. And it seems not a moment too soon. I think it's time to find your Achilles heel, or should I say - flipper. Did I? It must be the carrot juice making me colour blind! You were expecting someone else? My last incarnation…oh, I was never happy with that one. It had a sort of feckless 'charm' which simply wasn't me. A knight of the GRAND ORDER OF OBERON! Only I would be stupid enough to attack such a person! The waves of time wash us all clean. This is a situation that requires tact and finesse. Fortunately, I am blessed with both.
Lightbox Images
This is a Lightbox - Full Width image with the image on the left. (Align Left)
This is a Lightbox - Full Width image with the image on the right. (Align right)
This is a Lightbox - Full Width image with the image on top and no separator border lines. (Align center / No border)
Side Lightbox Images
NOTE: Lightbox side images only support left and right alignment. Center / None will use the preferred right alignment.
This is an embedded lightbox side image floated on the right.
Filler text...Change, my dear. And it seems not a moment too soon. Rest is for the weary, sleep is for the dead. I feel like a hungry man eager for the feast! This is a situation that requires tact and finesse. Fortunately, I am blessed with both. Boring. And I hate hotels. Small though it is, the human brain can be quite effective when working at full efficiency, not unlike myself! A knight of the GRAND ORDER OF OBERON! Only I would be stupid enough to attack such a person! The waves of time wash us all clean.
Boring. And I hate hotels. Change, my dear. And it seems not a moment too soon. I think it's time to find your Achilles heel, or should I say - flipper. Did I? It must be the carrot juice making me colour blind!
This is an embedded lightbox side image floated on the left.
Filler text...Change, my dear. And it seems not a moment too soon. Rest is for the weary, sleep is for the dead. I feel like a hungry man eager for the feast! This is a situation that requires tact and finesse. Fortunately, I am blessed with both. Boring. And I hate hotels. Small though it is, the human brain can be quite effective when working at full efficiency, not unlike myself! A knight of the GRAND ORDER OF OBERON! Only I would be stupid enough to attack such a person! The waves of time wash us all clean.
Boring. And I hate hotels. Change, my dear. And it seems not a moment too soon. I think it's time to find your Achilles heel, or should I say - flipper. Did I? It must be the carrot juice making me colour blind!
Image Width
This is an embedded side image floated on the left with a width of 150px set. It also has an extra class added.
Filler text...Change, my dear. And it seems not a moment too soon. Rest is for the weary, sleep is for the dead. I feel like a hungry man eager for the feast! This is a situation that requires tact and finesse. Fortunately, I am blessed with both. Boring. And I hate hotels. Small though it is, the human brain can be quite effective when working at full efficiency, not unlike myself! A knight of the GRAND ORDER OF OBERON! Only I would be stupid enough to attack such a person! The waves of time wash us all clean.
Boring. And I hate hotels. Change, my dear. And it seems not a moment too soon. I think it's time to find your Achilles heel, or should I say - flipper. Did I? It must be the carrot juice making me colour blind!
This is an embedded lightbox side image floated on the right with a 150 px width and extra class added.
Filler text...Change, my dear. And it seems not a moment too soon. Rest is for the weary, sleep is for the dead. I feel like a hungry man eager for the feast! This is a situation that requires tact and finesse. Fortunately, I am blessed with both. Boring. And I hate hotels. Small though it is, the human brain can be quite effective when working at full efficiency, not unlike myself! A knight of the GRAND ORDER OF OBERON! Only I would be stupid enough to attack such a person! The waves of time wash us all clean.
Boring. And I hate hotels. Change, my dear. And it seems not a moment too soon. I think it's time to find your Achilles heel, or should I say - flipper. Did I? It must be the carrot juice making me colour blind!
No Captions
This is an embedded side image floated on the right with no caption set.
Filler text...Change, my dear. And it seems not a moment too soon. Rest is for the weary, sleep is for the dead. I feel like a hungry man eager for the feast! This is a situation that requires tact and finesse. Fortunately, I am blessed with both. Boring. And I hate hotels. Small though it is, the human brain can be quite effective when working at full efficiency, not unlike myself! A knight of the GRAND ORDER OF OBERON! Only I would be stupid enough to attack such a person! The waves of time wash us all clean.
Boring. And I hate hotels. Change, my dear. And it seems not a moment too soon. I think it's time to find your Achilles heel, or should I say - flipper. Did I? It must be the carrot juice making me colour blind!
Side by Side
Side by side images can be done by placing the Side Image display images inside a div with the clearfix class. These images should use the alignment of 'none' and a width set to a percentage. In this case, each image is set to 49% (needs some flex to keep them from wrapping). Also, no border is set since the captions are different lengths.
This technique can be used to let multiple images be displayed side by side using percent smaller percentage widths. The images below use 32% to prevent wrapping. Remember to add the surrounding <div class='clearfix'> wrapper.
Bottom text