여러분 안녕하세요
테마 컴포넌트를 사용하지 않고 JPG 이미지에 얇은 테두리를 추가할 수 있을까요? 이 문제를 간단하게 해결하고 싶어서, 예를 들어 이 컴포넌트처럼 복잡한 방법을 피하고 싶습니다:
생각할 수 있는 img 태그의 모든 변형을 시도해 봤습니다. 유일하게 작동했던 방법은 이미지를 kbd 태그에 넣는 것이었지만, 이건 좀 이상하네요. 사실 제가 원하는 건 다음과 같은 코드를 작성하는 것입니다:
<img src="upload://jIMXtLgb7enbLUiahXVT1Jz14n4.jpeg"
alt="photo showing derelict medium voltage power pole"
width="75%"
style="border: 1px solid gray">
그리고 표준 업로드를 통한 샘플 이미지는 다음과 같습니다:
AI 이미지 캡셔닝 기능이 꽤 잘 작동하는 것 같네요. 감사합니다!
누군가가 border: 1000px solid gray와 같은 코드를 사용하여 전체 토론을 읽을 수 없게 만들 수 있기 때문에, 게시물에서 사용자 정의 CSS는 제거됩니다.
이 작업을 수행하려면 테마나 테마 컴포넌트에 일부 CSS를 추가해야 하며, 이를 피할 좋은 방법은 없습니다. 다만 이미지별로 선택적으로 적용할 수는 있습니다.
예를 들어, 테마에 다음 CSS를 추가할 수 있습니다:
div[data-theme-image-border] img {
border: 1px solid gray;
}
그리고 게시물에서 다음과 같이 사용할 수 있습니다:
<div data-theme-image-border>
<img src="yoururlhere"/>
</div>
감사합니다. 추가 질문이 있습니다.
@merefield: 다음처럼 추가하면 예제가 작동했습니다:
☰ ▸ 관리자 ▸ 사용자 지정 ▸ 테마 = 기본 ▸ CSS/HTML 편집 ▸ 데스크톱 ▸ CSS
@awesomerobot: 몇 가지 변형을 시도해 보았지만 코드를 작동시킬 수 없었습니다.
첫 번째 예제는 사이트 전체에 적용되고, 두 번째 예제는 이미지별로(혹은 그래야 합니다) 적용되는 것입니다.
추가 제안이 있으면 환영합니다. 사이트 전체 적용 방식도 허용되지만, 이미지별 적용 방식이 더 바람직할 것입니다.
P.S.: AI 캡셔닝은 반복될수록 품질이 떨어지고 있습니다 
이 Customization > Theme component 에 관심이 있으실 수 있습니다
@Heliosurge 감사합니다. 제 첫 게시물(OP)에서 해당 구성 요소를 언급했었습니다. 하지만 오늘 저도 한번 시도해볼게요.
실수했습니다. 주제를 대충 읽다가 그 부분을 놓쳤네요. 하지만 다른 분들이 말씀하신 대로 커스텀 컴포넌트를 만들어야 합니다. 기존 컴포넌트를 사용하는 장점은 이미 유지보수되고 있을 가능성이 있다는 점입니다.
다만, TC(테마 컴포넌트)는 코드의 일부를 연구하거나 자신의 커스텀 작업에 활용하는 데에도 유용합니다.
저는 이 작업을 위해 “Generic BBCode wrapper” 시스템을 사용합니다:
테두리를 추가하고 싶은 이미지 주위에 [wrap=border]...[/wrap]를 감싸고, 아래 CSS를 함께 사용합니다:
.d-wrap[data-wrap="border"] {
> img, > p > img, .lightbox, .image-wrapper img {
border: 1px solid #555;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
}
}
@simonk 감사합니다, 저한테는 문제없고 이미지별로 적용되는 것도 좋습니다.