Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Multiquote (on) Multiquote (off)
Add Reply
Transfer Image Macros via Web Developer Tools
Topic Started: Nov 30 2011, 02:26 AM (8,159 Views)
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
The JavaScript and methods in this topic were introduced by Reid and are being posted as a tutorial with his permission.

This method allows you to access the Edit Theme Images panel of your board and transfer these images to a different Edit Theme Images panel with a web developer console and JavaScript in the case you are transferring images from one board to another. This requires you have ACP access to both the source board and the destination board.

This requires you to use a web developer tool that can run JavaScript.

Chrome: Chrome Developer Tools
Firefox: Web Console, Firebug
Internet Explorer: F12 Developer Tools
Opera: Opera Dragonfly
Safari: Safari Developer Tools

With the exception of Firebug (an extension), those all come default with their browser.

Open up the following page in a tab/window for the theme you are transferring images from and the theme you are transferring images to.

Admin CP Posted Image Themes Posted Image Themes Posted Image Edit Theme Images Posted Image Edit Images (All Images)

From the Edit Theme Images page you are transferring images from, open up your web developer tool and head to the Console tab. Generally most consoles have a input area that you can input JavaScript in and run it on the page you are currently on, once you think you've found the input area you can insert and run the following JavaScript to determine if it works properly.
Code:
 
alert('test')
You'll know it'll work because an alert will come up with the text 'test'. You can then proceed with the transfer images with JavaScript process.

Remove the alert JavaScript you added and copy and paste the following JavaScript into the input area.
Code:
 
var k = [];
$('textarea[name^=img_]').each(function () {
k.push([this.name, this.value.replace(/\n/g, "{{n}}").replace(/"/g, "'")]);
});
k = k.join("||");
alert('"' + k + '"');
When you run the code you should receive a long block of text in a popup. Copy (Ctrl + C) the long block of text produced with the quotation marks included.

Now go to the Edit Theme Images page you wish to transfer the images to. Ensure you are at the same destination noted above. Go back into the console and insert the following line (do not copy and paste since you have the current text copied):
Code:
 
k = LONG_BLOCK_OF_TEXT_HERE;
Replace the capitalized text with the long text you copied previously. Paste the following JavaScript below what is inserted (after the semicolon):
Code:
 
k = k.split('||');
$.each(k, function () {
$('textarea[name*=' + this.split(',')[0] + ']').val(this.split(',')[1].replace(/\{\{n\}\}/g, "\n"));
});
After you run the JavaScript the image URLs from your other board should now be properly transferred to the board you just ran the codes on.
Note From Reid
 
Also note that that script is not bulletproof
if you have some images that contain "||" then it may break something
same with the comma
so if you know of a theme that uses || or commas in its images, you might want to be on the lookout
Edited by Cory, Jun 12 2013, 11:46 PM.
Offline Profile Quote Post Goto Top
 
Replies:
Chelonian
Member
[ *  * ]
I'm trying to do this for ZetaFresh Mobile but "Invalid or unexpected token" occurs once I press Enter after inputting all the final coding in the console area.
Offline Profile Quote Post Goto Top
 
Helena
Member Avatar
M is for Mod

Try using this [long block of text]:

Be sure to preface it with:

k =

Code: Images for ZetaFresh Mobile
 
"img_0_0,<span style='font-weight: 700'>|</span>||img_0_1,||img_0_2,||img_0_3,||img_0_4,<span class='static'><img src='http://z5.ifrm.com/30296/50/0/p1140640/postbtnOrange.png'/> Report</span>||img_0_5,<img src='http://z5.ifrm.com/30296/50/0/p1127206/Davatar.png' style='padding-top:5px' alt='Default Avatar' class='member' vspace='5' />{{n}}||img_0_6,<img src='http://z5.ifrm.com/30296/50/0/p1270618/pip.png' alt=' * ' />||img_0_7,||img_0_8,||img_0_9,<img src='http://z5.ifrm.com/30296/50/0/p1140638/postbtnBlue.png' alt='Folder' />||img_0_10,||img_0_11,||img_0_12,<img src='http://z5.ifrm.com/30296/50/0/p1156735/doc.png' alt='Upload' />||img_0_13,||img_0_14,||img_0_15,<span class='static'><img src='http://z5.ifrm.com/30296/50/0/p1140638/postbtnBlue.png'/> Forward</span>||img_0_16,<img src='http://z5.ifrm.com/30296/50/0/p1155973/Uacp2.png' alt='ACP' />||img_0_17,<img src='http://z5.ifrm.com/30296/50/0/p1155974/Urcp.png' alt='RCP' />||img_0_18,<img src='http://z5.ifrm.com/30296/50/0/p1155975/Upmmenu.png' alt='PM' />||img_0_19,<img src='http://z5.ifrm.com/30296/50/0/p1155956/Uprefs.png' alt='Prefs' />||img_0_20,<img src='http://z5.ifrm.com/30296/50/0/p1155112/events.png' alt='Events' />||img_0_21,<img src='http://z5.ifrm.com/30296/50/0/p1155113/stats.png' alt='Stats' />||img_0_22,<img src='http://z5.ifrm.com/30296/50/0/p1155114/users.png' alt='Active' />||img_0_23,<img src='http://z5.ifrm.com/30296/50/0/p1127318/expand.png' alt='+' />||img_0_24,<img src='http://z5.ifrm.com/30296/50/0/p1127317/collapse.png' alt='~' />||img_0_25,<img src='http://z5.ifrm.com/30296/50/0/p1155622/attach.png' alt='Attachment' />||img_0_26,||img_1_0,<img src='http://z5.ifrm.com/30296/50/0/p1154469/3new.png' alt='Regular Forum' />||img_1_1,<img src='http://z5.ifrm.com/30296/50/0/p1154480/3nonew.png' alt='Regular Forum (No New Posts)' />||img_1_2,<img src='http://z5.ifrm.com/30296/50/0/p1155116/passprotect.png' alt='Password Protected Forum' />||img_1_3,<img src='http://z5.ifrm.com/30296/50/0/p1154488/readonly.png' alt='Read-only Forum' />||img_1_4,<img src='http://z5.ifrm.com/30296/50/0/p1154481/redirect.png' alt='Redirect Forum' />||img_1_5,<img src='http://z5.ifrm.com/30296/50/0/p1155115/trash.png' alt='Trash' />||img_2_0,<span class='t_icon'>New Topic</span>||img_2_1,<span class='t_icon'>Add Reply</span>||img_2_2,<span class='t_icon'>Locked</span>||img_2_3,<span class='t_icon'>Poll Only</span>||img_2_4,<span class='t_icon' style='margin-left: 15px'>+Repeat </span>||img_2_5,<span class='t_icon'>+Event</span>||img_3_0,<img src='http://z5.ifrm.com/30296/50/0/p1134158/TSnew.png' alt='Regular' />||img_3_1,<img src='http://z5.ifrm.com/30296/50/0/p1134159/TSnonew.png' alt='Regular (No new posts)' />||img_3_2,<img src='http://z5.ifrm.com/30296/50/0/p1134160/TShotnew.png' alt='Hot Topic' />||img_3_3,<img src='http://z5.ifrm.com/30296/50/0/p1134161/TShotnonew.png' alt='Hot Topic (No new posts)' />||img_3_4,<img src='http://z5.ifrm.com/30296/50/0/p1134162/TSpollnew.png' alt='Poll' />||img_3_5,<img src='http://z5.ifrm.com/30296/50/0/p1134163/TSpollnonew.png' alt='Poll (No new posts)' />||img_3_6,<img src='http://z5.ifrm.com/30296/50/0/p1134168/TSclosed.png' alt='Locked' />||img_3_7,<img src='http://z5.ifrm.com/30296/50/0/p1134164/TSmoved.png' alt='Moved' />||img_3_8,<img src='http://z5.ifrm.com/30296/50/0/p1155307/replied.png' alt='Replied' />||img_4_0,<!-- <span class='static'><img src='http://z5.ifrm.com/30296/50/0/p1140639/postbtnRed.png'/> X</span> -->||img_4_1,<span class='static'><img src='http://z5.ifrm.com/30296/50/0/p1140638/postbtnBlue.png'/> Edit</span>||img_4_2,<span class='static'><img src='http://z5.ifrm.com/30296/50/0/p1140638/postbtnBlue.png'/> Quote</span>||img_4_3,<span class='static' > QQ</span>||img_4_4,<span class='active'>QQ</span>||img_4_5,<span class='online' style='color:#4EB715'>ON</span>||img_4_6,||img_4_7,<span class='offline' style='color:#6272A8'>OFF</span>||img_4_8,||img_4_9,||img_5_0,<img src='http://z5.ifrm.com/30296/50/0/p1184078/warn0.gif' alt=' 0 ' />||img_5_1,<img src='http://z5.ifrm.com/30296/50/0/p1184079/warn1.gif' alt='1' />||img_5_2,<img src='http://z5.ifrm.com/30296/50/0/p1184080/warn2.gif' alt='2' />||img_5_3,<img src='http://z5.ifrm.com/30296/50/0/p1184081/warn3.gif' alt='3' />||img_5_4,<img src='http://z5.ifrm.com/30296/50/0/p1184082/warn4.gif' alt='4' />||img_5_5,<img src='http://z5.ifrm.com/30296/50/0/p1184083/warn5.gif' alt='5' />||img_5_6,<img src='http://z5.ifrm.com/30296/50/0/p1184144/warnIncrease.png' alt='Increase' />||img_5_7,<img src='http://z5.ifrm.com/30296/50/0/p1184145/warndecrease.png' alt='Reduce' />||img_5_8,<img src='http://z5.ifrm.com/30296/50/0/p1184146/warnNote.png' alt='Warning Note' />||img_5_9,<img src='http://z5.ifrm.com/30296/50/0/p1184146/warnNote.png' alt='Note' />||img_5_10,<img src='http://z5.ifrm.com/30296/50/0/p1184102/warnUp.png' alt='Up' />||img_5_11,<img src='http://z5.ifrm.com/30296/50/0/p1184103/warnDown.png' alt='Down' />"
Offline Profile Quote Post Goto Top
 
Chelonian
Member
[ *  * ]
Ok, that worked, thanks. But for some reason the theme doesn't look like this at all:

Posted Image
Offline Profile Quote Post Goto Top
 
Helena
Member Avatar
M is for Mod

Your board isn't reading the CSS (code in Theme Appearance). You might try reinstalling it.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Theme Tricks · Next Topic »
Add Reply