Add more information to thumbnails

[BrokenEagle]

Below is the QTip popup and thumbnail that gets displayed with TISAS (topic #15976), just to give an idea of what I'm talking about below.

Which items get added could vary from the above, especially the uploader name given the sensitivity to that by some people. I would at least like to see age from the popup, as I frequently have to open the artist page just to find out when the last time an artist has been uploaded to. The image information below the thumbnail would also be useful, but probably not the post #. I just added that in TISAS to round out the display info when comparing it against the original image(s). Score and favcount could be useful, just to show how well received an artist's uploads are. Not sure it's needed to add the rating, although maybe add a data item to the article container like data-rating so that users can block questionable or explicit images with a CSS extension.

Important:

• Age (time ago)
• Source info (domain)
• Image info (width, height, filetype, filesize)
• Rating (data item)

Optional:

• Rating (displayed info)
• Score
• Favcount
• Username... maybe?

[7nik]

I added displaying of some info.
Now extraction of the domain name works incorrectly, e.g. for pixiv, it returns pximg.net. I think we should add a map of domain names for the most popular ones. Btw, I remember right, somewhere on the forum I saw the list of the most popular sources but I can't find it now.

Rating (data item)
Rating (displayed info)

What is the difference? Or it is the short and full name?

[BrokenEagle]

Rating (data item) is adding the rating to the HTML structure, like data-rating="e" . You can do that, or you can add a class, but I'd consider doing the the data item as it's easier. The purpose of that is that users could add something like the following to CSS extension like Stylus to hide ratings of questionable and/or explicit nature.

Example with hiding:

.post-preview[data-rating=q],
.post-preview[data-rating=e] {
    display: none;
}

Rating (displayed info) is actually showing the rating to the user.

Now extraction of the domain name works incorrectly, e.g. for pixiv, it returns pximg.net. I think we should add a map of domain names for the most popular ones.

In my script, I just show the image domain, i.e. pximg.net. I think it's usually clear where an image came from even if from a different domain of the actual source.

Btw, I remember right, somewhere on the forum I saw the list of the most popular sources but I can't find it now.

Do you mean topic #14119?

[BrokenEagle]

I gave the new tooltips a whirl, and I noticed a few things.

1. The unevenness of the lines is a bit distracting.
2. There's some element spacing issues as seen by the following.

https://twitter.com/inumoto/media

[BrokenEagle]

3. Some border color issues

https://twitter.com/pailand/media

The above are all supposed to be yellow or green as seen below.

https://danbooru.donmai.us/artists/5954

[BrokenEagle]

4. Line overflow on the ratings line, especially with questionable and explicit ratings
5. Cannot view the entire tooltip in the tweet view on Twitter (old version)

https://twitter.com/188_sch/status/1156211897667993601 (Warning! NSFW)

The thumbnails were intentionally blacked out.

That second row of images was half-cutoff and was as much as I could see. Regardless, it took having to middle scroll to see most of the toolttips even in the regular timeline view (old Twitter). I imagine that artists with huge URL sections would suffer the same.

One thing that could be done would be to have a static placement for the artist name and post count, and then have the rest overflow into scrollable content, like what is currently done with Danbooru's tooltips. Example: tagcount:>100

[7nik]

Btw, I remember right, somewhere on the forum I saw the list of the most popular sources but I can't find it now.

Do you mean topic #14119?

No, there was another list with a domain name and number of pictures uploaded from it. And some sources, like pixiv, were presented 2 times: with 2-level (pixiv.net) and 3-level (www.pixiv.net) domain names.

The purpose of that is that users could add something like the following to CSS extension like Stylus to hide ratings of questionable and/or explicit nature.

Here is a problem: qtip's content is added via Shadow DOM and since not-in-shadow CSS can't reach the content. But I can add settings to blur/hide some ratings.

[BrokenEagle]

Here is a problem: qtip's content is added via Shadow DOM and since not-in-shadow CSS can't reach the content. But I can add settings to blur/hide some ratings.

Actually, shadow parts can be used to allow the exposure of certain parts of a Shadow DOM for styling.
https://developer.mozilla.org/en-US/docs/Web/CSS/::part

I tried it out and it works. For the below, I added part="post-preview" to all of the thumbnail containers, and part="post-preview rating-safe" to only one thumbnail container.

Styling all post-preview parts.

.qtip-content::part(post-preview) {
    background-color: black;
}

Styling only rating-safe parts.

.qtip-content::part(rating-safe) {
    background-color: black;
}

The caveat though is that only the elements with part attributes can be styled, so no styling of descendants unless those descendants also have parts. Also, parts behave like classes, i.e. they can have more than one part specifier, but they have to be space separated.

[BrokenEagle]

No, there was another list with a domain name and number of pictures uploaded from it. And some sources, like pixiv, were presented 2 times: with 2-level (pixiv.net) and 3-level (www.pixiv.net) domain names.

Oh, you mean topic #15309 then?

[BrokenEagle]

Alright, I took a look at the updated qtips, and found a couple more items.

1. The thumbnails and their text information does not align.

Source: https://twitter.com/inumoto/media

I was encountering the same issue with TISAS, and I had to manually add a padding-top style to the image element itself.

                <img style="padding-top:${150-height}px"
                     width="${width}"
                     height="${height}"
                     src="${preview_file_url}"
                     title="${_.escape(post.tag_string)}"
                     part="post-preview rating-${post.rating}">

That gets it to look like the following.

2. Significantly different text info widths.

The time ago line is much shorter than the other two lines.

I added a letter-spacing of 3px to better spread it out.

<p style="letter-spacing:3px">${timeToAgo(post.created_at)}</p>

Admittedly, this one is more of a preference thing, and I imagine that there might be users that find the text spreading to be more distracting than the difference in line length.

3. Just barely a scroll container

As seen in all of the examples above, when 4-6 thumbnails are the setting, the scrollable section is minuscule. Either optimize the maximum height for 1 line of thumbnails or 2 lines.

2 lines, max-height = 420px

1 line, max-height = 220px

4. Incorrect setting of default settings

The code doesn't have the right parameters for GM_setValue. It only has one parameter, whereas the first parameter should be the name and the second parameter should be the value. The following is what gets set as the default.

{
    "booru": "https://danbooru.donmai.us",
    "cache_lifetime": 3000,
    "preview_limit": 5,
    "q": "undefined"
}

Adding the name to that function though fixes that.

function getSetting(name, defValue, validator) {
    const value = GM_getValue(name);
    if (typeof value === "undefined" || validator && !validator(value)) {
        GM_setValue(name,defValue);
        return defValue;
    }
    return value;
}

Which produces...

{
    "booru": "https://danbooru.donmai.us",
    "cache_lifetime": 3000,
    "preview_limit": 5,
    "blur_preview_rating": "q"
}

6. Unable to show all ratings

Currently all 3 ratings can be hidden, but all 3 ratings cannot be shown. It should probably be the opposite, since I can't really think of a reason why a user would want to hide the safe rating. Also, it's more likely that a user may not care and wants to see everything.

I do like the way that a blur option is offered to the user in addition to adding parts to various elements. Some users may not know how to setup or install a CSS addon, plus blurring unsafe images would probably be enough for most users.

[7nik]

2. Significantly different text info widths.

The spacing is too big as for me. I prefer to swap lines.
A bit reduced spacing for the longest case hentai-foundry.com, rating:Q.

4. Incorrect setting of default settings

It was fixed but I accidentally removed the fix when undid some changes :(

6. Unable to show all ratings

It was supposed to set the empty string to show all ratings. Now I inverted the setting.

[BrokenEagle]

It looks good. One thing I thought of though was the possibility of an overly large "other names" section.

https://twitter.com/eber_accebeR

The above still fits, however the larger size makes it more difficult to get the whole thing to fit inside the screen. Additionally, although I wasn't able to find an artist with an "other names" section longer than the above, the possibility still exists for that section to fill up the entire screen. It should probably be limited to 2 rows before overflowing into a scrollable section.

[7nik]

Done, I also removed underscores in the names.

Here is one annoying issue: when you hover an image (e.g. to unblur it), appears a tooltip with the tag list and if you hover it you automatically unhover the qtip and it disappears. And I can't google any fitting case to get a solution clue.

[BrokenEagle]

It looks good now.

Here is one annoying issue: when you hover an image (e.g. to unblur it), appears a tooltip with the tag list and if you hover it you automatically unhover the qtip and it disappears. And I can't google any fitting case to get a solution clue.

I'm not getting what you're talking about. The taglist popup isn't supposed to stay up when you hover over it. It only appears when you're hovered over the image itself.

If you don't want the taglist tooltip to appear, you just need to hover just outside the image where the image container is at. It helps if the image is long or wide, but works even if the image is square (although the margin for error is a lot smaller).

[BrokenEagle]

Also, the README.md needs to be updated with the new user value. You can use the following screenshot when editing that file.

[BrokenEagle]

@7nik There's a misspelling in the settings update for the README.md

Possible values are "s", "q", "e" (save, questionable, explicit).

It should be "safe" instead of "save".

[7nik]

Oh, thank you!