Topic List Previews

Thanks for looking into this!

1 Like

Thumbnail Chooser –

Hope you all are safe and well. Strange times, these.

Any thoughts on the best way to go about automatically triggering the thumbnail selection dialog when the OP of the topic submits a new post or a post edit? I’m trying a few things with api.reopenWidget(“post”), but I feel like it could be simpler than that, and wanted to see if the collective mind here might have any suggestions :slight_smile:

1 Like

How i can just use it on the homepage and hide from the other ? :slight_smile:

I found the answer. Thank you for your incredible plugin from you, Arpit Jalan

Untitled

3 Likes

Many thanks Robert! It’s an incredible plugin after getting to grips with the settings. You did warn that they were counterintuitive, I should have paid more attention. Your enthusiasm with this plugin is also very much appreciated. Am new to this, how do we initiate a PR?

3 Likes

Fork on GitHub, prepare your changes, perhaps in a branch and then navigate to the main repo where it should prompt you to raise a PR :). Do give me early warning on what you are working on and why to limit any rework and confirm we’d accept this (feel free to PM me). This repo is part of an organisation (pavilion) so I have to consider broader ownership too. As ever be very disciplined with code cleanliness.

4 Likes

Cool thanks! Will be in touch this week.

3 Likes

Can we always show the excerpt on “topic list featured images topic” not take the cursor to active it ?

7a9b5213765bac6dfe49e48861065fa81c4fbccb_2_690x240

1 Like

You should be able to achieve that with CSS. Use the browser inspector and have a go! If you succeed, post it here.

2 Likes

Do we have a fix on mobile yet? Right now the mobile view still shows excerpts which is a bit abnormal!
Thanks!

2 Likes

If you are seeing it then it’s likely still an issue. Thanks for the reminder. I’ll try and address that when I get some time from other work.

1 Like

Some thing i found on that website, but how we know things we need ? Sory to bother you but i just totally beginner.

// Theme: Sub: yegor
// Target: desktop scss
// Last Edited: 2018-10-22 15:54:21 UTC

#TilesContainer {
    width: 100%;
    padding-top: 72px;
}
#TilesContainer .main-slider {
    display: visible;
}
.tile-quote {
    color: white;
    padding: 10px;
    position: absolute;
    bottom: 60px;
    text-align: left;
}
.tile-quote .fa-quote-left {
    font-size: 8px;
    vertical-align: top;
}
.main-slider {
    padding: 0px 0px 12px;
}
.owl-carousel .owl-wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.owl-carousel {
    display: none;
    position: relative;
    width: 100%;
    -ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper {
    display: none;
    position: relative;
    -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer {
    overflow: hidden;
    position: relative;
    width: 100%}
.owl-carousel .owl-wrapper-outer.autoHeight {
    -webkit-transition: height 500ms ease-in-out;
    -moz-transition: height 500ms ease-in-out;
    -ms-transition: height 500ms ease-in-out;
    -o-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}
.owl-carousel .owl-item {
    float: left;
}
.owl-controls .owl-page, .owl-controls .owl-buttons div {
    cursor: pointer;
}
.owl-controls {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.grabbing {
    cursor: url(https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/grabbing.png) 8 8, move;
}
.owl-buttons .owl-prev, .owl-buttons .owl-next {
    position: absolute;
    top: 50%;
    transform:translateY(-50%);
    width: 23px;
    height: 36px;
    border-radius: 10px;
    left: 20px;
    background: url(https://realtimevfx.com/uploads/default/original/2X/5/5bff1dd8be9f870bc231eccb80b04ea0772b4cc6.png) no-repeat;
    font-size: 0px;
}

.owl-buttons .owl-next {
    left: inherit;
    right: 10px !important;
    background-position: -23px 0px !important;
}
.owl-carousel .owl-wrapper, .owl-carousel .owl-item {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
}
#variation .item {
    position: relative;
    height: 242px;
    font-size: 14px;
    background: #a1def8;
    padding: 0px;
    display: block;
    margin: 1px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
#variation .item .icw-img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 0;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
.tile-hover {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    padding: 10px;
    color: #fff;
    text-decoration: none;
}
.tile-hover:hover {
    text-decoration: none;
    color: #fff;
}
.tile-hover div.tile-title {
    position:absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
    width:85%;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    font-size: 16px;
    line-height: 130%;
    margin: 0px;
    padding: 0px;
    color: #fff;
    font-weight: 400;
}
.tile-hover .tile-info {
    line-height: 20px;
    color: #F6F6F6;
    position: absolute;
    top: 60%;
    left:50%;
    transform:translate(-60%, -50%);
    padding: 10px 20px 10px;
    text-align: left;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
}
#variation .owl-item .icw-img:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .7;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
}
#variation .owl-item:hover .icw-img:after {
    opacity: .9;
}
#variation .owl-item:nth-child(1n+0) .icw-img:after {
    background-color: #000000;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.83) 57%, rgba(0, 0, 0, 0.83) 58%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.24)), color-stop(57%, rgba(0, 0, 0, 0.83)), color-stop(58%, rgba(0, 0, 0, 0.83)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.83) 57%, rgba(0, 0, 0, 0.83) 58%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.83) 57%, rgba(0, 0, 0, 0.83) 58%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.83) 57%, rgba(0, 0, 0, 0.83) 58%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.83) 57%, rgba(0, 0, 0, 0.83) 58%);
}
#variation .owl-item:nth-child(1n+0):hover .icw-img:after {
    background-color: rgba(0, 0, 0, 0);
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}
#variation .owl-item:nth-child(1n+0) .comment-btn {
    color: #dc4225;
}
#variation .owl-item:nth-child:hover .item, .comment-btn {
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}
#variation .owl-item:nth-child(2n+0) .comment-btn {
    color: #002f4b;
}
#variation .owl-item:nth-child(3n+0) .comment-btn {
    color: #292484;
}
#variation .owl-item:nth-child(4n+0) .comment-btn {
    color: #d38312;
}
1 Like

That’s not TLP, the appearance of the word ‘carousel’ suggests they are using a different component, so the CSS will be mostly unsuitable.

No all the information you need is in your own website whilst running TLP. See Developer’s guide to Discourse Themes. Use the Browser Inspector in Firefox or Chrome to target the elements you are interested in and work out what you need to modify from that information.

3 Likes

Thank you a lot Robert ! I’ll give a try

1 Like

It’s really rewarding when you work it out. If you are struggling too much I will try to assist more when I have time.

Try slightly easier things first - try to just change the colour of the text and only in those boxes.

1 Like

Hi Melissa,

I’m doing ok, thanks.

The thumbnail chooser is in the Topic meta editor and not in the Composer so I don’t think there is any easy way to achieve that.

2 Likes

How to show Reddit Style?

1 Like

Just ommit ‘Tiles’ from the settings. However, do note that that screenshot needs to be updated - there is no longer a separate Category column.

I’m not 100% convinced that really looks like Reddit anymore, I might change that description!

btw Reddit is an abomination! :wink:

1 Like

btw, thinking about this, is this partly your concern because the images don’t appear immediately? Remember there is often a delay before the sidekiq job populates the thumbnails for the preview. Often if you are patient an initial default image will appear once this job has run, if not straight away. It’s slightly annoying but it’s native Discourse behaviour to have this delay.

1 Like

It’s more because of our user behavior, which may be specific to our community. They’ll often post a series of images for a work-in-progress as subsequent posts on the same thread. We’d like to have the thumbnail prompt automatic just to minimize the amount of moderation requests about updating it, as most users aren’t likely to think of editing the topic itself when they post an updated image (speaking from experiences on our previous platform.)

I’m making some headway on this with composer component tweaks, but as you said, it’s not that easy :slight_smile:

2 Likes