CCGA Component Library

C Feature Media: Image 

<div class="c_feature_media ">
    <div class="c_feature_media_mask">
        <span class="lazy_image_wrapper c_feature_media_image_wrapper">
            <img class="js-lazy js-lazyload c_feature_media_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/300x169/11" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/300x169/11 300w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/11 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/11 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/11 980w" alt="{{ alt }}">
        </span>
        <noscript>
            <img class="c_feature_media_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/980x552/11" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/980x552/11 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/11 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/11 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/300x169/11 300w" sizes="100vw" alt="{{ alt }}">
        </noscript>
    </div>
</div>
 
<div class="c_feature_media {{ class }}">
	<div class="c_feature_media_mask">
		{% if atmospheric %}
			<div class="c_feature_media_video">
				{% render '@component-atmospheric' with atmospheric_config %}
			</div>
		{% else %}
			{% render "@partial-image" with {
				class: "c_feature_media",
				alt: '{{ alt }}',
				image: image,
			} %}
		{% endif %}
	</div>
</div>

No notes defined.