Create "image library"

[ann0see]

Currently there are not many screenshots in the documentation.

I suggest to e.g. add screenshots on the ASIO4All setup.

Nevertheless, there are many more places where we can add some (Installation for Windows/macOS)

[gilgongo]

BTW can we use tables or other markup in the md files to help with sizing and laying out text around images? One of problems we've got (particularly in the Software Manual) is that text and images are just stacked.

Also, I wonder if it might be useful to have some include files that contain common images (like the mixer panel, settings or fader UI) so that we can maintain these in one place? Not sure if that's possible.

[ann0see]

BTW can we use tables or other markup in the md files to help with sizing and laying out text around images?

I wouldn't use tables since they aren't really responsive. We can use html and the fx-col or fx-row classes for HTML code.

Also, I wonder if it might be useful to have some include files that contain common images

Why don't use the same link to the picture?

In my opinion we should structure the wiki in a way where similar things aren't spread across multiple pages.

[gilgongo]

we should structure the wiki in a way where similar things aren't spread across multiple pages

The nature of screenshots is that they get used in different places because they're used in different contexts to illustrate different points.

Why don't use the same link to the picture?

Two reasons:

1. If we use the same link to the pictures, then we have to first find a page in which that link is used (and for all we know it might not be in use) then copy/paste the URL. If we had a "library" of includes that we could browse that ("Do we have a screenshot of the help menu?") and add the one we want in to the page (this is how CMSs work, basically, and we'd be able to maintain consistent alt text, etc.).
2. When/if we need to update the image, the URL will change (we're using GH images). Without a "library" system, we'd need to track it down in every page and manually replace the URL. This is mainly why there were so few images on the Github wiki.

[ann0see]

Ok. These are valid points. I hope it works with translations (probably we would have to use a solution like the footer in the wiki).

[gilgongo]

How about I start creating a library of screenshots that we can use as includes?

According to this, I could put them into a subfolder of _includes called maybe "screenshots" and then create plain text files that contain links to the relevant images? We then include them into pages like this:

{% include_relative screenshots/someJamulusScreen.html %}

We're using user-images.githubusercontent.com for the actual image links, and I assume we can add relevant alt text and things? I guess the only thing we'd not be able to do is control the sizes of the images on a per-page basis - or could we?

[gilgongo]

OK I've had a look at creating a screenshot "library" and it seems to be working locally for me:

1. I've created a sub-directory /jamuluswebsite/assets/img/screenshots which contains the screenshot .png images.
2. And a new files in _includes/screenshot.html

<screenshot>
   <img src="/assets/img/screenshots/{{ include.file }}" style="max-width: {{ include.max-width }};" alt="{{ include.alt }}"/>
   <figcaption>{{ include.caption }}</figcaption>
</screenshot>

So you can use a screenshot

{% include screenshot.html file="test.png" max-width="100%" alt="This is some alt text" caption="This is a caption" %}

Which jekyll then generates in the HTML as:

<screenshot>
   <img src="/assets/img/screenshots/test.png" style="max-width: 100%;" alt="This is some alt text">
   <figcaption>This is a caption</figcaption>
</screenshot>

And if you don't want a caption it looks like you can just leave them out.

If this looks good, I can try collecting up a bunch of screenshots and incorporate them into the website.

We could even do them in other languages. So I should name it /jamuluswebsite/assets/img/en-screenshots perhaps.

[ann0see]

This sounds great! I don't know the \<screenshot> tag. Are you sure it exists?

the loading="lazy" argument would be great on img tags.

[gilgongo]

I don't know the html tag

Sorry, what do you mean?

[ann0see]

Argh. It seemed to remove the tag: I don't know the \<screenshot> html tag. Are you sure it exists? I couldn't find any documentation about it. Wouldn't a picture element be better?

[gegeweb]

Argh. It seemed to remove the tag: I don't know the html tag. Are you sure it exists? I couldn't find any documentation about it. Wouldn't a picture element be better?

It is not a valid HTML tag. <figure>…</figure> should be used instead.

[gilgongo]

Ah, sorry I'll replace that with \

[ann0see]

@gilgongo Same problem as with me: the \<figure> tag doesn't show up in your comment. You'll need to escape it with a back slash

[gilgongo]

OK so I pushed images and the include file to changes. Have a look at the include and if that looks good I'll start swapping out the images on the site using that.

EDIT: BTW it would be nice to have a caption text style (captions are optional though), but I don't understand how we're doing the CSS.

ANOTHEREDIT: Forgot to name it en-screenshots... will do that.

[ann0see]

Can we close this?

[gilgongo]

There's a big bunch of changes that I will need to make to implement it all which I've been waiting to do once this release is over (thinking also I might do some of it with Jekyll variables as well and just have screenshots as includes maybe).

But OK I'll raise a PR for all that now that the main issue is at least clear.

[ann0see]

Ok. Great!