Instructions on how to obtain the URL and Image for any public custom card

[Christen57]

James111 wanted to know how to get the URL and Image for any public custom card, so I decide to make this step-by-step guide on how to do so.



For this demonstration, I will be using the custom card with the custom card id "22554" but any custom card works.

Step 1; Open up the Deck Constructor



Step 2; Search for the custom card you want and hover your mouse over it to make it appear on the left side of the screen



Step 3; Right click on the custom card image on the left side of the screen and click "Inspect"



This big console-like menu should come up:



Step 4; Click on the little arrow at '<div class="cardfront_content"> == $0'



Step 5; Go to where it says:
'<img class="pic" src="https://www.duelingbook.com/./images/custom-pics/22554.jpg " style="left:'



At this point, if you only want to get the link to the custom card URL instead of the custom card image, skip to Step 8. Otherwise, continue with steps 6 and 7.

Step 6; Double click on "https://www.duelingbook.com/./images/custom-pics/22554.jpg"



Step 7; Right click on "https://www.duelingbook.com/./images/custom-pics/22554.jpg" and click Go to https://www.duelingbook.com/./images/custom-pics/...



You should be taken to the "https://www.duelingbook.com/images/custom-pics/" page with the custom card image that will look something like this:



Step 8; Select the custom card id, which is the set of numbers between "https://www.duelingbook.com/images/custom-pics/" and ".jpg"



Step 9; Right click on it and click "Copy"



Step 10; Go to https://www.duelingbook.com/card?id=
Don't worry if it tells you the "Card does not exist"



Step 11; Paste the custom card id that you copied at the end of the url and hit Enter



Now you have the full custom card URL!



That's how you get the id's for individual custom cards...

But wait!

What if you want to get the id's for multiple custom cards? Are you going to have to go through all those tedious steps for every single one of those custom cards? No. For you see, there is a way to get the id's for multiple custom cards at once without having to repeat all those steps for each of them. Here is how.

All you have to do is take all of the custom cards that you want to get the id's of, and put them in your Main Deck, Side Deck, or Extra Deck. I recommend the Side Deck since all of them will be in one place and easier and faster to access.

To quickly add a card to your side deck, you simply hold down the Shift key on your keyboard and right click the card, and it will go to your side deck if there is any room, instead of the main or extra deck.



Next, click on "Export Deck" located at the bottom left corner of the screen, and choose to export your deck to "XML File (with Custom Cards)"



Your deck will be exported as a .xml file:



Open up a new tab and drag the .xml file to the new tab page



Alternatively, you can go to the downloaded file in your folder, right click on it, and open it up with your browser that way, or maybe just clicking on it and your computer will automatically open it with one of those browsers.



If done correctly, this is what it should look like on Google Chrome



or on Internet Explorer



Either way, now you have all of the custom card id's in one place, and this is much faster than manually checking for each of the id's individually in the console, so now it's a matter of going back to Steps 10 and 11, and copying and pasting those custom card id's into the url box after https://www.duelingbook.com/card?id= and hitting Enter.

Hopefully they make it possible to quickly get any custom card link and URL without having to go through all those steps!

[Christen57]

Okay.

So after experimenting with Javascript, I found a way to find and obtain the URL for any individual public custom card that is even faster than the above methods. This may be the fastest known method to obtain the URL for any individual public custom card yet, and there are 2 things that need to be done.

First, you need to make sure that both "JavaScript" as well as "Pop-ups and redirects" are enabled/allowed on duelingbook.



You may also be required to reload your page for the changes to take effect.



Second, you need to create a Javascript bookmark with a specific Javascript code that will take your current URL of any custom card image and replace it with in it with that custom card's URL. To do this, click on the little three dots at the top right corner of your browser, then click "Bookmarks" and then click "Bookmark this tab..."



Click "More..."



In the box that says "Name" give it any name you want, and in the box that says "URL" copy and paste this into it:

javascript:window.open('https://www.duelingbook.com/card?id='+window.location.href.slice(47).slice(0, -4), '_blank');

Then click "Save".



I will explain what this piece of code is in a little bit. Just know that it is not a virus, or any malicious program. For those of you who are not familiar with Javascript, I assure you your computer will be perfectly fine after running this line of code. Nothing will be downloaded onto your computer and executed, and this is not any kind of hack or exploit either, so no need to worry about getting any kind of ban or penalty for this.

Go back to the duelingbook Deck Constructor, and do what you did before; right click any custom card image, click inspect, right click the custom card URL and click "Go to https://www.duelingbook.com/./images/custom-pics/... "





Now that you are back at the custom card image page, this is where you must click on your newly created bookmark.



If done correctly, it should automatically take you to that card's actual custom card page, without you having to manually copy and paste the custom card id after https://www.duelingbook.com/card?id= over and over for each custom card.



So how does this work?

Well, you see, most modern browsers, if not all of them, especially the one I use, Google Chrome, support a programming language called Javascript. Javascript allows you to create lines of code in your bookmarks that will perform basic tasks very quickly.

Here's how that line of code works. I will break it down and explain each part of it.

This is the line of code:
javascript:window.open('https://www.duelingbook.com/card?id='+window.location.href.slice(47).slice(0, -4), '_blank');

Let's start with "javascript:"
Every Javascript code in a bookmark has to begin with "javascript:" and most must end with a ; symbol, so that the browser recognizes that it is a javascript code. It's kind of like how every website, including duelingbook itself, must start with <!DOCTYPE HTML!> so that browsers recognize it.

Next is "window.open"
This part of the code tells the browser to open a new web page, but the browser needs to know which web page to open, which is where the next part of the code comes into play:
('https://www.duelingbook.com/card?id='
This part of the code specifies that the new web page that the browser must open up is https://www.duelingbook.com/card?id=.

However, we are not done yet. We need to specifically tell the browser to take the custom card id and add it to the end of the web page url, then open up that new web page. When adding one piece of text to another in java script, you use the + symbol. Then we use this part of the code to specify which custom card id to add to the end of the web page url:
window.location.href.slice(47).slice(0, -4)

"window.location.href" refers to the url of the current web page, which is why you need to be on the custom card image page in order for this to work. Trying to run this line of code through the bookmark on any other page will simply take you to duelingbook's custom card page and tell you that the "Card does not exist".

".slice(47)" deletes the first 47 characters of the duelingbook custom card image url, while ".slice(0, -4)" deletes the last 4 characters of the duelingbook custom card image url, and just leaves you with the actual custom card id itself. Since all custom card image url's start with "https://www.duelingbook.com/images/custom-pics/" (which are the first 47 characters of the url) and end in ".jpg" (which are the last 4 characters of the url) what will happen is ".slice(47)" deletes the "https://www.duelingbook.com/images/custom-pics/" part while ".slice(0, -4)" deletes the ".jpg" part. You know that "https://www.duelingbook.com/images/custom-pics/" contains exactly 47 characters without even having to count each character, since copying and pasting it to https://wordcounter.net/character-count gives you that number.



This is the last part of the code:
, '_blank');
This tells the browser to open up the link in a new tab. The comma is necessary before the apostrophe, so that the code knows not to add any more characters to the url. Alternatively, if you do not wish to open it up in a new tab, and instead want it open it up in the current tab, you can replace , '_blank'); with , '_self'); in your code.

This method obviously will not work if your browser does not support Javascript, but if it does, then this is going to be a much faster method than manually copying and pasting custom card id's.

[Christen57]

After doing a bit more research and experimenting with Javascript, I have found a way to get the custom card url for any custom card on duelingbook without ever having to right click the custom card image and inspect it, or having to copy and paste anything. This is as simple as hovering your mouse over the custom card in the Deck Constructor to make it appear on the upper left side of your screen, and then clicking on a bookmark with a line of Javascript code that will take you straight to that custom card's url page.

This is even faster than the above method that previously involved right-clicking a custom card image, inspecting it, going to that custom card's image page, and clicking a bookmark to run a specific line of code to bring up the custom card page.

Here is what needs to be done.

First off, just like before, you need to make sure that both "JavaScript" as well as "Pop-ups and redirects" are enabled/allowed on duelingbook.

Secondly, just like before, you need to create a bookmark (or edit any already-existing bookmark that you may have) and give it any name you want, but this time, you will copy and past this into the box that says "URL":

javascript:window.open('https://www.duelingbook.com/card?id='+document.querySelector(".pic").currentSrc.slice(47).slice(0, -4), '_blank');

Then you click "Save" to save it, just like before, and that's it. Now, when you want to go straight to the custom card's page, you simply hover your mouse over the custom card to make it appear on the upper left side of your screen...



Click on your new bookmark with your new line of Javascript code...



Then you are taken straight to the custom card's page!



No more having to do all those unnecessary things like right clicking stuff, inspecting elements, and copying and pasting a bunch of stuff. All you need is a bookmark with that line of code in it, and with the click of a mouse, you can go straight to the custom card's page, without having to go though all of those other unnecessary steps.

Do keep in mind, however, that this currently only works in the Deck Constructor. It unfortunately does not work in actual duels or in solo mode. To get the custom card images and url's for custom cards in duels and in solo mode, you will have to instead go through the steps in the previous post. Trying to do this method in duels or in solo mode will instead, for some reason, cause the bookmark to take you to the page of the custom card with the custom id "22554" no matter what custom card was actually being displayed on the upper left corner of your screen.

This new line of code:
javascript:window.open('https://www.duelingbook.com/card?id='+document.querySelector(".pic").currentSrc.slice(47).slice(0, -4), '_blank');
is similar to the previous line of code that I gave in the previous post, which was:
javascript:window.open('https://www.duelingbook.com/card?id='+window.location.href.slice(47).slice(0, -4), '_blank');

The different between the two is that "window.location.href" has been replaced with "document.querySelector(".pic").currentSrc" which tells the browser to automatically "Inspect" the page, search for the custom card image url of the custom card that is currently being displayed on the upper left corner of the screen which is stored by duelingbook in what is known as an "HTML Image Element" called "pic" and then go to the "currentSrc" of that element, which contains the custom card id and image url for that custom card currently being displayed on the upper left corner of the screen, so you don't have to.

Then, like before, it takes the url (which was, in this case, "https://www.duelingbook.com/images/custom-pics/100287.jpg"), deletes the first 47 characters of that url which is "https://www.duelingbook.com/images/custom-pics/" (so you are left with "100287.jpg"), then also deletes the last 4 characters (which is ".jpg" so you are left with just the custom card id, "100287"), and then takes the remaining custom card id and adds it to the end of "https://www.duelingbook.com/card?id=" before taking you straight to that page in a new tab.

And that's it! Until some genius comes along and finds a much faster and easier way to get the url, and get to the custom card page, of any custom card in the Deck Constructor, this is officially going to be the quickest and easiest way to get to the custom card page of any custom card in the Deck Constructor, assuming of course that your browser supports Javascript, and allows pop-ups and redirects on duelingbook.

[BrainStone]

Could you please use a larger font. It's so hard to read

[/irony]

[Christen57]

Could you please use a larger font. It's so hard to read

[/irony]

Duelingbook's forum unfortunately does not allow fonts bigger than 200. I'm terribly sorry.

However, you can make the text on your screen even bigger by clicking the three dots on the top right corner of your screen and zooming in.

[Christen57]

Alright. After doing just a little bit more research, experimenting, and testing with Javascript, I figured out how to make it so that you can obtain the url for any individual public custom card with just the click of a mouse, both in the Deck Constructor as well as in duels themselves and in solo mode. Not only did the previous method in my previous comment work only in Deck Constructor and not in duels themselves or in solo mode, but there was a major flaw in the way that I wrote that code in that previous post which made it so that you could not obtain the url for public custom cards that had their artworks updated multiple times. Then, the bookmark, when clicked, would instead give you the wrong url or no url at all or something.

All you have to do is the same thing you did before, make sure "JavaScript" and "Pop-ups and redirects" are both enabled/allowed on duelingbook, then create a new bookmark, or edit any already-existing bookmark you may have, give it any name you want if you didn't already, and then, this time, copy and paste this into the box that says "URL":

javascript:window.open(('https://www.duelingbook.com/card?id='+document.getElementById("preview").getElementsByClassName("pic")[0].currentSrc.slice(0, document.getElementById("preview").getElementsByClassName("pic")[0].currentSrc.search(".jpg")).slice(47)), '_blank');

Then, just like before, you will click "Save" to save it, hover your mouse over any custom card in the Deck Constructor, solo mode, or in a duel in order to have it displayed on the upper left corner of the screen, and then click on that new bookmark that you just saved, with the line of code that you just copied here and pasted there in that box that said "URL".

If done correctly, you should be taken to that custom card's page.

Trying to pull this off with a non-custom card will cause the bookmark to take you to a page of a completely random card, and clicking on that bookmark outside of the duelinbook website will simply cause the code to fail to run, and nothing will happen, since the code was specifically written to work on duelingbook and no other site.

Let me explain how this brand new updated code works, and compare it to the original code.

This is the brand new updated code:
javascript:window.open(('https://www.duelingbook.com/card?id='+document.getElementById("preview").getElementsByClassName("pic")[0].currentSrc.slice(0, document.getElementById("preview").getElementsByClassName("pic")[0].currentSrc.search(".jpg")).slice(47)), '_blank');

and this is the original code:
javascript:window.open('https://www.duelingbook.com/card?id='+document.querySelector(".pic").currentSrc.slice(47).slice(0, -4), '_blank');

As you can see, in the brand new updated code, "querySelector(".pic").currentSrc.slice(47).slice(0, -4)" has been replaced with "getElementById("preview").getElementsByClassName("pic")[0].currentSrc.slice(0, document.getElementById("preview").getElementsByClassName("pic")[0].currentSrc.search(".jpg")).slice(47))"

The original code, when ran, would automatically inspect the duelingbook page and look for the first loaded HTML Image Element named "pic" which would contain a card image url, then open up a blank duelingbook card page ("duelingbook.com/card?id=") and insert the id of that image url at the end of the link to try and take the user to that card page.

However, this original code would not work on custom cards in the Deck Constructor that had their images updated multiple times, and would not work properly on any custom card in duels or in solo mode.

When I wrote that original code and tested in on those 2 cards (the effect monster that said "Hey mom am I famous already" and the pendulum xyz monster that said "touch its special area to gain 1000 LP and herpies"), I assumed, because it worked on those 2 cards, that my work was done, and that it would work on all of the other public custom cards without any issue.

However, after testing that code on custom cards that had their artworks updated multiple times, I found out that the only reason it worked on those 2 cards that I tested it on that it worked on, was because their artworks were never updated, and that the code would not work properly on custom cards that had their artworks updated multiple times.

This was because when you update the artwork for any of your custom cards, the "currentSrc" of the HTML Image Element containing the link to the image of that custom card would also update so that "?version=" followed by a number would automatically be added to the end of the custom card image url, so instead of the url simply ending in ".jpg" it would end in ".jpg?version=" followed by a number to show what "version" of the image that card now has. This would result in that original code not working properly since it was supposed to remove the last 4 characters of the url, which, I assumed would always be ".jpg" since those were both the last 4 characters of the image url for those 2 custom cards that I tested the code on. This meant that, instead of just getting the custom card id itself, the code would also sometimes get the custom card id along with something like "?versi" and mix that up with the custom card id to mess up the link and ultimately mess up the code.

Now, with the brand new updated code, instead of clearing the last 4 characters to try and get the custom card id by itself, it will now search for the part of the code that says ".jpg" and clear that part, and everything after that if there is anything else after that to clear, so it will now always be left with the custom card id itself, and will not be left with anything else that has nothing to do with the actual custom card id.

There was another problem, however, with the original code that made it not work properly in duels or in solo mode.

Remember when I said earlier that the original code would "look for the first HTML Image Element" with the name "pic" that it could find?

Well, the reason I made it that way was because I assumed that the first loaded HTML Image Element would always be the one that contained the custom card image url for the custom card that was currently being displayed on the upper left corner of the screen, simply because that was what was the case in the Deck Constructor. However, what I didn't know, and what caused the code to ultimately not work properly in duels or in solo mode, was that, in duels and in solo mode, there are always multiple simultaneously-loaded HTML Image Elements with the name "pic" and, for some reason, regardless of whether or not you had the custom card that you wanted to get the url to displayed on the upper left corner of the screen, duelingbook likes to change the order in which these loaded HTML Image Elements appear, which is why simply picking the first HTML Image Element the code sees and going with that wasn't the smartest thing for me to make the code do, because it would then result in the code grabbing the wrong HTML Image Element with the wrong url that you did not want.

I needed a way to get the code to look specifically for the HTML Image Element that contained the image url of the custom card currently being displayed on the upper left corner of the screen, not just any HTML Image Element or just the first one that came up. That is when I discovered that the HTML Image Element containing the image url of the custom card currently being displayed on the upper left corner of the screen is always going to be stored within what is known as an "HTML DOM Div Object" with the id, "preview". Not only that, but there would never be another HTML DOM Div Object with the id, "preview" which meant that I would not have to worry about the code accidentally stumbling across a different HTML DOM Div Object with that specific id during it's search.

Now, instead of simply looking for the very first HTML Image Element named "pic" that it can find, and using that, the brand new updated code will look specifically for the very first HTML Image Element named "pic" that is stored inside of the HTML DOM Div Object with the id, "preview" since that is what is always guaranteed to contain the image url of the custom card currently being displayed on the upper left corner of the screen no matter what. From there, it will do what it's always done, which is to filter out the parts of the url that is not the id until it is left with the raw id, then add that to a blank duelingbook custom card page url to load the custom card.

Now you can finally obtain the url for any public custom card on duelingbook with just the click on a mouse, whether you're in the Deck Constructor, in solo mode, or in a duel, regardless of whether or not that custom card had it's image updated or not!

[Christen57]

I don't know exactly when or why this happened, but duelingbook has been updated so that custom card image URLs now begin with "https://www.duelingbook.com/images/custom-pics/" followed by some random 6 to 7-digit numbers, followed by the forward slash symbol (which is "/"), followed by the custom card id, instead of just "https://www.duelingbook.com/images/custom-pics/" followed by the custom card id.

This means that a custom card image URL that was once, for example, "https://www.duelingbook.com/images/custom-pics/100287.jpg" is now "https://www.duelingbook.com/images/custom-pics/100000/100287.jpg".

This now means that the previous javascript code for obtaining the URL for any public custom card, which was "javascript:window.open(('https://www.duelingbook.com/card?id='+document.getElementById("preview").getElementsByClassName("pic")[0].currentSrc.slice(0, document.getElementById("preview").getElementsByClassName("pic")[0].currentSrc.search(".jpg")).slice(47)), '_blank');" no longer works.

So I must update the code once again so it grabs the correct custom card id and takes you to "https://www.duelingbook.com/card?id=" followed by the custom card id to bring you to that custom card's page.

Here is the new javascript code, updated to work with this new duelingbook update, that will open up the custom card page of any custom card on duelingbook that has an image. Like always, make sure pop-ups and redirects are allowed on duelingbook, make sure javascript is allowed on duelingbook, then create a new bookmark, and in the "URL" box, copy and paste the following code:

javascript:window.open(('https://www.duelingbook.com/card?id='+document.getElementById("preview").getElementsByClassName("pic")[0].currentSrc.slice(0, document.getElementById("preview").getElementsByClassName("pic")[0].currentSrc.search(".jpg")).slice(document.getElementById("preview").getElementsByClassName("pic")[0].currentSrc.lastIndexOf("/")+1)), '_blank');

Click "Save" to save it, then hover your mouse over any custom card to make it appear on the top left corner of your screen, and then click your bookmark to have it take you straight to that custom card's page in a new tab.

This new code has been updated so that, instead of simply deleting the first 47 characters of the custom card image URL (which was always "https://www.duelingbook.com/images/custom-pics/"), the code will now search the custom card image URL for the very last forward slash symbol (which is "/"), delete it (which I've noticed always has the custom card id right after it) and all characters before it, then search the rest of the custom card image URL for ".jpg" and then delete that, as well as everything after it, so it is left with the raw custom card id, then it will do what it has always done, which is open up a new page in a new tab that starts with "https://www.duelingbook.com/card?id=" and ends in the custom card id, thus taking you, once again, to the custom card's page.

From there, you can click the custom card image itself to be taken to the custom card image page in another new tab.

[Christen57]

I have updated the code once again, fixing an error where, on some browsers such as Mozilla Firefox, if you clicked the javascript bookmark with the old code, your current tab would close out when opening a new tab with the custom card URL. For anyone using any of those kinds of browsers, this is the code that should be used:

javascript:window.open(('https://www.duelingbook.com/card?id='+document.getElementById("preview").getElementsByClassName("pic")[0].currentSrc.slice(0, document.getElementById("preview").getElementsByClassName("pic")[0].currentSrc.search(".jpg")).slice(document.getElementById("preview").getElementsByClassName("pic")[0].currentSrc.lastIndexOf("/")+1)), '_blank');undefined;

[greg503]

Come to think of it, why do you use large font in your posts?

[Christen57]

Come to think of it, why do you use large font in your posts?

To make certain things easier to see and read, especially on smaller screens.