Edinburgh GEL

Content images

EdWeb sets the rules for how generic content images display, depending on the screen size.

Images are a useful way to complement information and make your page look more appealing. However, images should not be used in place of information, and each page should make sense without the image.

Find out how images are used in EdWeb

The way images are presented is determined by combination of a user's screen size and the size and orientation of the original image that was uploaded. It can be more difficult to control the presentation of images in a responsive design, so ensure that you preview and check how your images display across a variety of screen sizes. Sometimes you will have to amend your image dimensions to work better with your content.

Accessibility review

Images in content must have alternative text in the ‘alt’ tag. This text must include all text in the image or should describe the image accurately. Site banner images have an ‘alt’ tag automatically set from the site name. Images in panels for the overview and homepage content types have alternative text set from the default alt text associated with the image.

Accessibility issues

None.

Choose a colour

Update
You are viewing the colour: Red (default), hex-value: #d50032

Choose viewport

      
<div class="image"><figure class="scald-atom scald-atom-image uoe-scald col-xs-5 col-lg-4 pull-right uoe-image"><picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="http://www.ed.ac.uk/files/styles/landscape_breakpoints_theme_uoe_tv_1x/public/thumbnails/image/890x400.jpg?itok=SHW8a34u 1x" media="only screen and (min-width: 1200px)">
<source srcset="http://www.ed.ac.uk/files/styles/landscape_breakpoints_theme_uoe_desktop_1x/public/thumbnails/image/890x400.jpg?itok=qT_OS3gT 1x" media="(min-width: 992px)">
<source srcset="http://www.ed.ac.uk/files/styles/landscape_breakpoints_theme_uoe_tablet_1x/public/thumbnails/image/890x400.jpg?itok=JXngoPjN 1x" media="(min-width: 768px)">
<source srcset="http://www.ed.ac.uk/files/styles/landscape_breakpoints_theme_uoe_mobile_1x/public/thumbnails/image/890x400.jpg?itok=KdvCUgXu 1x" media="(min-width: 0px)">
<!--[if IE 9]></video><![endif]-->
<img src="http://www.ed.ac.uk/files/styles/landscape_breakpoints_theme_uoe_mobile_1x/public/thumbnails/image/890x400.jpg?itok=KdvCUgXu" alt="Plain box of 890x400px" title="">
</picture></figure></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eleifend arcu eget elit hendrerit, ac vulputate velit gravida. Curabitur at leo eu velit mollis aliquam. Morbi at neque et turpis dapibus fermentum non a metus. In eget malesuada velit, vel facilisis diam. Fusce tincidunt est nisi, sed semper felis efficitur a. Aliquam lobortis mi est, id placerat felis semper vitae. In non turpis eget dolor placerat imperdiet non at ex. Morbi in eleifend diam. Donec nec pretium ipsum. Donec in molestie dui. Curabitur dictum ante nec malesuada varius. Aenean mollis cursus semper. Aenean lectus metus, gravida nec pharetra nec, vulputate vitae eros. Ut vitae nulla dapibus, lacinia nibh vitae, ullamcorper mauris. Etiam ultricies dolor vitae tellus finibus tempor nec vitae ante. Sed convallis nibh dolor, sit amet feugiat ex elementum quis.</p>

<div class="image"><figure class="scald-atom scald-atom-image uoe-scald col-xs-3 col-sm-4 col-md-3 pull-right uoe-image"><picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="http://www.ed.ac.uk/files/styles/portrait_breakpoints_theme_uoe_tv_1x/public/thumbnails/image/890x1200.jpg?itok=WkW52jV9 1x" media="only screen and (min-width: 1200px)">
<source srcset="http://www.ed.ac.uk/files/styles/portrait_breakpoints_theme_uoe_desktop_1x/public/thumbnails/image/890x1200.jpg?itok=_wus4IC0 1x" media="(min-width: 992px)">
<source srcset="http://www.ed.ac.uk/files/styles/portrait_breakpoints_theme_uoe_tablet_1x/public/thumbnails/image/890x1200.jpg?itok=CnhA60Qc 1x" media="(min-width: 768px)">
<source srcset="http://www.ed.ac.uk/files/styles/portrait_breakpoints_theme_uoe_mobile_1x/public/thumbnails/image/890x1200.jpg?itok=vgW2F1tl 1x" media="(min-width: 0px)">
<!--[if IE 9]></video><![endif]-->
<img src="http://www.ed.ac.uk/files/styles/portrait_breakpoints_theme_uoe_mobile_1x/public/thumbnails/image/890x1200.jpg?itok=vgW2F1tl" alt="Plain box of 890x1200px" title="">
</picture></figure></div>

<p>Ut eu blandit nisi. Sed vestibulum sollicitudin velit in ornare. Cras nec euismod felis. Donec vestibulum dictum nibh sollicitudin dignissim. Nulla iaculis est vitae feugiat ultricies. Donec nec pulvinar mauris. Mauris vulputate euismod urna sed viverra. Pellentesque pretium arcu accumsan, dapibus mauris ut, mollis quam.</p>

<p>Maecenas interdum consectetur elementum. Sed id pharetra dui, ut rutrum dolor. Pellentesque consectetur arcu porta odio tincidunt rutrum. Suspendisse potenti. Aliquam interdum est id turpis laoreet luctus. Curabitur diam metus, dignissim id vehicula quis, mollis a nulla. Ut sed auctor ex. Quisque aliquet ex nec sem mollis, at mollis leo scelerisque. Etiam aliquet felis sollicitudin cursus eleifend. Nam ultrices venenatis ligula, ac euismod tellus consectetur eu.</p>

<p>Integer sit amet ex elementum, congue mi ac, hendrerit odio. Duis dolor leo, pellentesque a felis eget, egestas imperdiet libero. Aliquam ac neque aliquet dolor auctor accumsan. In quis massa arcu. Fusce ut gravida libero. Integer elementum nulla sed sem condimentum, quis aliquam orci mollis. Nulla ornare massa eget mi imperdiet laoreet. Pellentesque condimentum velit sapien, in ultricies urna pretium et. Ut malesuada porta ligula quis venenatis. Phasellus semper suscipit sem, vel faucibus lacus porttitor sit amet. Fusce dapibus magna urna, sit amet imperdiet sapien luctus vel.</p>

<div class="image"><figure class="scald-atom scald-atom-image uoe-scald uoe-image"><picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="http://www.ed.ac.uk/files/styles/landscape_breakpoints_theme_uoe_tv_1x/public/thumbnails/image/1300x400.jpg?itok=C_Ak3_05 1x" media="only screen and (min-width: 1200px)">
<source srcset="http://www.ed.ac.uk/files/styles/landscape_breakpoints_theme_uoe_desktop_1x/public/thumbnails/image/1300x400.jpg?itok=SgeD2a21 1x" media="(min-width: 992px)">
<source srcset="http://www.ed.ac.uk/files/styles/landscape_breakpoints_theme_uoe_tablet_1x/public/thumbnails/image/1300x400.jpg?itok=L_4h7RHA 1x" media="(min-width: 768px)">
<source srcset="http://www.ed.ac.uk/files/styles/landscape_breakpoints_theme_uoe_mobile_1x/public/thumbnails/image/1300x400.jpg?itok=RrEARn3v 1x" media="(min-width: 0px)">
<!--[if IE 9]></video><![endif]-->
<img src="http://www.ed.ac.uk/files/styles/landscape_breakpoints_theme_uoe_mobile_1x/public/thumbnails/image/1300x400.jpg?itok=RrEARn3v" alt="Plain box of 1300x400px" title="">
</picture><figcaption>Because this image is landscape and over 1200px, it will always display the full width of the screen.</figcaption></figure></div>


<p>Maecenas volutpat ipsum mollis quam fermentum tempus. Proin ullamcorper libero lorem, sed vulputate odio luctus pulvinar. Vestibulum ut volutpat orci. Quisque porta erat quis placerat hendrerit. Quisque malesuada in ex eget ultricies. Sed ac arcu neque. Vestibulum vehicula tincidunt rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam fringilla at risus vel pharetra. Proin eu metus neque. Ut eu nisl quam.</p>




<div class="image"><figure class="scald-atom scald-atom-image uoe-scald col-xs-3 col-sm-4 col-md-3 pull-right uoe-image"><picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="http://www.ed.ac.uk/files/styles/portrait_breakpoints_theme_uoe_tv_1x/public/thumbnails/image/1300x1600.jpg?itok=8TxUOM3O 1x" media="only screen and (min-width: 1200px)">
<source srcset="http://www.ed.ac.uk/files/styles/portrait_breakpoints_theme_uoe_desktop_1x/public/thumbnails/image/1300x1600.jpg?itok=ZHq0rBDN 1x" media="(min-width: 992px)">
<source srcset="http://www.ed.ac.uk/files/styles/portrait_breakpoints_theme_uoe_tablet_1x/public/thumbnails/image/1300x1600.jpg?itok=cASlQCA4 1x" media="(min-width: 768px)">
<source srcset="http://www.ed.ac.uk/files/styles/portrait_breakpoints_theme_uoe_mobile_1x/public/thumbnails/image/1300x1600.jpg?itok=EdraOmYW 1x" media="(min-width: 0px)">
<!--[if IE 9]></video><![endif]-->
<img src="http://www.ed.ac.uk/files/styles/portrait_breakpoints_theme_uoe_mobile_1x/public/thumbnails/image/1300x1600.jpg?itok=EdraOmYW" alt="Plain box of 1300x1600px" title="">
</picture><figcaption>Portrait images always float right.</figcaption></figure></div>

<h2>Practical guidance</h2>

<p><a href="http://www.ed.ac.uk/website-programme/edweb/demonstration/structure-design/responsive-design" title="Responsive design and accessibility">Responsive design and accessibility - more on how your site will display</a></p>

<p><a href="http://www.wiki.ed.ac.uk/display/edweb/Image+advice">What makes a good image? - EdWeb training wiki [EASE login required]</a></p>

<p><a href="http://www.wiki.ed.ac.uk/display/edweb/EdWeb+guides+-+add+images+and+documents">Adding an image - EdWeb training wiki [EASE login required]</a></p>
<p><a href="http://www.ed.ac.uk/website-programme/edweb/demonstration/images">Images as used in EdWeb</a></p>
<h2>Accessibility review</h2>
<p>Images in content must have alternative text in the ‘alt’ tag. This text must include all text in the image or should describe the image accurately.
Site banner images have an ‘alt’ tag automatically set from the site name. Images in panels for the overview and homepage content types have alternative text set from the default alt text associated with the image. </p>
<h3>Accessibility issues</h3>
<p>None </p>