LEMDO: Embed and Style Images

Embed and Style Images

¶ Prior Reading

Choose Image Types and Sizes

Add Images to the Repository

¶ Principles

LEMDO uses consistent encoding of images. You must encode each imageʼs type, width and height, and alternate (alt) text. You also have the option to float your image and create a visible caption for your images.

¶ Practice: Link to an Image

To link to an image, add a


                                          <figure>

element with a child


                                          <graphic>

element. Put the


                                       @url

attribute on


                                          <graphic>

. The value of


                                       @url

must be prefixed by "img:" followed by the full name of the image file, including the file extension (.jpg or .png). Do not capitalize the file extension. Note that LEMDO has documented protocols for how to name files; see Practice: Naming Image Files.

You do not need to include the full path of the image location in the


                                          <graphic>

element. The LEMDO build process will find the image and generate the right link (and, in any case, our build process collects all the images into a single folder in any output site).

In addition to


                                       @url

, there are three attributes that are required on the


                                          <graphic>

element: the


                                       @mimeType


                                       @width

, and


                                       @height

attributes. The value of


                                       @mimeType

must begin with the prefix "image/" followed by the format of the image that you are adding. For example, the


                                       @mimeType

value for a .jpg file is "image/jpg" and the


                                       @mimeType

value for a .png file is "image/png".

The value of


                                       @width

and


                                       @height

attributes provide the intrinsic (actual) size of the image in pixels. To find these values, find the image in your computerʼs file manager. Right click the image and select Properties in the dropdown menu. Enter the value in digits followed by "px". For example, width="300px" height="150px".

To increase accessibility, LEMDO also requires that all images have at least one of the


                                          <desc>


                                          <figDesc>

elements. The content of these elements is used to provide alt text for images. If there are both


                                          <desc>

and


                                          <figDesc>

elements, the contents of


                                          <desc>

will be used for alt text. If there is no


                                          <desc>

element, the contents of


                                          <figDesc>

will be used for alt text. Note that the contents of


                                          <desc>

will not be visible in the final output of your edition, it is only used to generate alt text. Read more about the difference between


                                          <desc>

and


                                          <figDesc>

and learn how to write alt text in Write Alternate Text for Images.

¶ Special Case: Encode Images as Thumbnails

LEMDO offers default rendering for image placement in critical paratexts. If an image is small and/or you want it to be aligned left/right with text flowing around it, you can indicate that you want the image treated as a thumbnail. If the image is full size and you want it to be centered across the full width of the text block, you can indicate that you want the image to be given the fullwidth treatment.

With thumbnails, images are floated alternately left and right automatically. You do not have control over this aspect of the rendering. This layout is consistent and visually interesting for the user. Note: do not add the


                                       @style

attribute.

Add the


                                       @type

attribute to the


                                          <figure>

element, with the following values:

Left/right float with text wrapping: "thumbnail".

Fullsize, centered, with text above and below: "fullsize". Note that this is the default rendering for images.

<figure type="thumbnail">
  <graphic url="img:Shylock_Act1_Folger.jpg" width="967px" height="1500px" mimeType="image/jpg">
    <desc>altText goes here</desc>
  </graphic>
  <figDesc>Caption goes here</figDesc>
</figure>

Note that if you omit the


                                       @type

attribute on the


                                          <figure>

element, your image will be automatically displayed fullsize and centered. If this styling is what you want, you may omit the


                                       @type

attribute and the value "fullsize".

¶ Practice: Encode Alt Text and Image Captions

To encode alt text, add a


                                          <desc>

element as a child of the


                                          <graphic>

element. Add a


                                       @resp

attribute on


                                          <desc>

with the value "pers:" followed by your xml:id. Type your alt text in the text node of


                                          <desc>

To add a caption to the image, add a


                                          <figDesc>

element as a child of


                                          <figure>

and sibling of


                                          <graphic>

. Write the image caption in the text node of the


                                          <figDesc>

element. The contents of


                                          <figDesc>

will be visible in the final output of your edition.

¶ Examples

<figure>
  <graphic url="img:H5_Killing_of_Cleitus.jpg" mimeType="image/jpg" height="599px" width="386px">
    <desc resp="pers:HOUL3">A greyscale illustration of Alexander the Great killing Cleitus in a room of cowering people. Cleitus clutches a curtain as he collapses with a spear sticking out of his chest. Alexander is in throwing stance and holding a second spear. There is a table with food in the foreground and a fallen wine cup on the floor.</desc>
  </graphic>
  <figDesc>André Castaigne’s The Killing of Cleitus (1898-99).</figDesc>
</figure>

¶ Further Reading

Write Alternate Text for Images

Number Figures

Prosopography

Janelle Jenstad

Janelle Jenstad is a Professor of English at the University of Victoria, Director of The Map of Early Modern London, and Director of Linked Early Modern Drama Online. With Jennifer Roberts-Smith and Mark Kaethler, she co-edited Shakespeare’s Language in Digital Media: Old Words, New Tools (Routledge). She has edited John Stow’s A Survey of London (1598 text) for MoEML and is currently editing The Merchant of Venice (with Stephen Wittek) and Heywood’s 2 If You Know Not Me You Know Nobody for DRE. Her articles have appeared in Digital Humanities Quarterly, Elizabethan Theatre, Early Modern Literary Studies, Shakespeare Bulletin, Renaissance and Reformation, and The Journal of Medieval and Early Modern Studies. She contributed chapters to Approaches to Teaching Othello (MLA); Teaching Early Modern Literature from the Archives (MLA); Institutional Culture in Early Modern England (Brill); Shakespeare, Language, and the Stage (Arden); Performing Maternity in Early Modern England (Ashgate); New Directions in the Geohumanities (Routledge); Early Modern Studies and the Digital Turn (Iter); Placing Names: Enriching and Integrating Gazetteers (Indiana); Making Things and Drawing Boundaries (Minnesota); Rethinking Shakespeare Source Study: Audiences, Authors, and Digital Technologies (Routledge); and Civic Performance: Pageantry and Entertainments in Early Modern London (Routledge). For more details, see janellejenstad.com.

Joey Takeda

Joey Takeda is LEMDO’s Consulting Programmer and Designer, a role he assumed in 2020 after three years as the Lead Developer on LEMDO.

Mahayla Galliford

Research assistant, remediator, encoder, 2021–present. Mahayla Galliford is a fourth-year student in the English Honours and Humanities Scholars programs at the University of Victoria. She researches early modern drama and her Jamie Cassels Undergraduate Research Award project focused on approaches to encoding early modern stage directions.

Martin Holmes

Martin Holmes has worked as a developer in the UVicʼs Humanities Computing and Media Centre for over two decades, and has been involved with dozens of Digital Humanities projects. He has served on the TEI Technical Council and as Managing Editor of the Journal of the TEI. He took over from Joey Takeda as lead developer on LEMDO in 2020. He is a collaborator on the SSHRC Partnership Grant led by Janelle Jenstad.

Navarra Houldin

Project manager 2022–present. Textual remediator 2021–present. Navarra Houldin (they/them) completed their BA in History and Spanish at the University of Victoria in 2022. During their degree, they worked as a teaching assistant with the University of Victoriaʼs Department of Hispanic and Italian Studies. Their primary research was on gender and sexuality in early modern Europe and Latin America.

Nicole Vatcher

Technical Documentation Writer, 2020–2022. Nicole Vatcher completed her BA (Hons.) in English at the University of Victoria in 2021. Her primary research focus was womenʼs writing in the modernist period.

Tracey El Hajj

Junior Programmer 2019–2020. Research Associate 2020–2021. Tracey received her PhD from the Department of English at the University of Victoria in the field of Science and Technology Studies. Her research focuses on the algorhythmics of networked communications. She was a 2019–2020 President’s Fellow in Research-Enriched Teaching at UVic, where she taught an advanced course on Artificial Intelligence and Everyday Life. Tracey was also a member of the Map of Early Modern London team, between 2018 and 2021. Between 2020 and 2021, she was a fellow in residence at the Praxis Studio for Comparative Media Studies, where she investigated the relationships between artificial intelligence, creativity, health, and justice. As of July 2021, Tracey has moved into the alt-ac world for a term position, while also teaching in the English Department at the University of Victoria.

Orgography

LEMDO Team (LEMD1)

The LEMDO Team is based at the University of Victoria and normally comprises the project director, the lead developer, project manager, junior developers(s), remediators, encoders, and remediating editors.

Metadata

Authority title	Embed and Style Images
Type of text	Documentation
Short title
Publisher	University of Victoria on the Linked Early Modern Drama Online Platform
Series	Linked Early Modern Drama Online
Source	TEI Customization created by Martin Holmes, Joey Takeda, and Janelle Jenstad; documentation written by members of the LEMDO Team
Editorial declaration	n/a
Edition	Released with Linked Early Modern Drama Online 1.0
Encoding description	Encoded in TEI P5 according to the LEMDO Customization and Encoding Guidelines
Document status	prgGenerated
Funder(s)	Social Sciences and Humanities Research Council of Canada
License/availability	This file is licensed under a CC BY-NC_ND 4.0 license, which means that it is freely downloadable without permission under the following conditions: (1) credit must be given to the author and LEMDO in any subsequent use of the files and/or data; (2) the content cannot be adapted or repurposed (except in quotations for the purposes of academic review and citation); and (3) commercial uses are not permitted without the knowledge and consent of the editor and LEMDO. This license allows for pedagogical use of the documentation in the classroom.