게시물에 올리지 않고 대표 이미지 설정하기

제품 지원
21

보통 이름은 alt 속성에 추가됩니다. 파일을 업로드하면 마크다운에서 이름은 일반적으로 크기를 앞에 붙여서 표시되며, 이 부분이 "alt"에 사용됩니다.

따라서 hide-this-image-vacations-2025.jpg는 ![hide-this-image-vacations-2025|500x500](upload://wDxG1UR10Uj4bCO9l3pUbJvBAW5.png)가 됩니다.

그리고 다음과 같이 숨길 수 있습니다.

.cooked img[alt="hide-this-image-vacations-2025"] {
  display: none;
}
22

저는 CSS 전문가가 아니기 때문에 ChatGPT에 해당 옵션에 대해 문의했고, hide-this-image-로 시작하지만 그 뒤에 다른 내용이 있는 이미지를 숨기려고 하니 다음과 같은 답변을 받았습니다:

아니요, 순수 CSS는 이미지의 alt 속성에 대해 와일드카드 또는 “~로 시작” 선택자를 지원하지 않습니다.

CSS 속성 선택자는 다음만 지원합니다:

  • 정확히 일치: [alt="value"]
  • 단어 포함: [alt~="value"]
  • 부분 문자열 포함: [alt*="value"]
  • ~로 시작: [alt^="value"]
  • ~로 끝남: [alt$="value"]

그러나 alt^="hide-this-image-"는 CSS가 접근할 수 있는 방식으로 DOM에 alt 속성이 반영되지 않는 Discourse와 같은 시스템에서 이미지가 렌더링될 때 img의 alt 속성을 모든 브라우저에서 일관되게 매칭할 수 없기 때문에 예시에서 신뢰할 수 있게 작동하지 않습니다.

CSS를 활용한 우회 방법 (일부 환경에서만 작동):

.cooked img[alt^="hide-this-image-"] {
  display: none;
}

다시 한번 강조하자면, 이미지가 렌더링되는 방식(예: 마크다운 또는 JS를 통한 렌더링) 때문에 Discourse에서는 일관되게 작동하지 않을 수 있습니다. 이 경우 JavaScript가 필요합니다.

JavaScript를 활용한 신뢰할 수 있는 대안:

document.querySelectorAll('.cooked img[alt^="hide-this-image-"]').forEach(img => {
  img.style.display = 'none';
});

이 방법은 Discourse를 포함한 모든 환경에서 신뢰할 수 있게 작동합니다.

23

ChatGPT의 해결책이 작동하는 것 같습니다:

image
image1114×546 58.3 KB

그리고 Facebook Debugger에서는 이를 대표 이미지로 인식합니다:

image
image741×377 50.1 KB

JavaScript가 포함된 컴포넌트:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.onPageChange(() => {
    document
      .querySelectorAll('.cooked img[alt^="featured-image-"]')
      .forEach((img) => {
        const parent = img.closest("div");
        if (parent) {
          parent.style.display = "none";
        } else {
          img.style.display = "none";
        }
      });
  });
});

이미지가 있어야 할 위치에 여백이 남아있는 것을 발견하여, ChatGPT에게 다시 질문했고, 부모 컨테이너를 숨겨야 한다고 답했습니다. 이 경우 부모 컨테이너는 <div> 태그입니다.

이제 완벽하게 작동합니다!

24

고마워요. 메모에 추가해 둘게요.