Auto set captions based on img alt attribute

[JamesWClark]

On reflecting, I think I'd like to make the caption an overlay of the original picture and have the alt attribute populate the caption text with javascript. There will be an optional data-caption=false flag we can set to turn off captions if desired. If an alt tag is not used or has an empty string, no caption overlay will display.

Example: https://davemcmillan.net/examples/jquery-display-alt-tag-as-caption-overlay/

[gowsley]

Ok cool...so how do I code in the caption then? What do I add below?

On Sun, Mar 12, 2017 at 8:07 PM, J.W. Clark notifications@github.com wrote:

On reflecting, I think I'd like to make the caption an overlay of the original picture and have the alt attribute populate the caption text with javascript. There will be an optional data-caption=false flag we can set to turn off captions if desired. If an alt tag is not used or has an empty string, no caption overlay will display.

Example: https://davemcmillan.net/examples/jquery-display-alt- tag-as-caption-overlay/

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/RockhurstHS/STEAM-Blog/issues/18, or mute the thread https://github.com/notifications/unsubscribe-auth/ANKTMJ6F4BAKkAeKZbO0fWnzHKi7F_dRks5rlJbOgaJpZM4Mav8M .

-- Mr. Greg Owsley STEAM Director (Science, Technology, Engineering, Arts, and Mathematics) Rockhurst High School steam.rockhursths.edu

[gowsley]

hmmm...I'm still not getting it.

Ms. Chiao's Mandarin Chinese 2 class uses the speaker space every 5th period on a 'D' day.

becomes...

or something like that?

On Sun, Mar 12, 2017 at 10:53 PM, J.W. Clark notifications@github.com wrote:

Put the caption in the alt attribute. In your code I added a caption "Some kind of a schedule..." [image: Some kind of a schedule...]

Suppose you want to turn off a caption for an image, then you can do one of two things:

1.

Don't include the alt attribute. 2.

Include the alt attribute (because that's best practice for handicap accessibility), and choose not to display it by adding a data-caption="false" attribute, ex:

[image: Some kind of a schedule...]

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/RockhurstHS/STEAM-Blog/issues/18#issuecomment-286010089, or mute the thread https://github.com/notifications/unsubscribe-auth/ANKTMOZI4mc4w83sTd5IpPQFuWCkpaUqks5rlL3BgaJpZM4Mav8M .

-- Mr. Greg Owsley STEAM Director (Science, Technology, Engineering, Arts, and Mathematics) Rockhurst High School steam.rockhursths.edu

[JamesWClark]

<div class="flex-wrapper">
  <img src="{{ site.baseurl }}/img/SpeakerSpaceSchedule.png">
</div>
<b>Ms. Chiao's Mandarin Chinese 2 class uses the speaker space every 5th
period on a 'D' day.</b>

becomes...

<div class="flex-wrapper">
  <img src="{{ site.baseurl }}/img/SpeakerSpaceSchedule.png" alt="Ms. Chiao's Mandarin Chinese 2 class uses the speaker space every 5th period on a 'D' day.">
</div>

[JamesWClark]

... and it's Ms. Shao ...

[gowsley]

Sweet, it works (and thanks for catching the misspelling of her name).

However, we can only see the caption when we click on the image - is that what you want?

http://steam.rockhursths.edu/2017/03/09/Speaker-Space.html

On Sun, Mar 12, 2017 at 10:59 PM, J.W. Clark notifications@github.com wrote:

... and it's Ms. Shao ...

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/RockhurstHS/STEAM-Blog/issues/18#issuecomment-286010643, or mute the thread https://github.com/notifications/unsubscribe-auth/ANKTMI606UdNv4_4CvSs0Z07DUlg93Ykks5rlL8sgaJpZM4Mav8M .

-- Mr. Greg Owsley STEAM Director (Science, Technology, Engineering, Arts, and Mathematics) Rockhurst High School steam.rockhursths.edu

[JamesWClark]

No - I haven't finished building this yet. I just now starting to work on it however. I'll close this issue when I get it on the live site. Shouldn't be long...

[JamesWClark]

I keep going back and forth on this one. I can't come up with a one-size-fits-all solution to this problem, so I'm going to throw this out there as the best (most semantic) practice:

<div class="flex-wrapper">
  <img src="{{ site.baseurl }}/img/SpeakerSpaceSchedule.png">
</div>
<b>Ms. Chiao's Mandarin Chinese 2 class uses the speaker space every 5th
period on a 'D' day.</b>

becomes...

  <figure>
    <img src="{{ site.baseurl }}/img/SpeakerSpaceSchedule.png">
    <figcaption>Ms. Chiao's Mandarin Chinese 2 class uses the speaker space every 5th period on a 'D' day.</figcaption>
  </figure>

Then, you can have as many figures as you want in one flex-wrapper such as:

<div class="flex-wrapper">
  <figure>
    <img src="{{ site.baseurl }}/img/SpeakerSpaceSchedule.png">
    <figcaption>Ms. Chiao's Mandarin Chinese 2 class uses the speaker space every 5th period on a 'D' day.</figcaption>
  </figure>
  <figure>
    <img src="{{ site.baseurl }}/img/SpeakerSpaceSchedule.png">
    <figcaption>Ms. Chiao's Mandarin Chinese 2 class uses the speaker space every 5th period on a 'D' day.</figcaption>
  </figure>
</div>

[JamesWClark]

If coded as above, the caption will gain a black background and white foreground. I'm inclined to italics instead of inverted colors. I think the inverted color is too harsh.