juncture-digital / juncture

Juncture web application
MIT License
0 stars 0 forks source link

Internal GitHub images won't render with .ve-media #19

Closed Lore3581 closed 1 year ago

Lore3581 commented 1 year ago

I can't get an image uploaded using the Juncture Media Tool to render correctly using the .ve-media tag.

For example, trying to render the internal image: https://da4asandbox.github.io/cameronessay-organization/media/Activity2-1Overview.svg , I attempted all of the following and could not get the image to properly render:

.ve-media https://da4asandbox.github.io/cameronessay-organization/media/Activity2-1Overview.svg left static caption="Figure 0 from Interdisciplinary in Data Science Pedagogy"

.ve-media "https://da4asandbox.github.io/cameronessay-organization/media/Activity2-1Overview.svg" left static caption="Figure 0 from Interdisciplinary in Data Science Pedagogy"

.ve-media src=https://da4asandbox.github.io/cameronessay-organization/media/Activity2-1Overview.svg left static caption="Figure 0 from Interdisciplinary in Data Science Pedagogy"

.ve-media src="https://da4asandbox.github.io/cameronessay-organization/media/Activity2-1Overview.svg" left static caption="Figure 0 from Interdisciplinary in Data Science Pedagogy"

.ve-media gh:da4asandbox/cameronessay-organization/media/Activity2-1Overview.svg left static caption="Figure 1 from Interdisciplinary in Data Science Pedagogy"

.ve-media gh:/cameronessay-organization/media/Activity2-1Overview.svg left static caption="Figure 2 from Interdisciplinary in Data Science Pedagogy"

.ve-media gh:cameronessay-organization/media/Activity2-1Overview.svg left static caption="Figure 2 from Interdisciplinary in Data Science Pedagogy"

.ve-media gh:/media/Activity2-1Overview.svg left static caption="Figure 4 from Interdisciplinary in Data Science Pedagogy"

.ve-media gh:media/Activity2-1Overview.svg left static caption="Figure 5 from Interdisciplinary in Data Science Pedagogy"

.ve-media gh:/Activity2-1Overview.svg left static caption="Figure 6 from Interdisciplinary in Data Science Pedagogy"

.ve-media gh:Activity2-1Overview.svg left static caption="Figure 7 from Interdisciplinary in Data Science Pedagogy"

.ve-media https://da4asandbox.github.io/cameronessay-organization/media/Activity2-1Overview.svg

Is this a syntax error on my behalf, or is there a reason these are not rendering correctly?

rsnyder commented 1 year ago

There are a couple of things going on here.

First, the .ve-media viewer requires an IIIF manifest as the first argument. While Juncture can automatically generate IIIF manifests for Github-hosted content the URL syntax would be different than simply using a URL that points to the image (or in this case SVG) file directly. For the first file in your snippet a manifest URL would need to look like one of the following:

These are equivalent. The second is a shorthand version of the first.

The other issue is that IIIF does not support SVGs. To use that image as an IIIF image you would need to first convert it to a jpeg or png. A future version of the Juncture IIIF server could potentially do this SVG-to-JPEG/PNG conversion automatically, but for now that would need to be done outside of Juncture. In looking at your repository I see that you already jpg versions of these SVGs so the resolution is pretty easy. Just convert the manifest URLs in each of your .ve-media tags to look like one of these: