카테고리 이미지 높이 / 테마 변수에 대한 일반적인 이해

제품 지원
1

여러분 안녕하세요,

테마 수정을 하다 보니 이 SCSS 코드를 발견했습니다.

@supports (--custom: property) {
  .category-logo.aspect-image {
    --max-height: 150px;
    max-height: var(--max-height);
    max-width: 60%;
    height: auto;
    width: calc(var(--max-height) * var(--aspect-ratio));

  }
}

여기서 max-height 변수를 변경하는 올바른 방법이 있는지 궁금합니다(있다면요).

2

정확히 어떤 결과를 원하시는지 잘 모르겠지만, 단순히 로고를 크게/작게만 변경하시려면 아래 내용을 참고해 보세요.

기본적으로 카테고리 로고는 몇 가지 위치에서 사용됩니다 - 카테고리 페이지와 특정 카테고리 페이지입니다.

이 두 위치 모두에서 로고 크기를 수정하려면 아래 코드를 사용할 수 있습니다.

@supports (--custom: property) {
  .category-logo.aspect-image {
    --max-height: 200px; // 200을 원하는 높이로 변경
  }
}

--max-height 변수를 변경하면 너비는 자동으로 조정됩니다.

카테고리 페이지에서만 로고 크기를 변경하는 등 더 구체적인 설정이 필요하시다면, 사이트의 desktop_category_page_style 사이트 설정을 확인해 주시고 현재 어떤 값으로 설정되어 있는지 알려 주세요.

데스크톱에서만 변경을 적용하려면 위의 CSS를 테마의 데스크톱 CSS 탭에 추가하세요. 모바일에서만 적용하려면 모바일 CSS 탭에 추가하세요. 데스크톱과 모바일 양쪽 모두에 적용하려면 공통 CSS 탭에 추가하세요.

3

음, 제안해 주신 대로 --max-height를 변경해 봤는데, 인스펙터에서는 해당 부분이 업데이트되는 것으로 보이지만 이미지는 여전히 같은 크기를 유지하고 있습니다.

인스펙터에서 --aspect-ratio 값이 설정되어 있지 않은 것 같다는 걸 발견했습니다(Chrome에서 해당 값으로 가는 클릭 가능한 링크가 없습니다). 그리고 어디서 설정되는지 도저히 파악이 안 됩니다. Discourse의 GitHub 코드를 검색해 봤지만 여전히 찾을 수가 없네요.

--aspect-ratio가 어디서 설정되는지 찾거나, 어떤 값을 설정해야 하는지 혹시 아이디어가 있으신가요?

수정: 문제를 찾았습니다. 높이가 Discourse Category Headers theme component 에 의해 설정되고 있었네요.

.category-header-widget .category-logo.aspect-image,
.category-header-widget .category-logo.aspect-image>img {
    float: left;
    margin: 0 0.5em 0.25em 0;
    max-height: 150px;
}

그래서 제 테마에서 max-height를 오버라이드했습니다.

category-header-widget .category-logo.aspect-image,
.category-header-widget .category-logo.aspect-image>img  {
	max-height: 80px;
}

수정 #2: 제안해 주신 방법은 카테고리 페이지의 카테고리 아이콘에는 잘 작동했습니다. 감사합니다!