주제 목록 미리보기 (TLP)

@merefield

Topic List Previews(TLP) 플러그인을 설치했고, 검색 결과 페이지에 토픽 썸네일 미리보기를 표시하고 싶지만 작동하지 않습니다. 현재는 토픽의 타일과 발췌문만 표시될 뿐입니다. /new와 /latest 같은 다른 페이지에서는 썸네일이 정상적으로 작동합니다. TLP 설정을 수정해 보았지만, 어떤 변경 사항도 효과를 보지 못했습니다. 이 페이지에서 다른 플러그인(discourse-topic-previews-sidecar)에 대한 언급을 발견하여, 해당 플러그인을 설치하지 않아서 문제가 발생한 것으로 의심했습니다. 하지만 그 플러그인을 설치한 후에도 검색 결과 페이지에는 여전히 썸네일이 표시되지 않습니다.

몇 가지 질문이 있습니다:

  1. 검색 결과에 썸네일 미리보기를 활성화하려면 TLP만 설치하면 충분한가요, 아니면 TLP와 discourse-topic-previews-sidecar 두 플러그인을 모두 설치해야 하나요?

  2. 검색 결과를 위해 TLP에 특별한 설정이 필요한가요? 왜 제 설정이 적용되지 않는 건가요?

  3. 이 웹사이트처럼 검색 결과 페이지에 썸네일 미리보기를 표시하고 싶습니다. 어떻게 설정해야 하나요? 주요 설정 단계를 자세히 설명해 주실 수 있을까요?

현재 설정에 대한 스크린샷을 첨부합니다.

TLP 설정

[
	{
		"setting": "topic_list_tiles_topic_lists",
		"value": "latest|new|unread|top|tag|activity-topics|activity-portfolio|latest-mobile|new-mobile|unread-mobile|top-mobile|tag-mobile|activity-topics-mobile|activity-portfolio-mobile"
	},
	{
		"setting": "topic_list_tiles_categories",
		"value": ""
	},
	{
		"setting": "topic_list_tiles_tags",
		"value": ""
	},
	{
		"setting": "topic_list_thumbnails_topic_lists",
		"value": "latest|new|unread|top|tag|suggested|agenda|activity-topics|activity-portfolio|latest-mobile|new-mobile|unread-mobile|top-mobile|tag-mobile|suggested-mobile|agenda-mobile|activity-topics-mobile|activity-portfolio-mobile"
	},
	{
		"setting": "topic_list_thumbnails_categories",
		"value": "42"
	},
	{
		"setting": "topic_list_thumbnails_tags",
		"value": ""
	},
	{
		"setting": "topic_list_excerpts_topic_lists",
		"value": "latest|new|unread|top|tag|suggested|agenda|activity-topics|activity-portfolio|latest-mobile|new-mobile|unread-mobile|top-mobile|tag-mobile|agenda-mobile|activity-topics-mobile|activity-portfolio-mobile"
	},
	{
		"setting": "topic_list_excerpts_categories",
		"value": ""
	},
	{
		"setting": "topic_list_excerpts_tags",
		"value": ""
	},
	{
		"setting": "topic_list_actions_topic_lists",
		"value": "latest|new|unread|top|tag|suggested|agenda|activity-topics|activity-portfolio|latest-mobile|new-mobile|unread-mobile|top-mobile|tag-mobile|agenda-mobile|activity-topics-mobile|activity-portfolio-mobile"
	},
	{
		"setting": "topic_list_actions_categories",
		"value": ""
	},
	{
		"setting": "topic_list_actions_tags",
		"value": ""
	},
	{
		"setting": "topic_list_set_category_defaults",
		"value": false
	},
	{
		"setting": "topic_list_dominant_color_background",
		"value": "tiles only"
	},
	{
		"setting": "topic_list_show_like_on_current_users_posts",
		"value": true
	},
	{
		"setting": "topic_list_tiles_larger_featured_tiles",
		"value": true
	},
	{
		"setting": "topic_list_tiles_wide_format",
		"value": false
	},
	{
		"setting": "topic_list_portfolio",
		"value": true
	},
	{
		"setting": "topic_list_portfolio_filter_type",
		"value": "tag"
	},
	{
		"setting": "topic_list_portfolio_filter_parameter",
		"value": ""
	},
	{
		"setting": "topic_list_default_thumbnail",
		"value": ""
	},
	{
		"setting": "topic_list_default_thumbnail_fallback",
		"value": false
	},
	{
		"setting": "topic_list_thumbnail_resolution_level",
		"value": 3
	},
	{
		"setting": "topic_list_thumbnail_width",
		"value": 150
	},
	{
		"setting": "topic_list_thumbnail_height",
		"value": 100
	},
	{
		"setting": "topic_list_thumbnail_width_mobile",
		"value": 50
	},
	{
		"setting": "topic_list_thumbnail_height_mobile",
		"value": 60
	},
	{
		"setting": "topic_list_thumbnail_first_x_rows",
		"value": 0
	},
	{
		"setting": "topic_list_featured_images",
		"value": false
	},
	{
		"setting": "topic_list_featured_images_resolution_level",
		"value": 2
	},
	{
		"setting": "topic_list_featured_images_category",
		"value": false
	},
	{
		"setting": "topic_list_featured_images_from_current_category_only",
		"value": true
	},
	{
		"setting": "topic_list_featured_images_tag",
		"value": ""
	},
	{
		"setting": "topic_list_featured_images_tag_show",
		"value": true
	},
	{
		"setting": "topic_list_featured_images_count",
		"value": 0
	},
	{
		"setting": "topic_list_featured_images_order",
		"value": "latest"
	},
	{
		"setting": "topic_list_featured_width",
		"value": 0
	},
	{
		"setting": "topic_list_featured_height",
		"value": 250
	},
	{
		"setting": "topic_list_featured_height_mobile",
		"value": 150
	},
	{
		"setting": "topic_list_featured_title",
		"value": ""
	},
	{
		"setting": "topic_list_featured_excerpt",
		"value": 100
	},
	{
		"setting": "topic_list_featured_details_always_show",
		"value": "only on hover"
	},
	{
		"setting": "topic_list_test_image_url_timeout",
		"value": 5000
	},
	{
		"setting": "topic_list_fps_search_grid",
		"value": true
	},
	{
		"setting": "topic_list_fps_search_blurb",
		"value": true
	},
	{
		"setting": "topic_list_fps_search_author",
		"value": true
	}
]

안녕하세요

제 문제가 TLP와 관련이 있을 것 같지만 확실하지는 않습니다. 어제 discourse를 최신 버전으로 업데이트했는데, 그 이후로 모바일에서는 썸네일이 왼쪽이 아닌 위에 표시되고 있습니다 (모바일에서만 발생하며, 개발자 도구를 통해 재현하지는 못했습니다)

포럼: cwowd
(이전 '버그’와 관련이 없을 수 있으며, glimmer 모드를 auto로 설정하거나 활성화해도 차이가 없습니다)

1개의 좋아요

“토픽 목록” 설정을 비우면 원치 않는 기능을 끄실 수 있습니다. 예를 들어 다음과 같습니다.

썸네일, 발췌문, 작업 등에 대한 설정도 있습니다.

재현할 수 없습니다. 최신 TLP에서 포맷팅은 완벽합니다. 다른 모든 테마/테마 구성 요소를 제거한 후 다시 시도해 보세요.

아마도 충돌하는 다른 항목이 활성화되어 있을 가능성이 매우 높습니다.

또는 모바일 섬네일 크기가 너무 클 수 있습니다.

시도해 주셔서 감사합니다 :wink:

썸네일 이미지의 크기: 시도해 보니 왼쪽에 … 12px 폭으로 올바르게 표시되었습니다. 말할 것도 없이, 이 경우 이미지는 보이지 않습니다.

제 이해가 맞다면, 왼쪽에 열이 "추가"되어 마지막 메시지 작성자의 아이콘이 표시됩니다(대신 주제에 할당된 썸네일이 표시되어야 하는데). 그리고 왼쪽으로 정렬할 공간이 부족하여 썸네일이 주제 제목 위에 위치하게 됩니다.

1개의 좋아요

이렇게 보여야 합니다. 하지만 네, 제 경우에는 구글이 이 정도 폭까지만 제공하더군요 :sweat_smile:

더 큰 이미지를 보고 싶다면 모바일에서 타일 보기로 전환해 보세요?

이전에는 이렇게 작동했는데, 많은 동안 나에게 큰 만족을 주었죠 :wink:

3.5.0.beta2-dev로 업데이트한 후 무언가 깨졌는데, 무엇이 깨졌는지, 혹은 왜 이 f** 저자(author) 열이 다시 나타났는지(모바일 화면을 에뮬레이션할 때는 모든 것이 정상이라 개발자 도구에서도 도움을 받지 못했습니다) 파악이 안 됩니다.

썸네일이 없으면 아바타가 표시되어야 합니다.

최신 버전에서 문제는 보이지 않는 것 같은데? (썸네일 크기가 충분히 작다면 :slight_smile: )

사실 이 TC는 이제 오버라이드를 위한 새로운 공식 API를 사용하고 템플릿 대체에 의존하지 않으므로, 이전보다 더 안정적일 것으로 기대합니다.

모든 모바일 페이지에서 TLP를 제거해야 했습니다.

부수적인 문제는 개발 도구가 실제 모바일 페이지를 시뮬레이션하지 않는다는 점입니다(예: 제 경우 TLP가 데스크톱 페이지에서만 활성화되었음에도 불구하고 개발 도구의 "모바일 보기"에서는 여전히 썸네일이 표시됩니다).

그 이유를 요약해 줄 수 있을까요? 저는 있는 공간을 최대한 활용하려고 최선을 다하고 있는데 말이죠?

이전에 언급했듯이 (Topic List Previews (TLP) - #594 by Thierry_Trégaro), 최근 Discourse 업데이트 이후 모바일에서 썸네일이 제목 위에 (왼쪽이 아닌) 표시되어 왼쪽에 너무 큰 여백이 남는 문제가 발생했습니다.

안타깝게도 member pict로 다운그레이드하는 것 외에는 선택지가 없습니다.

이 뷰에서는 타일 표시를 일시적으로 꺼두었습니다. 문제가 보이지 않네요. 이 사이트는 어제 기준으로 최신 상태입니다.

Pixel 6a

아바타와 썸네일 크기가 비슷해야 모든 요소가 올바르게 레이아웃되므로, 그렇게 하는 것이 당연합니다 …

… 아니면 그냥 타일 뷰로 전환하는 것도 방법입니다.

개발 도구를 사용할 수 있었습니다… 예를 들어, mobile-latest에서 다시 활성화해 보았는데 다음과 같은 결과가 나왔습니다.

썸네일 크기를 10px로 설정하면,

왼쪽의 해당 열을 표시하지 않는 방법을 찾을 수가 없습니다…

테마 3의 설정을 재정의하고 계신가요?

어쨌든 설정에서 뭔가 이상한 부분이 있습니다.

같은 템플릿을 사용하지 않는 것 같습니다.

여기 동일한 크기의 starzen이 있습니다:

아! 버그일 수도 있겠네요. 죄송합니다!

"기본 이미지"를 비활성화하면 문제가 발생합니다. 관련이 있을까요?

이 업데이트를 시도해 보세요:

Topic List Previews가 마음에 들고 제가 좋은 일을 했다고 생각하신다면, 커피 한 잔 사주세요 :coffee:

인내해 주셔서 감사합니다! 새 API와 예정된 제한 사항으로 인해 전면적인 재작성을 해야 했는데, 그로 인해 몇 가지 새로운 버그가 발생했습니다.

변화가 보이지 않습니다. 참고로, 라이트 테마에 다른 구성요소를 추가하지 않은 상태입니다.

노트북 화면

모바일 화면

귀하의 게시물을 읽은 후, 기본 이미지(Ionic에서 가져온 것)로 시도해 보았습니다. 실질적인 변화는 없었습니다(단, 저자의 사진이 정당하게 제거되긴 합니다).

표시를 왼쪽으로 정렬할 수 있습니다(다음 코드를 가지고 있습니다.

.mobile-view .topic-list .right {
    margin-left: 60px !important;
}

내 CSS에 있습니다. 더 좋아 보이지만 여전히 제목 위에 썸네일이 겹쳐 있습니다.

수정: 이제야 깨달았습니다. 마침 CSS grid를 조금 사용하여 문제를 해결했습니다. 완벽하지는 않지만 괜찮습니다.


부연 설명으로, 하나의 요청이 있습니다: 새 주제(new-topic)에는 발췌문(excerpt)을 추가할 수 있지만, 새 답변(new-replies)에는 추가할 수 없으면 좋겠습니다(혹은 포럼이 선호하는 다른 방식이라면 그것도 좋습니다^^).

썸네일 너비를 90px까지 늘려도 해당 문제를 재현할 수 없습니다:

(다만, 날짜와 개수 표시에는 이 정도 너비가 너무 넓습니다.)

다른 컴포넌트가 활성화되어 있어 간섭을 일으키고 있지는 않은지 확인해 보셨나요?

TLP는 기본적으로 잘 작동하며, 화면이 매우 좁아져도 문제가 없습니다:

결국 문제를 찾았고, 이제 수정되어야 합니다. 기본 썸네일 로직에 오류가 있었습니다.

2개의 좋아요

일부 PreviewsThumbnail 인스턴스화에서 @url이 없는 것을 확인했습니다.
이것은 의도적인 것인가요?

1개의 좋아요