Vsco.co request :)

[https433]

The url of site https://vsco.co/*/gallery https://vsco.co/*/collection/*/

Describe the result you'd like with the rule infinite scroll

Custom rule you've tried n/a

Additional context i have easy cors extension for brave with

vsco.co
im.vsco.co
image.vsco.co
image-aws-us-west-2.vsco.co

added for any cors issues

[https433]

also, do you mind i open a pr with some English grammar fixes?

[hoothin]

569 So you have already tried pagePre?

If you need, I'd be happy to take the time to write one for you. And yes, welcome to open any pr.

[https433]

569 So you have already tried pagePre? If you need, I'd be happy to take the time to write one for you. And yes, welcome to open any pr.

oh shoot, i forgot i made one already. lol let me try that

[https433]

569 So you have already tried pagePre? If you need, I'd be happy to take the time to write one for you. And yes, welcome to open any pr.

i tried it, i cant get it working, when u have time i'd be thankful for u to write a rule

[hoothin]

{
    "name": "Reposts | VSCO",
    "url": "^https?://vsco\\.co/",
    "example": "https://vsco.co/vsco/collection/1",
    "author": "Hoothin",
    "nextLink": "[rel='next']",
    "pagePre": "let data = response.match(/window\\.__PRELOADED_STATE__ = (.*?)<\\/script>/)[1];eval('data=' + data);let con=document.createElement('div'),count=0;con.style.cssText='display: flex; flex-wrap: wrap; justify-content: center;';for(let key in data.entities.images){let value=data.entities.images[key];let div=document.createElement('div');con.innerHTML+=`<div style=\"width: 300px; margin-bottom: 80px; margin-right: 40px; justify-content: flex-start;\"><figure class=\"MediaThumbnail \"><a href=\"/${value.permaSubdomain}/media/${value.id}\"><div class=\"MediaImage relative\" style=\"max-width: 300px;\"><div class=\"MediaBgColorWrapper--withRatio relative\" style=\"padding-top: 118.382%;\"><img srcset=\"//${value.responsiveUrl}?w=300 1x,       //${value.responsiveUrl}?w=300&dpr=2 2x,       //${value.responsiveUrl}?w=300&dpr=3 3x\" sizes=\"\" class=\"disableSave-mobile css-6dp941\" src=\"//${value.responsiveUrl}?w=300\" alt=\"${value.description}\"></div></div></a><figcaption class=\"css-1oyr5dc e19mt3zn0\"><h6 color=\"textSecondary\" font-size=\"2\" font-weight=\"book\" class=\"truncate css-znxcw0 e1owhgvo0\"><a href=\"/${value.gridName}/gallery\">${value.gridName}</a></h6></figcaption></figure></div>`;};return [con];"
  }

I've written a rough draft, but this website uses a third-party masonry library that rearranges the li elements based on screen size, so the CSS will still need some adjustments on your end.

[https433]

cool, works perfect what about https://vsco.co/*/gallery

[https433]

thanks btw

[hoothin]

Are you referring to the load more button? In that case, you'll need to update Pagetual to the latest version, and then use this rule.

{
    "name": "VSCO Gallery",
    "url": "^https?://vsco\\.co/.*/gallery",
    "example": "https://vsco.co/the-vintage-mason/gallery",
    "author": "Hoothin",
    "loadMore": "#gallery-anchor+div>grain-button =>> button"
}

=>> means query the shadowroot.

[https433]

thanks