Work media

<div>
    <div class="row is-hidden-s is-hidden-m">
        <div class="container">
            <div class="grid">
                <div class="grid__cell grid__cell--s12"><a data-track-event="{
    &quot;category&quot;: &quot;component&quot;,
    &quot;action&quot;: &quot;return-to-results:click&quot;,
    &quot;label&quot;: &quot;id:123, query:?somequery, title:Title of the work&quot;
  }" class="secondary-link font-HNM5-s font-HNM4-m " href="/works?somequery#123">Search results</a>
                </div>
            </div>
        </div>
    </div>
    <div id="work-media-123" class="row bg-black work-media js-work-media"><a class="control control--dark scroll-to-info js-scroll-to-info js-work-media-control flush-container-right" data-track-event="{&quot;category&quot;:&quot;component&quot;,&quot;action&quot;:&quot;scroll-to-info:click&quot;,&quot;label&quot;:&quot;scrolled-to-id:work-info&quot;}"
            href="#work-info"><span class="control__inner flex-inline flex--v-center flex--h-center"><div class="icon "><canvas class="icon__canvas" height="26" width="26"></canvas><svg class="icon__svg" aria-hidden="true"><svg viewBox="0 0 26 26"><path class="icon__shape" d="M18.8 10.45a1 1 0 0 0-1.41 0L13 14.87l-4.44-4.42a1 1 0 1 0-1.41 1.41L12.27 17a1 1 0 0 0 1.41 0l5.12-5.12a1 1 0 0 0 0-1.43z"></path></svg></svg></div><span class="visually-hidden">Scroll to info</span></span></a>
        <div class="work-media__image-container">
            <noscript>
                <img width=800 height=c lassName='image image--noscript' src=https://iiif.wellcomecollection.org/image/V0010965.jpg/full/640,/0/default.jpg
                alt=/>
            </noscript>
            <img width="800" class="image lazy-image lazyload   " src="https://iiif.wellcomecollection.org/image/V0010965.jpg/full/30,/0/default.jpg" data-srcset="https://iiif.wellcomecollection.org/image/V0010965.jpg/full/160,/0/default.jpg 160w,https://iiif.wellcomecollection.org/image/V0010965.jpg/full/180,/0/default.jpg 180w,https://iiif.wellcomecollection.org/image/V0010965.jpg/full/282,/0/default.jpg 282w,https://iiif.wellcomecollection.org/image/V0010965.jpg/full/320,/0/default.jpg 320w,https://iiif.wellcomecollection.org/image/V0010965.jpg/full/420,/0/default.jpg 420w,https://iiif.wellcomecollection.org/image/V0010965.jpg/full/600,/0/default.jpg 600w,https://iiif.wellcomecollection.org/image/V0010965.jpg/full/800,/0/default.jpg 800w"
                sizes="(min-width: 860px) 800px, calc(92.59vw + 22px)" alt="" />
        </div>
        <div class="js-image-viewer image-viewer">
            <button class="control control--dark image-viewer__launch-button js-image-viewer__launch-button" data-track-event="{&quot;category&quot;:&quot;component&quot;,&quot;action&quot;:&quot;work-launch-image-viewer:btnClick&quot;,&quot;label&quot;:&quot;id:123,title:Title of the work&quot;}"><span class="control__inner flex-inline flex--v-center flex--h-center"><div class="icon "><canvas class="icon__canvas" height="26" width="26"></canvas><svg class="icon__svg" aria-hidden="true"><svg viewBox="0 0 26 26"><path class="icon__shape" d="M22.15 20.71L18 16.61A8 8 0 1 0 16.63 18l4.1 4.1a1 1 0 0 0 1.41-1.41zm-10.39-3a6 6 0 1 1 6-6 6 6 0 0 1-6 6z"></path><path class="icon__shape" d="M14.93 10.74h-2.08V8.67a1 1 0 0 0-2 0v2.08H8.78a1 1 0 0 0 0 2h2.08v2.08a1 1 0 0 0 2 0v-2.09h2.08a1 1 0 0 0 0-2z"></path></svg></svg></div><span class="visually-hidden">View larger image</span></span>
        </button>
            <div class="image-viewer__content" id="123" data-info-src="https://iiif.wellcomecollection.org/image/V0010965.jpg/info.json">
                <div class="image-viewer__controls flex flex-end flex--v-center">
                    <button id="zoom-in-123" class="control control--light margin-right-s1" data-track-event="{&quot;category&quot;:&quot;component&quot;,&quot;action&quot;:&quot;work-zoom-in-button:click&quot;,&quot;label&quot;:&quot;id:123,title:Title of the work&quot;}"><span class="control__inner flex-inline flex--v-center flex--h-center"><div class="icon "><canvas class="icon__canvas" height="26" width="26"></canvas><svg class="icon__svg" aria-hidden="true"><svg viewBox="0 0 26 26"><path class="icon__shape" d="M22.15 20.71L18 16.61A8 8 0 1 0 16.63 18l4.1 4.1a1 1 0 0 0 1.41-1.41zm-10.39-3a6 6 0 1 1 6-6 6 6 0 0 1-6 6z"></path><path class="icon__shape" d="M14.93 10.74h-2.08V8.67a1 1 0 0 0-2 0v2.08H8.78a1 1 0 0 0 0 2h2.08v2.08a1 1 0 0 0 2 0v-2.09h2.08a1 1 0 0 0 0-2z"></path></svg></svg></div><span class="visually-hidden">Zoom in</span></span>
                </button>
                    <button id="zoom-out-123" class="control control--light margin-right-s8" data-track-event="{&quot;category&quot;:&quot;component&quot;,&quot;action&quot;:&quot;work-zoom-out-button:click&quot;,&quot;label&quot;:&quot;id:123,title:Title of the work&quot;}"><span class="control__inner flex-inline flex--v-center flex--h-center"><div class="icon "><canvas class="icon__canvas" height="26" width="26"></canvas><svg class="icon__svg" aria-hidden="true"><svg viewBox="0 0 26 26"><path class="icon__shape" d="M22.15 20.71L18 16.61A8 8 0 1 0 16.63 18l4.1 4.1a1 1 0 0 0 1.41-1.41zm-10.39-3a6 6 0 1 1 6-6 6 6 0 0 1-6 6z"></path><path class="icon__shape" d="M14.93 10.74H8.78a1 1 0 0 0 0 2h6.15a1 1 0 0 0 0-2z"></path></svg></svg></div><span class="visually-hidden">Zoom out</span></span>
                </button>
                    <button class="control control--light js-image-viewer__exit-button margin-right-s2" data-track-event="{&quot;category&quot;:&quot;component&quot;,&quot;action&quot;:&quot;work-exit-image-viewer:btnClick&quot;,&quot;label&quot;:&quot;id:123,title:Title of the work&quot;}"><span class="control__inner flex-inline flex--v-center flex--h-center"><div class="icon "><canvas class="icon__canvas" height="26" width="26"></canvas><svg class="icon__svg" aria-hidden="true"><svg viewBox="0 0 26 26"><path class="icon__shape" d="M19.7 18.3L14.4 13l5.3-5.3c.4-.4.4-1 0-1.4s-1-.4-1.4 0L13 11.6 7.7 6.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l5.3 5.3-5.3 5.3c-.4.4-.4 1 0 1.4s1 .4 1.4 0l5.3-5.3 5.3 5.3c.4.4 1 .4 1.4 0 .4-.4.4-1 0-1.4z"></path></svg></svg></div><span class="visually-hidden">Close image viewer</span></span>
                </button>
                </div>
                <div class="image-viewer__image" id="image-viewer-123"></div>
            </div>
        </div>
    </div>
</div>
// @flow
import {grid} from '../../../utils/classnames';
import Image from '../Image/Image';
import ImageViewer from '../ImageViewer/ImageViewer';
import SecondaryLink from '../Links/SecondaryLink/SecondaryLink';
import {iiifImageTemplate} from '../../../utils/convert-image-uri';
import Control from '../Buttons/Control/Control';

type Props = {|
  id: string,
  title: string,
  iiifUrl: string,
  width?: number,
  queryString?: string,
|}

const href = (queryString, id) => {
  return `/works${queryString}#${id}`;
};

const tracking = (queryString, id, trackTitle) => {
  return `{
    "category": "component",
    "action": "return-to-results:click",
    "label": "id:${id}, query:${queryString}, title:${trackTitle}"
  }`;
};

const WorkMedia = ({
  id,
  title,
  iiifUrl,
  width = 800,
  queryString
}: Props) => {
  const trackTitle = title.substring(0, 50);
  const imageContentUrl = iiifImageTemplate(iiifUrl)({ size: `${width},` });
  return (
    <div>
      {queryString &&
      <div className='row is-hidden-s is-hidden-m'>
        <div className='container'>
          <div className='grid'>
            <div className={grid({s: 12})}>
              <SecondaryLink
                url={href(queryString, id)}
                text='Search results'
                eventTracking={tracking(queryString, id, trackTitle)} />
            </div>
          </div>
        </div>
      </div>
      }
      <div id={`work-media-${id}`} className='row bg-black work-media js-work-media'>
        <Control
          type='dark'
          extraClasses='scroll-to-info js-scroll-to-info js-work-media-control flush-container-right'
          url='#work-info'
          eventTracking={`${JSON.stringify({
            category: 'component',
            action: 'scroll-to-info:click',
            label: 'scrolled-to-id:work-info'
          })}`}
          icon='chevron'
          text='Scroll to info' />
        <div className='work-media__image-container'>
          <Image
            width={width}
            contentUrl={imageContentUrl}
            lazyload={true}
            sizesQueries='(min-width: 860px) 800px, calc(92.59vw + 22px)'
            alt='' />
        </div>

        <ImageViewer
          imageUrl={imageContentUrl}
          id={id}
          trackTitle={trackTitle} />
      </div>
    </div>
  );
};

export default WorkMedia;
{
  "id": "123",
  "title": "Title of the work",
  "queryString": "?somequery",
  "iiifUrl": "https://s3-eu-west-1.amazonaws.com/miro-images-public/V0010000/V0010965.jpg",
  "width": "800"
}

There are no notes for this item.