long image descriptions

[Alex-Jordan]

This lets you pass to an image call a longer description of an image (longer than typical alt text). Typically this would only contain paragraphs and perhaps a table, and it would describe the image content in depth.

For HTML, this makes a details/summary element.

For PTX, this puts the longer description into a description child of the image. It also fixes an issue where the alt text was being put into a description element, but should go into a shortdescription element.

Here is a problem file to load and play with. The same image is inserted multiple times in different ways.

DOCUMENT();

loadMacros(
    "PGstandard.pl",    # Standard macros for PG language
    "PGML.pl",          # PGML markup and Math Objects
    "PGcourse.pl",      # Customization file for the course
);

$description = <<'END_DESC';
This image shows the WeBWorK spiderweb logo.

Here is some data that has nothing to do with the image, but pretend that it did. And some math: [`~~pi`].

[#
    [.1.] [.2.] [.3.]*
    [.4.] [.5.] [.6.]
#]
END_DESC

BEGIN_TEXT

\{image(['webwork_logo.png','webwork_logo.png'], long_description => [PGML::Format($description), 'Hello!'])\}

END_TEXT


BEGIN_PGML
----
Enter a value for [`\pi`].

[!alt text!]{'webwork_logo.png'}{long_description => PGML::Format($description)}

[!alt text!]{'webwork_logo.png'}{long_description => "This image shows the WeBWorK spiderweb logo.${PAR}Here is some data that has nothing to do with the image, but pretend that it did. And some math: ${BM}\\pi${EM}.${PAR}" . DataTable([[1..3],[4..6]])}


[#
    [.Now a table with an image in a cell..]
    [.[!alt text!]{'webwork_logo.png'}{long_description => PGML::Format($description)}.]
#]

[#
    [.Now a table with an image in a cell..]
    [.[!alt text!]{'webwork_logo.png'}{long_description => PGML::Format($description)}.]
#]*

END_PGML

ENDDOCUMENT();

[Alex-Jordan]

OK, I think this can be looked at. We sorted out known issues. Possible things to change are cosmetic, or something overlooked with accessibility.

[pstaabp]

If the long_description isn't placed as an option, there are unexpected results.

[!alt text!]{'webwork_logo.png'}{500}

still shows the "image description", but with HASH(0x120ba8ad8) as the description.

If the size is dropped. the image doesn't show anymore.

[somiaj]

This should be:

	my $long_description = $item->{long_description} || '';

[Alex-Jordan]

Thanks @pstaabp , @somiaj . I made the change that Jaimos found.

[drgrice1]

Something needs to be done about inline images still. I suggest adding

	.image-container {
		display: inline-block;
	}

to htdocs/js/Problem/problem.scss.

Here is a minimal example of a problem that renders differently with the current PG-2.20 branch (or before) and this pull request:

DOCUMENT();
loadMacros('PGstandard.pl', 'PGML.pl');
BEGIN_PGML
[!webwork logo!]{'webwork_logo.png'}{320}
[!default icon!]{'defaulticon.png'}{100}
END_PGML
ENDDOCUMENT();

[drgrice1]

Also, I noticed that you didn't add the description for the answer graphs for the graphtool. Are you going to add that, or leave that for another pull request?

[Alex-Jordan]

Now this reveals the details in a fixed position, centered at the bottom of the page. There is a button that can be used to dismiss the details (in addition to the summary button). When you open a second details, it dismisses the first one, so you can't have two open at the same time.

I set it up to pass the details element to graphTool as longDescription, but I did not work on how to actually make use of it over there. @drgrice1, is that something you would want to look into? I looked in parserGraphTool.pl but I'm not sure how to make use of this in the right way. You need to get a unique id for the current instance of printing a solution graph, and replace 'LONG-DESCRIPTION-ID' with that ID, and then put an aria-details attribute on the graph's svg element.

[Alex-Jordan]

The z-index on the details content is now 10. And the POD for using image() has been updated.

[somiaj]

Looks good to me, though I think @drgrice1 might still need to add this to the GraphTool answer graphs if used.