라이트박스 오버레이에 이미지의 alt 또는 title 속성 표시

ad-si · 10월 9, 2019, 3:17오후

라이트박스 오버레이는 원래 파일명을 표시하는 대신 이미지의 alt 태그와/또는 title 태그를 표시해야 합니다.

35Z

이미지 파일명은 유용하지 않은 경우가 많습니다. (예: shutterstock_1073920454325.jpg 등.) 또한 동일한 SHA1을 가진 이미지가 이미 데이터베이스에 존재하기 때문에 새 파일명이 허용되지 않아 나중에 파일명을 변경할 수도 없습니다.

Johani · 11월 5, 2019, 10:54오전

여기에는 다소 긴 이야기가 있습니다. 더 알고 싶으시다면 PR 설명을 읽어보실 수 있습니다.

github.com/discourse/discourse

FEATURE: fallback to image alt before filename if there's no title in lightboxes (#8286)

master ← hnb-ku:use-image-alt-in-overlay

merged 11:15PM - 03 Nov 19 UTC

hnb-ku

+65 -3

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.

그리고

github.com/discourse/discourse

FIX: improve regex used for image sizing controls (#8291)

master ← hnb-ku:fix-resizing-regex

merged 10:40AM - 05 Nov 19 UTC

hnb-ku

+55 -25

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을 이미지 오버레이에 표시하고 싶은 내용으로 자유롭게 수정할 수 있습니다.

간단한 참고 사항:

이 기능은 항상 가능했지만, 마크다운이 제목을 처리하는 방식을 알아야 했습니다.

마크다운에서 제목을 추가하는 방법은 다음과 같습니다.

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

이 사실을 아는 사람이 많지 않기 때문에, 위의 첫 번째 PR에서는 기본적으로 파일 이름을 사용하기 전에 이미지 alt 텍스트를 폴백으로 추가했습니다. 폴백이라는 것은 제목이 있으면 제목이 우선 적용되고, 제목이 없으면 alt 텍스트가 사용된다는 뜻입니다.

Johani · 11월 6, 2019, 10:00오전

이 주제는 22시간 후 자동으로 닫혔습니다. 더 이상 새 답변을 작성할 수 없습니다.

글		댓글	조회수
Image title and alt tags not displaying Product Support	9	4900	10월 9, 2019
Use the hotlinked image filename as the alt tag UX	1	86	3월 5, 2025
Automatically add a relevant alt image attribute Feature	12	1536	4월 8, 2024
Text under topic image instead of file name and size Feature	12	1508	7월 10, 2019
Long image title overflow issue in lightbox UX	1	481	6월 13, 2023

라이트박스 오버레이에 이미지의 alt 또는 title 속성 표시

Related topics