Image & Caption Styles

Image Styles

Image: Right - 50%

Stewie portraitWidth: 50%
(Approximately 424px wide, height should auto-adjust to keep proper aspect ratio)
Right-Aligned
Subtle dropshadow

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

 

Image: Left - 50%

Stewie portraitWidth: 50%
(Approximately 424px wide, height should auto-adjust to keep proper aspect ratio)
Left-Aligned
Subtle dropshadow

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

 

Image: Right - 33%

Janelle and StewieWidth: 33% 
(Approximately 279px wide, height should auto-adjust)
Right-aligned
Subtle dropshadow

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

 

Image: Left - 33%

Janelle and StewieWidth: 33% 
(Approximately 279px wide, height should auto-adjust)
Left-aligned
Subtle dropshadow

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.

 

Image: Right - 20% 

Cupcake

Width: 20% 
(Approximately 211px wide, height should auto-adjust)
Right-aligned
Subtle dropshadow

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

Image: Left - 20%

Cupcake

Width: 20% 
(Approximately 211px wide, height should auto-adjust)
Left-aligned
Subtle dropshadow

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

 

Image: Left - Actual Size

You would only use this style if your image is smaller than 200 pixels wide

Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Also know that if you don't have enough text wrapping around an image and you add another image, the display won't look quite right. I am adding more text here because I had that issue with the Actual Size L photo displaying into the area of the body where Actual Size R was displaying.

Image: Right - Actual Size

You would only use this style if your image is smaller than 200 pixels wide

Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.

Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Image: Full Width

This image style will make the image span the full-width of the pane it is in - which may distort the image and make it blurry. It is best used in smaller columns, or with high-resolution images. Keep in mind that high-resolution images take a considerable amount of time to load - it is best to optimize them for the web.

Forest

Image: White Border

This image style applies a thick white border with a slight drop shadow around it. It can be used in conjunction with the other styles (such as Image: Left - 50%).

Edam the big cheese paneer monterey jack ricotta caerphilly fromage port-salut. Emmental cheddar macaroni cheese feta mascarpone red leicester brie cheesy grin. Paneer macaroni cheese dolcelatte airedale cheese and wine the big cheese cheesy feet pecorino. Stilton everyone loves boursin st. agur blue cheese.

Bavarian bergkase cut the cheese hard cheese. Emmental bavarian bergkase lancashire cheese triangles swiss cheddar red leicester red leicester. Goat macaroni cheese boursin feta queso cream cheese cheese triangles cheese slices. Ricotta who moved my cheese say cheese lancashire squirty cheese fromage pecorino cheese and biscuits. Feta fromage fromage frais.

Cream cheese edam chalk and cheese. St. agur blue cheese cheese and biscuits pecorino stinking bishop mozzarella cauliflower cheese taleggio roquefort. Pepper jack bavarian bergkase parmesan cheese triangles cut the cheese mozzarella squirty cheese cheese and biscuits. Swiss when the cheese comes out everybody's happy cut the cheese mascarpone.

Image: Circle (with portrait-style image)

Llama wearing a scarf

Image: Circle can also be used on portrait-style images to create an oval shape. A portrait-style image just means that the image is taller than it is wide.

Using this style with non-square images is not recommended.

And now for some fun facts about the llama, one of the world's most graceful creatures. 

The llama (/ˈlɑːmə/; Spanish: [ˈʝama] locally: [ˈʎama] or [ˈʒama]) (Lama glama) is a domesticated South American camelid, widely used as a meat and pack animal by Andean cultures since the Pre-Columbian era.

The height of a full-grown, full-size llama is 1.7 to 1.8 m (5.6 to 5.9 ft) tall at the top of the head, and can weigh between 130 and 200 kg (290 and 440 lb). At birth, a baby llama (called a cria) can weigh between 9 and 14 kg (20 and 31 lb). Llamas typically live for 15 to 25 years, with some individuals surviving 30 years or more.[1][2][3]

They are very social animals and live with other llamas as a herd. The wool produced by a llama is very soft and lanolin-free. Llamas are intelligent and can learn simple tasks after a few repetitions. When using a pack, they can carry about 25 to 30% of their body weight for 8 to 13 km (5–8 miles).[4]

The name llama (in the past also spelled 'lama' or 'glama') was adopted by European settlers from native Peruvians.[5]

Llamas appear to have originated from the central plains of North America about 40 million years ago. They migrated to South America about three million years ago. By the end of the last ice age (10,000–12,000 years ago), camelids were extinct in North America.[4] As of 2007, there were over seven million llamas and alpacas in South America, and due to importation from South America in the late 20th century, there are now over 158,000 llamas and 100,000 alpacas in the United States and Canada.[6]

Source: Wikipedia

Image: Circle (with landscape image)

Napoleon Dynamite characters

Image: Circle can also be used for landscape images. Landscape images are wider than they are tall. The result is a wide oval cut out of the image. 

Using this style with non-square images is not recommended.

Napoleon Dynamite is a 2004 American comedy film produced by Jeremy Coon, Chris Wyatt, Sean C. Covel and Jory Weitz, written by Jared and Jerusha Hess and directed by Jared Hess. The film stars Jon Heder in the role of the title character, for which he was paid $1,000. After the film's runaway success, Heder re-negotiated his compensation and received a cut of the profits.[2] The film was Jared Hess' first full-length feature and is partially adapted from his earlier short film, Peluca. Napoleon Dynamite was acquired at the Sundance Film Festival by Fox Searchlight Pictures and Paramount Pictures, in association with MTV Films. It was filmed in and near Franklin County, Idaho in the summer of 2003. It debuted at the Sundance Film Festival in January 2004, and in June 2004 was released on a limited basis. Its widespread release followed in August. The film's total worldwide gross revenue was $46,118,097.[3] The film has since developed a cult following.[4][5]

Source: Wikipedia

Image: Circle (with square image)

Steve Buscemi in Fargo

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!

Fargo is a 1996 American dark comedy crime thriller film written, produced, edited, and directed by Joel and Ethan Coen. It stars Frances McDormand as a pregnant Minnesota police chief investigating roadside homicides that ensue after a struggling car salesman (William H. Macy) hires two criminals (Steve Buscemi and Peter Stormare) to kidnap his wife in order to extort a hefty ransom from his wealthy father-in-law (Harve Presnell).

Fargo premiered at the 1996 Cannes Film Festival where Joel Coen won the festival's Prix de la mise en scène (Best Director Award) and the film was nominated for the Palme d'Or.[4] A critical and commercial success, Fargo received seven nominations at the 69th Academy Awards, including Best Picture, and won two awards: McDormand won Best Actress and the Coens won Best Writing (Original Screenplay).

In 2006, the film was deemed "culturally, historically, or aesthetically significant" by the Library of Congress and inducted into the United States National Film Registry for preservation, making it one of six films to have been preserved in their first year of eligibility.[5] The American Film Institute named it one of the 100 greatest American movies of all time in 1998.

Source: Wikipedia

Image with rounded corners

Jigglypuff

 Jigglypuff (Japanese: プリン Purin) is a dual-type Normal/Fairy Pokémon. Prior to Generation VI, it was a pure Normal-type Pokémon. It evolves from Igglybuff when leveled up with high friendship and evolves into Wigglytuff when exposed to a Moon Stone.

 

Jigglypuff is a round, pink ball with pointed ears and large, blue eyes. It has rubbery, balloon-like skin and small, stubby arms and somewhat long feet. On top of its head is a curled tuft of fur. As seen in Pokémon Stadium, it is filled with air, as a defeated Jigglypuff, deflates until it is flat. By drawing extra air into its body, it is able to float as demonstrated in Super Smash Bros.


Jigglypuff uses its eyes to mesmerize opponents. Once it achieves this, it will inflate its lungs and begin to sing a soothing lullaby. If the opponent resists falling asleep, Jigglypuff will endanger its own life by continuing to sing until its lungs run out of air. It is able to adjust the wavelength of its voice to match the brain waves of someone in a deep sleep. This helps ensure drowsiness in its opponents. Jigglypuff can mostly be found in lush green plains and grassy meadows.

Source: http://bulbapedia.bulbagarden.net/

Animated Gifs

Goldy dancing

Animated gifs now display properly on AHC supported Drupal sites. Add a file with the .gif file extension just as you would add any other image file.

Step-by-step directions for adding images and gifs

Image Caption Styles

Caption: Left - 50%

Display is on the left. 50% refers to the size of the image - which takes up 50% of the panel it is in. This caption class is best paired with the Image: Left - 50% style.

Stewie smilingNow that is a cute dog.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.

 

Caption: Right - 50%

Display is on the right. 50% refers to the size of the image - which takes up 50% of the panel it is in.  This caption class is best paired with the Image: Right - 50% style.

Stewie in a carHe's cute on the right, too.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.

 

Caption: Left - 33%

Display is on the left. 33% refers to the size of the image - which takes up 33% of the panel it is in. This caption class is best paired with the Image: Left - 33% style.

Stewie in a carThis is a narrow option for photos with captions.

Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.

Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

 

Caption: Right - 33%

Display is on the right. 33% refers to the size of the image - which takes up 33% of the panel it is in. This caption class is best paired with the Image: Right - 33% style.

Stewie in a carStill the same dog to show the difference in photo size.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.

Also know that if you don't have enough text wrapping around an image and you add another image, the display won't look quite right. I am adding more text here because I had that issue with the Caption R sm photo displaying into the area of the body where Actual Size L was displaying.

Oops, I had to add even more text than I thought. Sometimes styling a page will require saving the page and vieiwing it and then making adjustments as you see fit. Multiple images on a page can be tricky!

 

Caption: Left - 20%

Display is on the left. 20% refers to the size of the image - which takes up 20% of the panel it is in. This caption class is best paired with the Image: Left - 20% style AND/OR Image: Left - Actual Size

KittenI'm just a little kitty!

Macaroni cheese blue castello swiss. Edam feta cheese triangles when the cheese comes out everybody's happy cheesecake dolcelatte cheddar caerphilly. Mascarpone camembert de normandie babybel manchego taleggio jarlsberg port-salut parmesan. Hard cheese paneer cheese on toast cream cheese taleggio hard cheese mascarpone goat. Melted cheese.

Lancashire roquefort red leicester. Monterey jack babybel cheeseburger manchego cottage cheese chalk and cheese croque monsieur camembert de normandie. Red leicester jarlsberg goat chalk and cheese dolcelatte stinking bishop cheese strings cut the cheese. Goat cheese strings taleggio lancashire cottage cheese goat cheese on toast babybel. Say cheese cut the cheese cheese strings.

 

Caption: Right - 20%

Display is on the right. 20% refers to the size of the image - which takes up 20% of the panel it is in. This caption class is best paired with the Image: Right - 20% style AND/OR Image: Right - Actual Size

kitten I'm just a little kitty!

Macaroni cheese blue castello swiss. Edam feta cheese triangles when the cheese comes out everybody's happy cheesecake dolcelatte cheddar caerphilly. Mascarpone camembert de normandie babybel manchego taleggio jarlsberg port-salut parmesan. Hard cheese paneer cheese on toast cream cheese taleggio hard cheese mascarpone goat. Melted cheese.

Lancashire roquefort red leicester. Monterey jack babybel cheeseburger manchego cottage cheese chalk and cheese croque monsieur camembert de normandie. Red leicester jarlsberg goat chalk and cheese dolcelatte stinking bishop cheese strings cut the cheese. Goat cheese strings taleggio lancashire cottage cheese goat cheese on toast babybel. Say cheese cut the cheese cheese strings.

 

Caption: Full-Width

Displays the full-span of the image. Text is aligned left. 

Road in OmahaOn a long and lonesome highway east of Omaha

 

Overlay Caption

Croatia landscapeThis is a dark overlay caption

Croatia landscapeThis is a light overlay caption