Tumblr Automatic Insertion of Image Caption Base Upon Image File Name? - Example Script I Use on Blogger to Do This

Question

On Blogger I use the following script to automatically insert image captions.

The caption is file name of the image less the image extension and the added "_w". The "_w" is added by a bulk watermark app to denote the watermarked version of image.

The script also adds "Figure " before the name.

Thus a image named "1-0-1_w.jpg" would be automatically captioned "Figure 1-0-1".

Is there a way to to do this on Tumblr?

I use both text posts with images inserted and image posts.

<script type='text/javascript'>
//<![CDATA[

function addCaption(img) {
  var ele=$(img);
  if(ele.parent().is(".caption-wrap")) return;
  var alter = ele.attr('alt')
  var srcurl = ele.attr('src')
  var altsrc = ""  
  altsrc = srcurl + "*" + alter;
  var title=altsrc
  if(typeof title === "undefined" || title=="") return;
  if(ele.parent().is("a")) ele=ele.parent();
  var align=ele.attr("align");
  if(!align) align=ele.css("float");
  if(align=="") align="none";
  var container=ele.wrap('<div style="display:inline-block" class="caption-wrap '+align+'" />').parent();
  container.css("float", align);
  container.css("width", ele.outerWidth()+"px");
  container.css("margin-left", ele.css("margin-left"));
  container.css("margin-right", ele.css("margin-right"));
  container.css("margin-bottom", ele.css("margin-bottom"));
  ele.css("margin-left", "0px");
  ele.css("margin-right", "0px");
  ele.css("margin-bottom", "0px");
  var begin = title.lastIndexOf("/") + 1;
  var end = title.lastIndexOf(".") - 3;
  var length = end - begin + 1;
  var title = title.substr(begin, length);
  var begin = title.lastIndexOf("*") + 1;
  var title = title.substr(begin);
  var text=container.append('<p class="caption-text">Figure '+title+'</p>').find(".caption-text");
  text.css("width", ele.outerWidth()+"px");
}
// add captions on window.load to img's with class "caption"
$(window).load(function() {
  $("img").each(function() {
    addCaption(this);
  });
});
//]]>
</script>  

I've looked at this page:

https://www.tumblr.com/docs/en/custom_themes

I've searched various terms in Google for automatically adding image captions but have found no documentation or examples of how to modify a Tumblr template.

---

Additional Information:

For a initial test I am creating posts offline using a styled TextEdit template.

The title and main body are separated by a line of equal symbols.

The image captions are styled italic and inserted within the body text as needed.

I then created two Applescripts that I keep on the Desktop onto which I drop a completed post. One AppleScript copies the title to the clipboard for pasting into Tumblr's editor and the other copies the body. The line with the equal symbols is ignored in both cases.

I then insert the images with names matching the captions in the body using Tumblr's editor.

I have not tried creating a MarkDown version of the template to see if that would work any better. Each image insertion requires that a blank line first insert a blank line above the caption to provide space for the insertion of the image. I've tried saving posts using TextEdit with an addition blank line above each caption to eliminate having to manually insert one each time, but Tumblr's editor converts two blank lines into one when copied and pasted from a styled TextEdit document. Not sure if using a MarkText version of template would preserve the two blank lines so as to eliminate a step.

Title Here

=====================

*Figure 2-1-1*

Body Here

---

Also very strange, but you also can't paste tags into Tumblr's bulk editor. Pasting a list of tags separated by commas will result in the list being entered as one giant tag.

So to enter a list of tags I created and saved offline I created another AppleScript that I keep on the desktop. I first select the posts that I want to add tags to in Tumblr's bulk editor and then open the small popup window to type them.

I simply drop the TextEdit file with the tags in it onto the Applescript. Applescript then open the file, copies the tags, closes the TextEdit document, and then types them into the Tumblr bulk editor popup window.

You can also double click on the AppleScript to manually choose a file via the Finder, but I find drag and drop is a lot faster.

on run
set the_file to choose file

end run

on open the_files repeat with the_file in the_files wipe_file(the_file) end repeat end open

to wipe_file(file_to_wipe)

set file_to_wipe to POSIX path of file_to_wipe

try
    
    tell application "TextEdit"
        activate
        open file_to_wipe
        
        delay 1
        
        tell application "System Events"
            key code 126 using {command down}
            key code 119 using {shift down}
            keystroke "c" using {command down}
            delay 1
            keystroke "w" using {command down}
        end tell
        
        activate application "Google Chrome"
        tell application "System Events"
            set textToType to the clipboard
            delay 1
            keystroke textToType
        end tell
        
    end tell
    
end try

end wipe_file

---

enter image description here

---

May seem like overkill, but I am trying to eliminate as many steps as possible as this will add up to saving many man hours of time.

I've also adopted a app I previous made to quickly creating alphabetically sorted lists of tags for Zazzle. You can manually enter tags or add them based upon searching within the builtin thesaurus. A lot of the controls seen do not apply to Tumblr as I've not taken the time to strip them out.

---

I recently read a article that stated that Tumblr had removed user injected javascript due to security, but that a blog owner can request to use it on a case-by-case basis.