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:
Add Reply
  • Pages:
  • 1
Transfer Image Macros via Web Developer Tools
Topic Started: Nov 30 2011, 02:26 AM (8,289 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.
Online Profile Quote Post Goto Top
 
Quozzo
Member Avatar
By the blood of Sanguinius!
[ *  *  *  *  * ]
Thats a good tut, and using the console isn't limted to what the user already has installed, if there is a standard that people can adopt then its possible to run a script that will allow images to be inserted automagically, something like
Code:
 
$.getScript("http://scripturl.js",function(){
var images = [
["Hot topic","http://imageurl.jpg"],
["Hot Topic (no new posts)","http://imageurl.png"]
];
});

but with the advent of the RBD i doubt it would be used very often.
Offline Profile Quote Post Goto Top
 
NikonD3X-ZNR
Member Avatar
Member
[ * ]
BRAVO!

Took me an hour to figure it out lol, but now I'm clued up this has and will save me oodles of time in future! Thanks Cory :cool:

NikonD3X
Edited by NikonD3X-ZNR, Oct 2 2012, 03:16 PM.
Offline Profile Quote Post Goto Top
 
1days
Member Avatar
Member
[ *  *  * ]
Did it! I can't believe it. :D Thanks Cory!
Offline Profile Quote Post Goto Top
 
Helena
Member Avatar
M is for Mod

A code that allows you to similarly transfer images on InvisionFree/zIFBoards can be found in this topic by MetaIng: http://support.zathyus.com/topic/5186832
Offline Profile Quote Post Goto Top
 
Chelonian
Member
[ *  *  * ]
Is this from theme to theme only or can it be used to install theme images from zip?
Offline Profile Quote Post Goto Top
 
-The-
Member Avatar
#the { display: none; }
[ *  *  *  *  * ]
It's not from a zip file; the tool uses all the data that would be present were it uploaded to a ZB forum. An HTML macro page which has been attached to the theme topic emulates this data, so the tool can work easily.
Offline Profile Quote Post Goto Top
 
Chelonian
Member
[ *  *  * ]
-The-
Oct 28 2016, 02:22 AM
It's not from a zip file; the tool uses all the data that would be present were it uploaded to a ZB forum. An HTML macro page which has been attached to the theme topic emulates this data, so the tool can work easily.
The images for themes come in zip files.
Offline Profile Quote Post Goto Top
 
-The-
Member Avatar
#the { display: none; }
[ *  *  *  *  * ]
Chelonian
Oct 28 2016, 05:05 AM
-The-
Oct 28 2016, 02:22 AM
It's not from a zip file; the tool uses all the data that would be present were it uploaded to a ZB forum. An HTML macro page which has been attached to the theme topic emulates this data, so the tool can work easily.
The images for themes come in zip files.
Not necessarily. The recent trend, based entirely on this system of course, is to set up an HTML macro page for themes. The image macro page is a page which contains the URLs to the images already - they've been hosted for you. A zip file provides a download for all the files where you yourself have to host them. The zip file is the trusty old workhorse that is still present on most themes, although Helena has been updating some of the best themes to HTML macro pages. An example would be: http://z3.ifrm.com/28122/87/0/p523769/ImagiNationImageMacros.html
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Besides, I don't think it's possible to transfer images from a ZIP file to a webpage with JavaScript alone.
Online Profile Quote Post Goto Top
 
Chelonian
Member
[ *  *  * ]
The themes I've wanted to use all have zip files still hence why I asked. I haven't seen any themes, personally, with macro pages.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
There's little to none in comparison to how many themes are on this forum, but Helena usually adds them for themes that win the Member's Choice Theme. I was going to make it a project to create the pages myself, but have abandoned it.

If you wanted an option to transfer images from a ZIP file to the image macros page, then suggest it in your suggestions topic.
Online Profile Quote Post Goto Top
 
Helena
Member Avatar
M is for Mod

I'm happy to put up an image macros page for any of the themes that have won TOTM that don't have them yet if people let me know they want them.
Offline Profile Quote Post Goto Top
 
Chelonian
Member
[ *  *  * ]
One of the Halloween themes that one recently has no macro. Spooky it's called.
Offline Profile Quote Post Goto Top
 
Gaomon274
Member Avatar
Member
[ *  *  *  * ]
Here's the one for Spooky.
http://z1.ifrm.com/0/1/0/p412114/SpookyImageMacros.html

It was in the thread's replies instead of the original post.

Team Icons are also here:
http://support.zathyus.com/single/?p=18077549&t=5196088


Hope that helps. ^_^
Edited by Gaomon274, Oct 30 2016, 01:16 PM.
Online Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Theme Tricks · Next Topic »
Add Reply
  • Pages:
  • 1