Tag: pb-component

TEI Publisher 6

Today the new TEI Publisher 6.0.0 is finally out. This is a major release introducing the refactored and extended component library as well as numerous bugfixes and new features.

All Publisher’s web components are now available as a LitElement library distributed via npm. While invisible to users, this redesign greatly improves modularity and simplifies updates of Publisher-based applications. It also facilitates embedding of Publisher custom components into CMS systems (e.g. Hugo or WordPress) and other application frameworks (like angular, vue or react).

This version also brings extended internationalization and full localization into 19 languages, simplified styling, support for data organization based on subcollections, several new and enhanced components (including one for notated music encoded in MEI), improved ODD editor and major extension and revision of the documentation.

mei
Demo page of the pb-mei component

More information about this release can be found on the TEI Publisher blog.

A 3-part online course on TEI Publisher 6 has been led by Wolfgang Meier in June 2020. Video recordings of all the sessions, and a walk-through for the assignments are available for self-study.

Our special thanks for supporting this release go to:

  • Numerous community members who helped to translate and proofread language files via Crowdin
  • Swiss Nationale Infrastruktur für Editionen – Infrastructure nationale pour les éditions for funding a large part of work on the web component refactoring.
  • ACE – Austrian Corpora and Editions of the Österreichische Akademie der Wissenschaften for a small grant to enhance toggling mechanisms

Embeding TEI Publisher Components in WordPress

This is a short rewrite of Wolfgang’s post on Embedding TEI Publisher Components in Hugo . For WordPress you can do the same thing very easily. I used the example of Wolfgang’s post; just make sure that your site is whitelisted.

Just install the Code Embed Plugin and create a custom field 1 with the name "CODEpbembed" and the value: 

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.4.3/webcomponents-loader.js"></script><script type="module" src="https://unpkg.com/@teipublisher/pb-components@latest/dist/pb-components-bundle.js"></script>

Then add another custom field with the name "CODEpbkant" and the value:

<pb-page endpoint="https://teipublisher.com/exist/apps/tei-publisher" emit="kant" class="embedded"><pb-document id="kant" path="test/kant_rvernunft_1781.TEI-P5.xml" odd="dta"></pb-document><pb-navigation direction="forward" keyboard="right" emit="kant" subscribe="kant"><paper-fab icon="icons:chevron-right"></paper-fab></pb-navigation><pb-navigation direction="backward" keyboard="left" emit="kant" subscribe="kant"><paper-fab icon="icons:chevron-left"></paper-fab></pb-navigation><pb-view src="kant" xpath="//teiHeader/fileDesc/titleStmt/title" emit="kant" subscribe="kant"><pb-param name="header" value="short"></pb-param></pb-view><pb-view class="transcription" src="kant" view="page" emit="kant" subscribe="kant" append-footnotes="" animation=""></pb-view></pb-page>

We add a third custom field with some CSS:

pb-page {
    position: relative;
    padding-top: 10px;
    border-top: 1px solid #e0e0e0;
}

.embedded pb-navigation {
    position: absolute;
    top: 45%;
}

.embedded pb-navigation[direction="forward"] {
    right: 0;
}

.nav {
    height: 40px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}
pb-view {
    margin-left: auto;
    margin-right: auto;
}
.transcription {
    overflow: auto;
    display: flex;
    justify-content: center;
    height: 400px;
}
pb-navigation[direction="forward"] {
    float: right;
}

Use the Custom Field like this (without the whitespace between the brackets):

{ {CODECss}}
{ {CODEpbembed}}
{ {CODEpbkant}}



For the facsimilie we use the pb-facsimile Component to integrate a IIIF viewer:

<pb-facsimile base-uri="https://apps.existsolutions.com/cantaloupe/iiif/2/" facsimiles="["15929_000_IDL5772_BOss12034_IIIp79.jpg", "15929_000_IDL5772_BOss12034_IIIp80.jpg", "15929_000_IDL5772_BOss12034_IIIp81.jpg", "15929_000_IDL5772_BOss12034_IIIp82.jpg"]" default-zoom-level="0" show-navigator="show-navigator" show-navigation-control="show-navigation-control"></pb-facsimile>

  1. Custom fields are hidden by default on most WordPress sites. To make them visible, select the Screen Options tab at the top of any WordPress editor page, and choose Custom Fields ↩

Leave a comment on Embeding TEI Publisher Components in WordPress