# Lightbox オーバーレイに画像の alt または title 属性を表示する

**URL:** <https://meta.discourse.org/t/display-an-images-alt-or-title-attribute-in-ligthbox-overlay/130579>\
**Category:** Feature\
**Created:** [2019 年 10 月 9 日午後 3:17 UTC](https://meta.discourse.org/t/display-an-images-alt-or-title-attribute-in-ligthbox-overlay/130579 "2019-10-09T15:17:09Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ad-si](https://avatars.discourse-cdn.com/v4/letter/a/e68b1a/32.png) [@ad-si](https://meta.discourse.org/u/ad-si)\
**Post date:** [2019 年 10 月 9 日午後 3:17 UTC](https://meta.discourse.org/t/display-an-images-alt-or-title-attribute-in-ligthbox-overlay/130579/1 "2019-10-09T15:17:09Z")

</div>

元のファイル名の代わりに、ライブラックスオーバーレイには画像のaltタグおよび/またはtitleタグを表示するようにしてください。

![35Z](https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/optimized/3X/0/c/0c6a2a4ef6ef327c234c3efee15c5fae6862bcb0_2_690x64.png)

ファイル名は、しばしば全く役に立たないことがあります（例：`shutterstock_1073920454325.jpg` など）。さらに、データベースに同じSHA1を持つ画像が既に存在するため、新しいファイル名は受け入れられず、ファイル名を後から変更することもできません。

---

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [2019 年 11 月 5 日午前 10:54 UTC](https://meta.discourse.org/t/display-an-images-alt-or-title-attribute-in-ligthbox-overlay/130579/2 "2019-11-05T10:54:04Z")

</div>

実は少し長い話があります。詳しく知りたい場合は、PR の説明をお読みください。以下の通りです。

> <https://github.com/discourse/discourse/pull/8286>
>
> some history / context: 
> 
> https://meta.discourse.org/t/display-an-images-alt-o…r-title-attribute-in-ligthbox-overlay/130579
> https://meta.discourse.org/t/image-title-and-alt-tags-not-displaying/38918/5
> 
> This PR is also a prerequisite to some work being done here
> 
> https://meta.discourse.org/t/make-it-more-obvious-an-image-is-resizable-when-uploading-an-image/132030
> 
> \<hr\>
> 
> Right now, when you add an image and it's big enough to be lightboxed you get an overlay that looks like so
> 
> !\[image\](https://user-images.githubusercontent.com/33972521/68066890-2334a180-fd7a-11e9-98d5-7d7ed09b50dc.png)
> 
> This overlay contains some useful information but notice that it also contains the filename. Why does this happen? it happens because we check if the image has a title and use that, but otherwise we fallback to the filename. 
> 
> https://github.com/hnb-ku/discourse/blob/master/lib/cooked\_post\_processor.rb#L427-L429
> 
> The issue here is that most image will not have a title because markdown does not add one unless you use a very particular syntax. 
> 
> the default syntax we use when a user uploads / copy-pastes an image looks like this
> 
> \`\`\`
> !\[pluginPage01|368x413\](upload://zX6AuAdsNWYzcfIT08zVQPgaJbD.png) 
> \`\`\`
> 
> and will result in this markup after it's processed by markdown
> 
> \`\`\`
> \<img src="/uploads/default/original/1X/fbfa85f19aae34a5f2d7fd9586d843daac895655.png" alt="pluginPage01" width="368" height="413"\>
> \`\`\`
> 
> So, there's no title and we therefore fallback to the filename in the overlay. 
> 
> Markdown supports adding a title but the syntax is different and looks like so 
> 
> \`\`\`
> !\[pluginPage01|368x413\](upload://zX6AuAdsNWYzcfIT08zVQPgaJbD.png "image title") 
> \`\`\`
> 
> that would then generate 
> 
> \`\`\`
> \<img src="/uploads/default/original/1X/fbfa85f19aae34a5f2d7fd9586d843daac895655.png" alt="pluginPage01" title="image title" width="368" height="413"\>
> \`\`\`
> 
> which would then be used in the overlay because the image has a title. 
> 
> What this PR does is add the image alt as a fallback before falling back to the file name. 
> 
> That means that we go
> 
> title \> alt \> filename
> 
> This allows us to leverage on the alt that markdown generates and allows users to control the text or image description used in the overlay. 
> 
> For example, let's say you have an image with the name \`photo01.jpg\` and you upload that image. you get this in the editor
> 
> \`\`\`
> !\[photo01|368x413\](upload://zX6AuAdsNWYzcfIT08zVQPgaJbD.png) 
> \`\`\`
> 
> Prior to this PR, even if you edit \`photo01\` to \`cute cats playing with water\` the overlay for the lightbox in the cooked post will still display as \`photo01\` 
> 
> This PR makes it possible to change the overlay text in the editor by changing \`photo01\` to the desired text to be displayed in the lightbox overlay.
> 
> If an image has both a title and an alt, then the title is used and the alt is ignored, which ensures backwards compatibility for cases when a markdown title was added. 
> 
> This will only affect new posts and old posts would need to be rebaked.

および

> <https://github.com/discourse/discourse/pull/8291>
>
> This is related to some work being done to improve image resizing controls in th…e composer here
> 
> https://meta.discourse.org/t/make-it-more-obvious-an-image-is-resizable-when-uploading-an-image/132030
> 
> and also relates to the work that was done here https://github.com/discourse/discourse/pull/8286
> 
> \<hr\>
> 
> We currently use this regex
> 
> \`\`\`
> /(!\\\[(?:\\S\*?(?=\\|)\\|)\*?(?:\\d{1,6}x\\d{1,6})+?)(?:,?(\\d{1,3})?%?)?(\\\]\\(upload:\\/\\/\\S\*?\\))/g
> \`\`\`
> 
> to match composer images that can be resized. This works well, but fails if there's some whitespace in the image alt or if the image has a title, Some examples
> 
> \`\`\`diff
> Default:
> 
> + !\[image|690x220\](upload://1TjaobgKObzpU7xRMw2HuUc87vO.png)
> 
> image with a scale %:
> 
> + !\[image|690x220,50%\](upload://1TjaobgKObzpU7xRMw2HuUc87vO.png)
> 
> image with a scale % and a whitespace:
> 
> \- !\[image|690x220, 50%\](upload://1TjaobgKObzpU7xRMw2HuUc87vO.png)
> 
> Image with space in alt 
> 
> \- !\[image alt|690x220\](upload://1TjaobgKObzpU7xRMw2HuUc87vO.png)
> 
> Image with a title 
> 
> \- !\[image|690x220\](upload://1TjaobgKObzpU7xRMw2HuUc87vO.png "image title")
> 
> Image with alt title and a scale %
> 
> \- !\[image|690x220, 50%\](upload://1TjaobgKObzpU7xRMw2HuUc87vO.png "image title")
> \`\`\`
> 
> Matches are highlighted above in green, a red highlight means the string should match but it currently doesn't.
> 
> This PR changes the regex to this
> 
> \`\`\`
> /!\\\[(.\*?)\\|(\\d{1,4}x\\d{1,4})(,\\s\*\\d{1,3}%)?\\\]\\((upload:\\/\\/.\*?)\\)/g
> \`\`\`
> 
> If we use the same examples above with this regex, they all match
> 
> \`\`\`diff
> Default:
> 
> + !\[image|690x220\](upload://1TjaobgKObzpU7xRMw2HuUc87vO.png)
> 
> image with a scale %:
> 
> + !\[image|690x220,50%\](upload://1TjaobgKObzpU7xRMw2HuUc87vO.png)
> 
> image with a scale % and a whitespace:
> 
> + !\[image|690x220, 50%\](upload://1TjaobgKObzpU7xRMw2HuUc87vO.png)
> 
> Image with space in alt 
> 
> + !\[image alt|690x220\](upload://1TjaobgKObzpU7xRMw2HuUc87vO.png)
> 
> Image with a title 
> 
> + !\[image|690x220\](upload://1TjaobgKObzpU7xRMw2HuUc87vO.png "image title")
> 
> Image with alt title and a scale %
> 
> + !\[image|690x220, 50%\](upload://1TjaobgKObzpU7xRMw2HuUc87vO.png "image title")
> \`\`\`

最新バージョンをお使いであれば、エディタ内のオーバーレイに表示されるテキストを自由に変更できるようになっています。

画像をアップロードすると、以下のような形式になります。

`![fileName|690x380](upload://zX6AuAdsNWYzcfIT08zVQPgaJbD.png)`

`fileName` を、オーバーレイに表示させたい任意のテキストに変更できます。

なお、補足ですが：

これは以前から可能でしたが、Markdown でタイトルをどのように扱うかを知る必要がありました。

Markdown でタイトルを追加する書き方は以下の通りです。

`![image alt|690x380](upload://zX6AuAdsNWYzcfIT08zVQPgaJbD.png "image title")`

この仕組みを知らない方が多いため、上記の最初の PR では、デフォルトでファイル名を使用する前に画像の alt テキストをフォールバックとして追加しています。フォールバックであるため、タイトルが存在すればそれを優先し、存在しない場合は alt テキストを使用します。

---

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [2019 年 11 月 6 日午前 10:00 UTC](https://meta.discourse.org/t/display-an-images-alt-or-title-attribute-in-ligthbox-overlay/130579/3 "2019-11-06T10:00:02Z")

</div>

このトピックは 22 時間後に自動的に閉鎖されました。新しい返信は受け付けていません。