[CB] Transfer Images to Other Skins

[Jordan Reposter]

Code by Jordan

Tested in FireFox, Internet Explorer, and Opera.

If you have ever wanted to use the same images on multiple skins or transfer them over to a test forum, you know that it can be a pain transferring them all over by hand. Fortunately, this will do it for you.



The code should be self explanatory after looking at the preview above (notice the two new sentences at the bottom of the image), but if you need step by step instructions, read the below paragraph.

Go to the "Customize Images" page in your administration panel, choose the skin you want to copy, and then click the first link from the two added sentences under the sentence that says "If you wish to reset all of your images back to their defaults, click here". Once you have copied the code from the pop up message, the script will redirect you to the skin selection page where you can choose the skin that you want to update. This time, click the second link in the header section of the page, insert the code you copied into the pop up, and then a table will appear listed with all the different categories for the images. Whatever is checked will be updated when you hit the "Update Images" button.

If you have any questions or find errors, please make a thread in the code support board.

Enjoy.

Main Footers

<script type="text/javascript"><!--

/*
* Transfer Images to Other Skins
* Created by Triad
* support.proboards.com
*/

function image_handler(){

      this.tb = null;

      this.status = true;

      this.arr = [];

      if(location.href.match(/action=boardimages/i) && document.title.split(" - ")[1] != "Admin Home")
            this.init();

}

image_handler.prototype.create_copy = function(){

      var _str = "";

      for(var form = document.getElementsByTagName("form"), i = 0; i < form.length; i++){
            if(form.action.match(/action=boardimages2/i)){
                  for(tb = form.getElementsByTagName("table"), a = 1; a < tb.length; a++){
                        if(tb.cellPadding == 4){
                              _str += tb.rows[0].cells[0].firstChild.firstChild.firstChild.data.replace(/\s/g, "0").replace(/\./g, "1") + "|";
                              for(input = tb.getElementsByTagName("input"), x = 0; x < input.length - 1; x++){
                                    if(input[x].value.match(/(\||\[)/i)){
                                          alert("Error: The URL shown below from the " + tb.rows[0].cells[0].firstChild.firstChild.firstChild.data.toUpperCase() + " section cannot contain a | or [ character while using this code. If this was not a typo, please remove these characters from the URL at your image host.\n\n" + input[x].value);
                                          return true;
                                    }
                                    _str += (input[x].value.length > 0) ? input[x].value : "http://";
                                    if(x + 1 < input.length - 1) _str += "[";
                              }
                              _str += "|";
                        }
                  } break;
            }
      }

      if(prompt("Copy the text below and click \"OK\" to be redirected to skin selection page.", _str))
            location.href = "/index.cgi?action=skinsimages&images=1";
}

image_handler.prototype.update_images = function(){
      for(var form = document.getElementsByTagName("form"), i = 0; i < form.length; i++){
            if(form.action.match(/action=boardimages2/i)){
                  for(var name = "", tb = form.getElementsByTagName("table"), a = 1; a < tb.length; a++){
                        if(tb.cellPadding == 4){
                              name = tb.rows[0].cells[0].firstChild.firstChild.firstChild.data.replace(/\s/g, "0").replace(/\./g, "1");
                              for(input = tb.getElementsByTagName("input"), x = 0; x < input.length - 1; x++){
                                    if(image_handler.arr[name]){
                                          if(document.getElementById(name).checked == true)
                                                input[x].value = image_handler.arr[name][x];
                                    } else {
                                          alert("You're images could not be updated. Please make sure you entered a valid input string.");
                                          return true;
                                    }
                              }
                        }
                  } if(confirm("Your images have been successfully updated. Press \"OK\" to save the page.")) form.submit(); return true;
            }
      }
}

image_handler.prototype.create_element = function(_element, _property){

      _element = document.createElement(_element);

      if(_property){
            for(x in _property){
                  switch(x){
                        case "style":
                              for(y in _property[x])
                                    _element.style[y] = _property[x][y];
                                    break;

                        case "append":
                                    _element.appendChild(_property[x]);
                                    break;

                        case "text":
                                    _element.appendChild(document.createTextNode(_property[x]));
                                    break;

                        default:
                              _element[x] = _property[x];
                  }
            }
      }

      return _element;
}

image_handler.prototype.create_table = function(){

      var _str = prompt("Please paste the code you previously copied into the text box below.", "");

      if(_str){
            _str = _str.split("|");

            if(_str.length > 1){

                  var _td_1, _td_2, _table = image_handler.create_element("table", {
                        id: "image_table",
                        width: "15%",
                        cellSpacing: 1,
                        cellPadding: 4,
                        className: "bordercolor",
                        append: image_handler.create_element("tbody", false),
                        style: {
                              margin: "20px 0px 20px 0px"
                        }
                  });

                  for(a = 0; a < _str.length - 1; a = a + 2){

                        var url = _str[a+1].split("[");
                        image_handler.arr[_str] = new Array(url.length);

                        _td_1 = image_handler.create_element("td", {
                              className: "windowbg",
                              width: "1%",
                              align: "center",
                              vAlign: "middle",
                              append: image_handler.create_element("input", {
                                    type: "checkbox",
                                    checked: true,
                                    id: _str
                              })
                        });

                        _td_2 = image_handler.create_element("td", {
                              className: "windowbg",
                              width: "99%",
                              vAlign: "middle",
                              text: _str.replace(/0/g, " ").replace(/1/g, ".")
                        });

                        _table.firstChild.appendChild(document.createElement("tr"));
                        _table.firstChild.lastChild.appendChild(_td_1);
                        _table.firstChild.lastChild.appendChild(_td_2);

                        for(x = 0; x < url.length; x++)
                              image_handler.arr[_str][x] = url[x];
                  }

                  var _input = image_handler.create_element("input", {
                        type: "button",
                        value: "Update Images",
                        onclick: function(){
                              image_handler.update_images();
                        }
                  });

                  if(image_handler.status){
                        image_handler.tb.rows[1].cells[0].firstChild.appendChild(_table);
                        image_handler.tb.rows[1].cells[0].firstChild.appendChild(_input);
                  } else
                        image_handler.tb.rows[1].cells[0].firstChild.replaceChild(_table, document.getElementById("image_table"));

                  image_handler.status = false;

                  if(document.all){
                        for(key in image_handler.arr)
                              document.getElementById(key).checked = true;
                  }
            } else {
                  alert("You entered an invalid string. Please make sure all of it was copied correctly.");
                  return true;
            }
      } else
            return true;
}

image_handler.prototype.create_sentence = function(_func, _sentence){

      var _a = document.createElement("a");
            _a.href = "JavaScript: void(0);";
            _a.appendChild(document.createTextNode("click here"));
            _a.onclick = function(){
                  _func();
            }

      var _div = document.createElement("div");
            _div.appendChild(document.createTextNode(_sentence));
            _div.appendChild(_a);
            _div.appendChild(document.createTextNode("."));

      this.tb.rows[1].cells[0].firstChild.appendChild(_div);

}

image_handler.prototype.init = function(){
      for(var tb = document.getElementsByTagName("table"), a = 2; a < tb.length; a++){
            if(tb[a-2].width == "92%" && tb[a-1].className == "bordercolor" && tb.cellPadding == 4 && tb.rows[0].cells[0].innerHTML.match(/Board Images/i)){

                  tb.rows[1].cells[0].firstChild.appendChild(document.createElement("br"));
                  tb.rows[1].cells[0].firstChild.appendChild(document.createElement("br"));

                  this.tb = tb;

                  this.create_sentence(
                        this.create_copy,
                        "To quickly create a copy of all these images for another skin, "
                  );

                  this.create_sentence(
                        this.create_table,
                        "To quickly update these images from another skin, "
                  );

                  break;
            }
      }
}

var image_handler = new image_handler();

//--></script>

[iPokemon]

Accepted

[style=-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px; background-color: rgba(0,0,0,0.9);padding: 6px;display:inline;color:white;font-weight:bold;]Thank you for your submission! It will be archived in our index!

[/style]