<figure class="captioned-image  ">
    <div class="captioned-image__image-container">
        <div>
            <noscript>
                <img width=1380 height=1104 className='image image--noscript' src=https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/640,/0/default.jpg
                alt=animating the body />
            </noscript>
            <img width="1380" height="1104" class="image lazy-image lazyload   " src="https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/30,/0/default.jpg" data-srcset="https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/160,/0/default.jpg 160w,https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/180,/0/default.jpg 180w,https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/282,/0/default.jpg 282w,https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/320,/0/default.jpg 320w,https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/420,/0/default.jpg 420w,https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/600,/0/default.jpg 600w,https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/880,/0/default.jpg 880w,https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/960,/0/default.jpg 960w,https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/1024,/0/default.jpg 1024w,https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/1338,/0/default.jpg 1338w,https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/1380,/0/default.jpg 1380w"
                sizes="100vw" alt="animating the body" />
        </div>
    </div>
    <figcaption class="captioned-image__caption plain-text font-LR3-s font-LR2-m">
        <div class="icon float-l margin-right-s1">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path d="M20.5 4.8h-15a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3v-10a3 3 0 0 0-3-3zm-15 2h15a1 1 0 0 1 1 1V16L20 14.5a3.09 3.09 0 0 0-4.22 0l-.53.5-4.15-4.21a3.07 3.07 0 0 0-4.24 0L4.5 13.16V7.8a1 1 0 0 1 1-1zm15 12h-15a1 1 0 0 1-1-1v-1.93a1 1 0 0 0 .33-.22l3.46-3.46a1 1 0 0 1 1.41 0l4.49 4.55a1.51 1.51 0 0 0 2.1 0l.91-.86a1 1 0 0 1 1.41 0l2.59 2.59a1 1 0 0 1-.7.33z"></path>
                    <circle cx="16.75" cy="10.25" r="1.75"></circle>
                </svg>
            </svg>
        </div>
        <div class="captioned-image__caption-text " tabindex="0"> <span><p class="">Collecting plants in a monastic garden, from <em class="">Kreuterbuch, von natürlichem Nutz, und gründtlichem Gebrauch der Kreutter</em>, 1550.</p></span>
        </div>
    </figcaption>
</figure>
// @flow

import {font, spacing} from '../../../utils/classnames';
import Icon from '../Icon/Icon';

type Props = {|
  positionInSeries?: number,
  series?: Object,
  contentType?: string,
  caption: string,
  truncateCaption?: string,
  slideNumbers?: {| current: number, total: number |},
  isFull?: boolean,
  fitVh?: boolean,
  children: React.Node
|}

const CaptionedImage = ({
  positionInSeries,
  series,
  contentType,
  caption,
  truncateCaption,
  slideNumbers,
  isFull,
  fitVh,
  children
}: Props) => (
  <figure className={`captioned-image ${isFull ? 'captioned-image--is-full' : ''} ${fitVh ? 'captioned-image--fit-vh' : ''}`}>
    <div className='captioned-image__image-container'>
      {children}
    </div>
    {caption &&
      <figcaption className={`captioned-image__caption plain-text ${font({s: 'LR3', m: 'LR2'})}`}>
        <Icon name='image' extraClasses='float-l margin-right-s1' />

        <div className={`captioned-image__caption-text ${truncateCaption ? 'js-truncate-text' : ''}`}
          tabIndex='0'
          data-slide-number={slideNumbers && slideNumbers.current}>
          {slideNumbers &&
            <span
              className={`captioned-image__number ${font({s: 'HNM5'})} ${spacing({s: 2}, {padding: ['right']})}`}
              aria-label={`slide ${slideNumbers.current} of ${slideNumbers.total}`}>
              <span aria-hidden='true'>{slideNumbers.current}/{slideNumbers.total}</span>
            </span>
          }{' '}
          <span dangerouslySetInnerHTML={{__html: caption}} />
        </div>
      </figcaption>
    }
  </figure>
);

export default CaptionedImage;
{
  "children": {
    "type": "div",
    "key": null,
    "ref": null,
    "props": {
      "dangerouslySetInnerHTML": {
        "__html": "<noscript>\n      <img width=1380\n        height=1104\n        className='image image--noscript'\n        src=https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/640,/0/default.jpg\n        alt=animating the body /></noscript><img width=\"1380\" height=\"1104\" class=\"image lazy-image lazyload   \" src=\"https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/30,/0/default.jpg\" data-srcset=\"https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/160,/0/default.jpg 160w,https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/180,/0/default.jpg 180w,https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/282,/0/default.jpg 282w,https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/320,/0/default.jpg 320w,https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/420,/0/default.jpg 420w,https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/600,/0/default.jpg 600w,https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/880,/0/default.jpg 880w,https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/960,/0/default.jpg 960w,https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/1024,/0/default.jpg 1024w,https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/1338,/0/default.jpg 1338w,https://iiif.wellcomecollection.org/image/wordpress:2016/10/featured-image-dans-blog2.jpg/full/1380,/0/default.jpg 1380w\" sizes=\"100vw\" alt=\"animating the body\"/>"
      }
    },
    "_owner": null,
    "_store": {}
  },
  "caption": "<p class=\"\">Collecting plants in a monastic garden, from <em class=\"\">Kreuterbuch, von natürlichem Nutz, und gründtlichem Gebrauch der Kreutter</em>, 1550.</p>"
}
  • Handle: @captioned-image
  • Preview:
  • Filesystem Path: ../common/views/components/CaptionedImage/CaptionedImage.js

There are no notes for this item.