이미지에 캡션을 추가하는 Image Caption 플러그인

---

개요

Image Caption은 노트내 이미지에 캡션을 추가해주는 플러그인입니다. 

현재 옵시디언에서 작동하지 않는 플러그인입니다. Image Captions을 사용하세요

Plugin Info

플러그인 명	Image Caption
플러그인 설명	노트내 이미지에 캡션을 추가
플러그인 분류	파일 관리, 이미지 관리
Github 링크	Github 링크
옵시디언 링크	플러그인 링크
별점	👎

---

예시

---

사용 방법

내부 임베드

임베디드 이미지의 출처 뒤에 파이프(|) 기호를 사용하여, 그림의 캡션으로 텍스트를 표시합니다.

![[my_amazing_image.png|Check out this amazing picture.]]

외부 임베드

alt 텍스트를 사용하여 캡션으로 표시합니다. 이미지 크기 조정이 내부 임베드와 동일하게 작동합니다. (아래 참조)

![Another beautiful picture.](https://prettypicture.com/image01.png)

크기 조정

내부 임베디드 이미지의 크기를 조정할 때는 파이프(|) 기호 뒤에 <width>x<height>를 사용합니다. 한 쪽 차원의 크기를 설정하고 다른 쪽을 자동으로 조정하려면 <width> 또는 <height>로 auto 키워드를 사용합니다.

![[my_amazing_image.png|50x50]]
![[my_long_photo|autox200]]

캡션과 함께 내부 및 외부 임베디드 이미지의 크기를 조정할 수 있습니다. 하지만, 캡션 텍스트가 있을 경우 구분을 위한 구분자를 사용해야 합니다.

![[my_amazing_image.png|50x50]]

![[my_amazing_image.png|50x50 "Look at my caption ma!"]]

!["I can caption anything!" 100x150](https://prettypicture.com/image01.png)

![100x150](https://prettypicture.com/image01.png)

---

설정

• Label: 모든 캡션 앞에 붙는 텍스트입니다.
  자동 번호 매기기를 사용하려면 '#'을 사용하세요. '#' 문자를 출력하려면 역슬래시('\')로 이스케이프하세요, 즉 '\#'. 역슬래시도 출력하려면 이스케이프해야 합니다, 즉 '\\'.
• CSS: 이미지 캡션에 사용자 정의 CSS 스타일을 적용하세요.
  캡션은 data-image-caption-index 속성을 사용하여 그림 번호 기준으로 1부터 인덱싱됩니다.
• Delimeter: Delimeter(구분자)는 캡션으로 표시하고자 하는 텍스트를 식별하는 문자 세트입니다. Delimeter는 표시하려는 텍스트를 둘러싸야 합니다.
  • Delimeter가 설정되지 않은 경우 전체 텍스트가 사용됩니다.
  • 시작과 끝 구분자로 같은 구분자를 사용할 수 있습니다.
    • 예: " -> "내 캡션" 또는 !! -> !!내 캡션!!
  • 시작과 끝 구분자를 쉼표(,)로 구분하여 사용할 수 있습니다.
    • 예: {, } -> {내 캡션} 또는 <<, >> -> <<내 캡션>>
  • 참고: 구분자 문자 세트에서 공백은 제거됩니다.
  • 참고: 시작과 끝 구분자만 일치시키므로,구분자 문자를 캡션에 특별히 고려하지 않고 사용할 수 있습니다.
• Caption as HTML: 활성화시, 캡션이 텍스트가 아닌 문서에 HTML로 삽입됩니다.

---

관련 플러그인

이미지에 캡션을 추가하는 Image Captions 플러그인

개요 Image Captions는 노트내 이미지에 캡션을 추가해주는 플러그인입니다. Plugin Info 플러그인 명 Image Captions 플러그인 설명 노트내 이미지에 캡션을 추가 플러그인 분류 파일 관리, 이미지 관리 Git

kaminik.tistory.com

---