Media and Images

Use the approved dimensions and file sizes below to apply media and images to the website. As a general rule, all images should be a minimum of 3600 pixels wide at 72 dpi.

HTML Tags, Styled

Audio `<audio>`

Output

Code


<audio controls>
<source src="media/audio/sample_audio_mp3.mp3" type="audio/mpeg">
<source src="media/audio/sample_audio_ogg.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>

Image `<img>`

Output

Code


<img src="https://assets.mcc.gov/content/uploads/2017/02/photo-101616-SEN-rice-farmers-irrigation.jpg" alt="">

Figure `<figure>`

Output

Code


<figure>
<img src="https://assets.mcc.gov/content/uploads/2017/02/photo-101616-SEN-rice-farmers-irrigation.jpg" alt="">
<figcaption>
<p class="credit">Photo Credit</p>
<p class="caption">Photo caption.</p>
</figcaption>
</figure>

Video `<video>`

MCC uses a third-party video hosting service which embeds its player code using either JavaScript or an iFrame.

Output

Code


<video controls poster="../media/video/sample_mpeg4_poster.png" height="225" width="300">
<source src="media/video/sample_mpeg4.mp4" type="video/mp4">
<source src="media/video/sample_ogg.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Media & Image Code Patterns

Charts, Graphs & Other Non-Photographic Figures

Output

Code


<figure>
<figcaption>
<p class="caption">Chart or Graphic Title</p>
</figcaption>
<img alt="" src="https://assets.mcc.gov/content/uploads/2017/05/image-102715-un-sdgs.jpg" width="100%" />
</figure>

Photos — With Caption & Credit

Output

Code


<figure>
<img alt="" src="https://assets.mcc.gov/content/uploads/2017/02/photo-101616-SEN-rice-farmers-irrigation.jpg" width="100%" />
<figcaption>
<p class="credit">Photo credit</p>
<p class="caption">Photo caption goes here</p>
</figcaption>
</figure>

Image-Specific Helper Classes

Image Helper Classes
Class	Output	Description
`.half`		Add to `<figure>` to have the image display aligned right and 50 percent of the width of its container.
`.thumbnail`	Gotham	Add to `<figure>` to have the image display aligned left and sized for a thumbnail headshot (about 20 percent of the width of its container).

Photos — Without Caption

Output

Code


<figure>
<img alt="" src="https://assets.mcc.gov/content/uploads/2017/02/photo-101616-SEN-rice-farmers-irrigation.jpg" width="100%" />
</figure>

Image-Specific Helper Classes

Image Helper Classes
Class	Output	Description
`.half`		Add to `<figure>` to have the image display aligned right and 50 percent of the width of its container.
`.thumbnail`	Gotham	Add to `<figure>` to have the image display aligned left and sized for a thumbnail headshot (about 20 percent of the width of its container).

Slideshows

All slideshows on mcc.gov include a thumbnail navigation at the top. Thumbnails are sized to 146 x 90 pixels. Slideshow images should be sized to 960 x 594 pixels (the golden mean's ratio) but will display as 940 x 582 pixels.

MCC uses the Flexslider slideshow framework to display its slideshows.

Output

MCC

Ra’eda, one of 30 women trained as plumbers as part of MCC’s Jordan Compact, fixes a client’s faucet in the city of Zarqa. Ra’eda and her colleagues are challenging attitudes about women’s roles and professions in Jordan—one of the most water-poor countries on Earth that also has one of the lowest women’s labor force participation rates in the world.
MCC

As part of its Jordan Compact, MCC funded a critical expansion of the As-Samra Wastewater Treatment Plant that is producing much-needed treated water for farm irrigation in the Jordan Valley and freeing up fresh water for household use.
MCC

A boy rolls a barrel toward a water source in Lusaka, Zambia. As part of MCC’s investment in the country, the Zambian Government is working to reform the water sector and improve drainage in the capital city of Lusaka to better meet citizens’ water and sanitation needs. The vital water sector improvements aim to decrease the risk of water-related disease, time spent collecting water, the cost of water, and business and household losses due to flooding.

Code


<div id="flex-slideshow-std">
<!-- thumbnail images for slideshow navigation -->
<div id="carousel" class="flexslider">
<ul class="slides">
<!-- copy/paste this snippet of code for each slide in the slideshow -->
<li class="slide">
<img src="https://assets.mcc.gov/content/uploads/2017/05/photo-slide-032217-jor-jordan-woman-plumber-working.jpg" alt="" />
</li>
<!-- end code snippet to copy/paste -->
<li class="slide">
<img src="https://assets.mcc.gov/content/uploads/2017/05/photo-slide-032217-jor-as-samra-wastewater-plant.jpg" alt="" />
</li>
<li class="slide">
<img src="https://assets.mcc.gov/content/uploads/2017/02/photo-111616-zmb-water-access.jpg" alt="" />
</li>
</ul>
</div>
<!-- end thumbnail images for slideshow navigation -->
<!-- actual slideshow images -->
<div id="slider" class="flexslider">
<ul class="slides">
<!-- copy/paste this snippet of code for each slide in the slideshow -->
<li class="slide">
<figure>
<img src="https://assets.mcc.gov/content/uploads/2017/05/photo-slide-032217-jor-jordan-woman-plumber-working.jpg" alt="" />
<figcaption>
<p class="credit">MCC</p>
<div>
<p class="caption">Ra&#8217;eda, one of 30 women trained as plumbers as part of MCC&#8217;s Jordan Compact, fixes a client&#8217;s faucet in the city of Zarqa. Ra&#8217;eda and her colleagues are challenging attitudes about women&#8217;s roles and professions in Jordan&#8212;one of the most water-poor countries on Earth that also has one of the lowest women&#8217;s labor force participation rates in the world.</p>
</div>
</figcaption>
</figure>
</li>
<!-- end code snippet to copy/paste -->
<li class="slide">
<figure>
<img src="https://assets.mcc.gov/content/uploads/2017/05/photo-slide-032217-jor-as-samra-wastewater-plant.jpg" alt="" />
<figcaption>
<p class="credit">MCC</p>
<div>
<p class="caption">As part of its Jordan Compact, MCC funded a critical expansion of the As-Samra Wastewater Treatment Plant that is producing much-needed treated water for farm irrigation in the Jordan Valley and freeing up fresh water for household use.</p>
</div>
</figcaption>
</figure>
</li>
<li class="slide">
<figure>
<img src="https://assets.mcc.gov/content/uploads/2017/02/photo-111616-zmb-water-access.jpg" alt="" />
<figcaption>
<p class="credit">MCC</p>
<div>
<p class="caption">A boy rolls a barrel toward a water source in Lusaka, Zambia. As part of MCC&#8217;s investment in the country, the Zambian Government is working to reform the water sector and improve drainage in the capital city of Lusaka to better meet citizens&#8217; water and sanitation needs. The vital water sector improvements aim to decrease the risk of water-related disease, time spent collecting water, the cost of water, and business and household losses due to flooding.</p>
</div>
</figcaption>
</figure>
</li>
</ul>
</div>
</div>
<script  type="text/javascript">
jQuery(document).ready(function($) {
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 146,
itemMargin: 2,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemMargin: 0,
smoothHeight: true,
sync: "#carousel",
start: function(slider) {
var slide_count = slider.count - 1;
$(slider)
.find('img.lazy:eq(0)')
.each(function() {
var src = $(this).attr('data-src');
$(this).attr('src', src).removeAttr('data-src');
});
},
before: function(slider) {
var slides     = slider.slides,
index      = slider.animatingTo,
$slide     = $(slides[index]),
$img       = $slide.find('img[data-src]'),
current    = index,
nxt_slide  = current + 1,
prev_slide = current - 1;
$slide
.parent()
.find('img.lazy:eq(' + current + '), img.lazy:eq(' + prev_slide + '), img.lazy:eq(' + nxt_slide + ')')
.each(function() {
var src = $(this).attr('data-src');
$(this).attr('src', src).removeAttr('data-src');
});
}
});
});
</script>

Helper Classes

Media and Images Helper Classes
Class	Description
`.credit`	Add to `<p>` to style text for a photo credit.
`.caption`	Add to `<p>` to style text for a caption.
`.figure-align-center`	Add to `<figure>` to align an object in the center of the container
`.figure-align-left`	Add to `<figure>` to align an object to the left side of the container
`.figure-align-right`	Add to `<figure>` to align an image or graphic to the right. (Using the `.half` class does the same thing.)
`.figure-border`	Add to `<figure>` to have a border and include 1 em of padding.
`.figure-img-no-border`	Add to `<figure>` to remove the border around an image.
`.figure-width-two-thirds`	Add to `<figure>` to make it 66% the size of its container
`.figure-width-three-fourths`	Add to `<figure>` to make it 75% the size of its container
`.half`	Add to `<figure>` to have the image display aligned right and 50 percent of the width of its container.
`.icon`	Add to `<figure>` to display an icon graphic at 48 pixels wide.
`.print-pdf-landscape`	On-screen: no styling changes Print: no styling changes PDF: sets the image width to 652pt, the full width of the content area using MCC document standard margins
`.thumbnail`	Add to `<figure>` to have the image display aligned left and sized for a thumbnail headshot (about 20 percent of the width of its container).
`.video-player`	Makes a map container correctly proportional and also makes the map responsive at smaller breakpoints.

Image Type, File Formats & Naming Conventions

For images representing a country include the country name per the naming convention below, otherwise do not include it.

Image type, file formats and naming conventions
Type	File Format	Naming Convention
Chart	.svg or using our charting framework (preferred)	`chart-MMDDYY-[country-name]-[three or four words describing the entry]`
Graphic	Vector: .svg Raster: .png or .jpg	`graphic-MMDDYY-[country-name]-[three or four words describing the entry]`
Photo	.jpg	`photo-MMDDYY-[country-name]-[three or four words describing the entry]`

Standard Image Sizes

These image sizes are pre-defined as part of the website's visual design.

Standard Images Sizes
Size	Slug	Description
Thumbnail	`thumbnail`	144 x 144 pixels, cropped center/center to be a square
Teaser Thumbnail	`teaser-thumbnail`	Used for teaser images in the list code pattern, 190 x 96 pixels, 2:1 ratio, cropped center/center
Headshot Medium	`headshot-medium`	Used for Board of Directors official photos, 200 x 240 pixels, 1:1.2 ratio, cropped center/center
Flag - Small	`flag-small`	Used for flag buttons in headlines and text, 48 x 48 pixels, cropped center/center
Flag - Medium	`flag-medium`	Used for flag buttons on list pages, 108 x 108 pixels, cropped center/center
Slideshow - Thumbnail	`slideshow-thumb`	Used in slideshows as the thumbnail image for navigation, 160 x 99 pixels, cropped center/center
Slideshow - Slide	`slideshow-slide`	Used in slideshows as the slide image, 1000 x 619 pixels, cropped center/center
Medium	`medium`	Used for images in a content area displayed at 50% width, 400 x 400 pixels, no crop
Large	`large`	Used for images in a content area displayed at full width, 800 x 800 pixels, no crop
Extra Large	`xl`	Used in featured visuals when featured image is displayed, 1200 x 600 pixels, 2:1 ratio, cropped center/center
Full Screen	`fullscreen`	Used for a full page width image, 1200 x 1200 pixels, no crop
Home Page - Spotlight	`home-spotlight`	Used on the home page for the spotlight area, 1200 x 600 pixels, 2:1 ratio, cropped center/center
Home Page - Feature	`home-feature`	Used on the home page for the feature areas, 600 x 300 pixels, 2:1 ratio, cropped center/center

Media and Images

HTML Tags, Styled

Audio <audio>

Image <img>

Figure <figure>

Video <video>

Media & Image Code Patterns

Charts, Graphs & Other Non-Photographic Figures

Photos — With Caption & Credit

Image-Specific Helper Classes

Photos — Without Caption

Image-Specific Helper Classes

Slideshows

Helper Classes

Image Type, File Formats & Naming Conventions

Standard Image Sizes

Audio `<audio>`

Image `<img>`

Figure `<figure>`

Video `<video>`