Greasy Fork

I try to write to directly show the thumbnail of actress in the "Appear With" of the Actress infos page.

It work partially (retrieve some of them but not all).
Can help me ?

Here a test link:
https://www.thenude.com/_12767.htm

Here my test:


// ==UserScript==
// @name The Nude - Test Thumbnail from data-image
// @namespace janvier
// @include https://www.thenude.com/*
// @version 1
// @grant none
// ==/UserScript==

//.bio-list>li> a[data-img^="https://static.thenude.com/models/"]
/*
var list = document.getElementsByClassName('bio-list>li> a[data-img^="https://static.thenude.com/models/"]');

for (var i = 0; i < list.length; i++) {
var src = list[i].getAttribute('data-img');
list[i].style.backgroundImage="url('" + src + "')";
}
*/
// GOOD 1
//.bio-list>li> a[data-img^="https://static.thenude.com/models/"]

$( ".bio-list>li> a[data-img^='https://static.thenude.com/models/']" ).each(function() {
var attr = $(this).attr('data-img');
if (typeof attr !== typeof undefined && attr !== false) {
$(this).css('background-image' , 'url('+attr+')' );
}

/*
if (typeof attr !== typeof undefined && attr !== false) {
$(this).css("cssText","background-image", 'url('+attr+')' ; 'background-size': 'contain !important ; 'background-repeat': no-repeat; 'background-position': center !important; 'height': 60px !important; 'width': 42px !important; 'border': 1px solid red !important; );
}
*/
/*
// TEST 1 - not good
$( ".bio-list>li> a[data-img^='https://static.thenude.com/models/']" ).each(function() {
if (typeof attr !== typeof undefined && attr !== false) {
$(this).css({
"background-image" : "url('+attr+')" ,
"background-size" : "contain" ,
"background-repeat" : "no-repeat" ,
"background-position": "center" ,
"height": "60px" ,
"width" : "42px" ,
"border": "1px solid red "
} );
}
*/

});
/*
function addCSS () {
// add CSS
$('head').append(`

`)

console.log('Ratings on Trakt: CSS added')
}
})()
*/

you wrong use the quotation marks

// TEST 1 - not good
$( ".bio-list>li> a[data-img^='https://static.thenude.com/models/']" ).each(function() {
    if (typeof attr !== typeof undefined && attr !== false) {
        $(this).css({
            "background-image" : "url('+attr+')", // here should be "url("+attr+")"
            "background-size" : "contain" ,
            "background-repeat" : "no-repeat" ,
            "background-position": "center" ,
            "height": "60px" ,
            "width" : "42px" ,
            "border": "1px solid red "
        } );
    }
});

thanks...
Tested for the section of the script, as you suggested:

// ==UserScript==
// @name The Nude - TesT2 Thumbnail from data-image
// @namespace janvier
// @include https://www.thenude.com/*
// @version 1
// @grant none
// ==/UserScript==

(function() {
'use strict';

// TEST 1 - not good
$( ".bio-list>li> a[data-img^='https://static.thenude.com/models/']" ).each(function() {
if (typeof attr !== typeof undefined && attr !== false) {
$(this).css({
"background-image" : "url('+attr+')", // here should be "url("+attr+")"
"background-size" : "contain" ,
"background-repeat" : "no-repeat" ,
"background-position": "center" ,
"height": "60px" ,
"width" : "42px" ,
"border": "1px solid red "
} );
}
});
})();

but not work.

So, I use your in the good one:


// GOOD 1
//.bio-list>li> a[data-img^="https://static.thenude.com/models/"]

$( ".bio-list>li> a[data-img^='https://static.thenude.com/models/']" ).each(function() {
var attr = $(this).attr('data-img');
if (typeof attr !== typeof undefined && attr !== false) {
// 'url('+attr+')' should be "url("+attr+")"
$(this).css('background-image' , "url("+attr+")" );
}

I don't see change:
I retrieve some thumbnails but not all...
see my screenshot.

I have make an error ?

sorry i make mistake too. the correct one is 'url("'+attr+'")'

'url("'+attr+'")'
That's fine:
it retrieve all thumbnails.

Thank!

Now i want add a CSS to them.
I try enable it in the script but i don't understand how.
I think i don't clearly understand how to write it....
:-)

I try:
// ==UserScript==
// @name The Nude - Test2 Thumbnail from data-image
// @namespace janvier
// @include https://www.thenude.com/*
// @version 1
// @grant none
// ==/UserScript==


// GOOD 1
//.bio-list>li> a[data-img^="https://static.thenude.com/models/"]

$( ".bio-list>li> a[data-img^='https://static.thenude.com/models/']" ).each(function() {
var attr = $(this).attr('data-img');
if (typeof attr !== typeof undefined && attr !== false) {
// 'url('+attr+')' should be "url("+attr+")"
$(this).css('background-image' , 'url("'+attr+'")' );
}

function addCSS () {
// add CSS
$('head').append(`
`)

console.log('TheNude: CSS added')
}
})()

I don't uderstand to how put the code here!
after:
$('head').append(`
There is :


Normally i use the code format.
but the forum make it not visible (i use the html format)

hmmm, i post it here:
TesThe Nude - Test2 Thumbnail from data-imaget [Paste2.org.]

you have some syntax errors, anyway here is one can run.

to put you code block, check Fenced Code Blocks

// ==UserScript==
// @name        The Nude - Test2 Thumbnail from data-image
// @namespace   janvier
// @include     https://www.thenude.com/*
// @version     1
// @grant       none
// ==/UserScript==


// GOOD 1
//.bio-list>li> a[data-img^="https://static.thenude.com/models/"]

$( ".bio-list>li> a[data-img^='https://static.thenude.com/models/']" ).each(function() {
    var attr = $(this).attr('data-img');
    if (typeof attr !== typeof undefined && attr !== false) {
        // 'url('+attr+')' should be  "url("+attr+")"
        $(this).css('background-image' , 'url("'+attr+'")' );
    }
})

// add CSS
$('head').append(`
<style type='text/css'>
.bio-list>li> a[data-img^='https://static.thenude.com/models/'] {
    display: inline-block !important;
    height: 60px !important;
    width: 42px !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
    border: 1px solid red !important;
}
</style>
`)
console.log('TheNude: CSS added')

All is fine now with your help:
Thanks for your patience!
About posting code is this forum:
I need study the markdown ref you sent to me.

But as i said before i used the HTML (i check it)
and not the Markdown...

Anyway i appreciate a lot your help.

Posted the result:
The Nude - Show directly thumbnails of Actress in "Appears with:"

New test (but fail) to add thumbnails to an other page:
https://www.thenude.com/newcomers

Not retrieve the thumbnails and not add the CSS
Why?
Tested with only the GOOD 2:
same no results

Here my code:
The Nude - Show directly thumbnails of Actress in "Appears with:" - TEST 3