PDA

View Full Version : Script to Auto Generate Image Captions Based Upon Image File Name in Img Tag?



Placebo
Feb 19th, 2018, 02:57 PM
I host my site on Blogger, but have my own .com domain.

I save my image files using unique names such as 3-1a1 and 3-1a2, which correspond to specific item views.

I wish to use these file names as image captions below images on posts.

I don't want to manually enter each image's caption using Blogger's post editor as this means I am retyping the file names once again.

Each omg within a blog post has a structure similar to this (the UniqueURL1 & UniqueURL2 refer to lengthly bits of random text that are unique to each image)



<img border="0" data-original-height="1067" data-original-width="1600" height="264" src="https://3.bp.blogspot.com/UniqueURL1/UniqueURL2/s400/3-1a1.jpg" width="400" />


I am looking for a script to grab the file name of each image on each post page and place that in a new division below each image. In the above sample code the script would extract 3-1a1 as a caption.

The closest thing I've been able to find to this via Google searches appears on the following site, which does not appear to have shown any new activity since 2013.

Yet Another Blogger Tips Blog: Search results for caption (http://yabtb.blogspot.com/search?q=caption)

This script is inserted into the head section of the blog's template; however, it requires one to each omg tag within a post and set its class as "caption" and set its title, which is used as the caption. This is not truly automatic as it requires the manual generation of the two img attributes, which sort of defeats the purpose of using it.

Can this script be modified to instead grab each image's file name and use those as the captions without the use of the manual insertions of the two omg attributes?



<img class="caption" title="Image title" .......>




<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<style type='text/css'>
.caption-text { clear:both;color:#666;font-size:90%;text-align:center;margin:0 0 6px;padding:3px 0 0; }
</style>
<script type='text/javascript'>
//<![CDATA[
// Add captions to images from title tag
// by MS-potilas 2012. See Yet Another Blogger Tips Blog (http://yabtb.blogspot.com/)
function addCaption(img) {
var ele=$(img);
if(ele.parent().is(".caption-wrap")) return;
var title=ele.attr('title');
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 text=container.append('<p class="caption-text">'+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.caption").each(function() {
addCaption(this);
});
});
//]]>
</script>

DaveyErwin
Feb 20th, 2018, 01:08 PM
<!DOCTYPE html>
<img border="0" data-original-height="1067" data-original-width="1600" height="264" src="
https://www.codingforums.com/images/cf-logo.png" width="400">
inserted text is before this
<script>
var image = document.images;
var newNode;
for (var i=0 ; i < image.length ; ++i ) {
newNode = document.createElement('div');
txt = image[i].src.split('/');
txt = txt[txt.length - 1].split('.')[0];
txtnde = document.createTextNode(txt);
newNode.appendChild(txtnde);
image[i].parentNode.insertBefore(newNode, image[i].nextSibling);
}
</script>