Adding DTD Elements

carlthewebmaster edited this page Jan 26, 2012 · 10 revisions

This page documents how to modify the Annotum code when new elements are added to the DTD.

In this example, we'll look at the modifications required to add a new element, <URI>, as a child of the <MEDIA> element.

URI was added in the DTD Version modified on 12/19/2011; a typical use case would be adding an external link to an image in a figure, so that you could click a thumbnail and see the original image.

The following changes were made to accommodate the new element:

Key programmatic changes to support the new DTD Element

Most of these changes were in annotum-base/functions/tinymce.php

  1. Add the element to the $allowedposttags global variable: 'uri' => array('xlink:href' => array(),),
  2. Add the element to $extended_valid_elements: 'uri[xlink::href]',
  3. Add the element to $custom_elements: 'uri',
  4. Add the element to $valid_children: 'media[uri|alt-text|long-desc|permissions|div|span|br]',
  5. Add the element to function anno_get_dtd_valid_elements(): <uri> as a child of <media> (twice in this case, since <media> is a child of both <p> and <fig>)
  6. Add a way to get the XML stored in post_content_filtered into post_content, that is, into the HTML displayed on the frontend. In this case, we add some lines to the anno_xml_to_html_replace_fitures function:
$uri = pq($media->children('uri'));
$uri_href = $uri->attr('xlink:href');
[...snip...]
// add start and end a tags if we have a uri to which to link the image
if (!empty($uri_href)) {
	$linked_img_tag_start = '<a href="'.$uri_href.'">';
	$linked_img_tag_end = '</a>';
}
else {
	$linked_img_tag_start = '';
	$linked_img_tag_end = '';
}
[...snip...]
$html = '
	<figure class="figure hmedia clearfix">
		'.$linked_img_tag_start.$img_tag.$linked_img_tag_end.'
		'.$figcaption.'
	</figure>';

Other Changes

These changes involved capturing the desired uri href value in the insert image popup dialog, and returning the appropriate XML. For the most part, the other changes can be seen in this Compare view:

https://github.com/Annotum/Annotum/compare/1051be56abd1e4fa1bf43400e50bbdc95f1e067c...25ac7c44e715aff326bf04b3cc6a0ce007de50b2

In particular look at changes to:

  • annotum-base/functions/tinymce-upload/image-popup.php
    • Add a field to store the uri, with a default value of the file url - that is, the url of the uploaded file itself rather than some resized version.
    • Add buttons to allow clearing the field or resetting it to the file url.
  • annotum-base/js/tinymce/plugins/annoimages/popup.js
    • Capture the value of the img-url-x form field value
    • If there's a value, store it in a variable and then emit it as part of the XML
  • and one very small change to annotum-base/css/tinymce.css to hide the link in the editor (TinyMCE) view.