implement caption and meta-information for images #119

data/themes/default/hypha.css

@@ -525,6 +525,10 @@ img {
  height: auto;
 }
 
+#main figure .title + .attribution:before {
+    content: " - ";
+}
+
 #main img.left {
  float: left;
  margin: 0 13px 10px 0;

index.php

@@ -125,6 +125,7 @@
 	if ($hyphaPage) processCommandResult($hyphaPage->process($O_O->getRequest()));
 
 	registerPostProcessingFunction('dewikify');
+	registerPostProcessingFunction('add_captions_to_all_images');
 
 	// add hypha commands and navigation
 	$_cmds[] = '<a class="index" href="index/'.$hyphaLanguage.'">'.__('index').'</a>';

system/core/pages.php

@@ -601,6 +601,39 @@ function wikify_link($node) {
 			$node->text('');
 	}
 
+	function add_captions_to_all_images($element) {
+		/** @var \DOMWrap\NodeList $img */
+		// process images that reside within "main"
+		foreach ($element->findXPath('//*[@id="main"]//img[@title or @data-attribution]') as $img) {
+			// do not process images that reside within the wymeditor
+			if ($img->parents('.wymeditor')->count() === 0) {
+				add_caption_to_image($img);
+			}
+		}
+	}
+
+	function add_caption_to_image($img) {
+		$doc = $img->document();
+
+		$img->wrap('<figure>');
+		$caption = $doc->createElement('figcaption');
+		$img->after($caption);
+
+		$title = $img->getAttribute('title');
+		if ($title) {
+			$span = $doc->createElement('span', $title);
+			$span->addClass('title');
+			$caption->append($span);
+		}
+
+		$attribution = $img->getAttribute('data-attribution');
+		if ($attribution) {
+			$small = $doc->createElement('small', $attribution);
+			$small->addClass('attribution');
+			$caption->append($small);
+		}
+	}
+
 	/*
 		Function: versionSelector
 		generate html select element with available revisions for given page

system/wymeditor/lang/en.js

@@ -28,6 +28,8 @@ WYMeditor.STRINGS.en = {
     Title:            'Title',
     Relationship:     'Relationship',
     Alternative_Text: 'Alternative text',
+    Attribution:      'Attribution',
+    Attribution_placeholder: 'license: author (date)',
     Caption:          'Caption',
     Summary:          'Summary',
     Number_Of_Rows:   'Number of rows',

system/wymeditor/lang/nl.js

@@ -28,6 +28,8 @@ WYMeditor.STRINGS.nl = {
     Title:            'Titel',
     Relationship:     'Relatie',
     Alternative_Text: 'Alternatieve tekst',
+    Attribution:      'Bijdrage',
+    Attribution_placeholder: 'licentie: auteur (datum)',
     Caption:          'Bijschrift',
     Summary:          'Summary',
     Number_Of_Rows:   'Aantal rijen',
@@ -53,4 +55,4 @@ WYMeditor.STRINGS.nl = {
     File:             'File',
 
     Preset:           'Preset',
-};
+};

system/wymeditor/plugins/image_upload/jquery.wymeditor.image_upload.js

@@ -14,6 +14,10 @@
 WYMeditor.editor.prototype.image_upload = function() {
     var wym = this;
 	var uploadUrl = wym._options.dialogImageUploadUrl;
+
+	wym._options.attributionImgAttribute = 'data-attribution';
+	wym._options.attributionSelector = '.wym_attribution';
+
 	// Check the options
 	if (uploadUrl == undefined) {
 		WYMeditor.console.warn(
@@ -27,7 +31,12 @@ WYMeditor.editor.prototype.image_upload = function() {
 	var orig = d.initialize;
 	d.initialize = function(wDialog) {
 		orig.call(this, wDialog);
-		var doc = wDialog.document;
+		var wym = this,
+			doc = wDialog.document,
+			options = wym._options,
+			selectedImage = wym.getSelectedImage();
+
+		jQuery(options.attributionSelector, doc).val(jQuery(selectedImage).attr(options.attributionImgAttribute));
 
 		var oldSubmitLabel = jQuery("form#image_upload_form .submit", doc).val();
 		// WYMEditor automatically locks onto any form here, so remove the binding.
@@ -43,14 +52,39 @@ WYMeditor.editor.prototype.image_upload = function() {
 				if (response.error){
 					alert(response.error);
 				} else {
-					jQuery(".wym_src", doc).val(response.thumbUrl);
-					jQuery(".wym_alt", doc).val(response.original_filename);
+					jQuery(options.srcSelector, doc).val(response.thumbUrl);
+					jQuery(options.altSelector, doc).val(response.original_filename);
+					jQuery(options.attributionSelector, doc).val(response.attribution);
 				}
 				jQuery("form#image_upload_form .submit", doc).val(oldSubmitLabel);
 			}
 		})
 	};
 
+	d.submitHandler = function (wDialog) {
+		var wym = this,
+			options = wym._options,
+			imgAttrs,
+			selectedImage = wym.getSelectedImage();
+
+		imgAttrs = {
+			src: jQuery(options.srcSelector, wDialog.document).val(),
+			title: jQuery(options.titleSelector, wDialog.document).val(),
+			alt: jQuery(options.altSelector, wDialog.document).val(),
+		};
+		imgAttrs[options.attributionImgAttribute] = jQuery(options.attributionSelector, wDialog.document).val();
+
+		wym.focusOnDocument();
+
+		if (selectedImage) {
+			wym._updateImageAttrs(selectedImage, imgAttrs);
+			wym.registerModification();
+		} else {
+			wym.insertImage(imgAttrs);
+		}
+		wDialog.close();
+	}
+
 	// Put together the whole dialog script
 	wym._options.dialogImageHtml = String() +
         '<body class="wym_dialog wym_dialog_image">' +
@@ -93,6 +127,10 @@ WYMeditor.editor.prototype.image_upload = function() {
                         '<label>{Title}</label>' +
                         '<input type="text" class="wym_title" value="" size="40" />' +
                     '</div>' +
+                    '<div class="row">' +
+                        '<label>{Attribution}</label>' +
+                        '<input type="text" class="wym_attribution" value="" size="40" placeholder="{Attribution_placeholder}" />' +
+                    '</div>' +
                     '<div class="row row-indent">' +
                         '<input class="wym_submit" type="submit" ' + 'value="{Submit}" />' +
                         '<input class="wym_cancel" type="button" ' + 'value="{Cancel}" />' +