Automatic Captioning

[Mark Pitely]

The Marketing department here asked for something like this, so I developed it.
Make a contentlet with this code, and simply by including it on any page, it will make a caption assuming the image has an Alt.
Images without alt text will be ignored, and it only iterates images in the body.
You could add it to the template, of course.

This means our end users can use the WYSIWYG to add captions by just typing, no need to edit the code.
I thought it might be helpful to others. You may need to change the "yui-main" part to whatever your main container class is.

The code takes the image, then creates a div around it to allow for proper styling.
If the image has a float, it transfers that float to the div it wraps it in.

#if ($EDIT_MODE)
<hr>
CAPTIONER Javascript code to add captions to images on page.
Do not edit this contentlet - contact Web Development if you need any alterations or don't understand why it is on your page!
<hr>
#end

<script>
window.onload = function() {
   
  
  var images = document.getElementById("yui-main").getElementsByTagName("img");
  
    for (var i = 0, image = images[i]; i < images.length; i++) {
      
      if (image.alt){
       
        var wrapper = document.createElement('div');
        var caption = document.createElement('div');
        caption.appendChild(document.createTextNode
    (image.alt));
       
        //Move the Float to the entire display, strip from the image
        if (image.style.cssFloat=="left"){
          wrapper.style.cssFloat = "left";
          image.style.cssFloat="";
        }
         if (image.style.cssFloat=="right"){
          wrapper.style.cssFloat = "right";
          image.style.cssFloat="";
        }

        //Style the Box surrounding the image
        wrapper.style.display="block";
        wrapper.style.marginLeft="10px";
        wrapper.style.marginRight="10px";
        wrapper.style.marginTop="10px";
        wrapper.style.marginBottom="10px";
        wrapper.style.border ="1px solid black";
      
       //Style the Image
        image.style.display="block";
        image.style.marginLeft="auto";
        image.style.marginRight="auto";
        image.style.paddingTop="10px";
        image.style.paddingBottom="10px";
        image.style.paddingRight="10px";
        image.style.paddingLeft="10px";

        //Style the Captioned Text
        caption.style.display="block";
         caption.style.maxWidth=image.width+"px";
        //don't let the caption text run longer than the image- break it into lines, if necessary.
        caption.style.paddingLeft="8px";
        caption.style.paddingRight="8px";
        caption.style.paddingBottom="6px";
        caption.style.fontStyle="italic";
        caption.style.textAlign="center";
      
      
         wrapper.appendChild(image.cloneNode(true));
         wrapper.appendChild(caption);
       
        image.parentNode.replaceChild(wrapper, image);
      
    }
    }
};
  </script>

[vsjambois]

Hello, I'm totally new at dotcms but this is the exact solution I need.
Right now I'm just trying to get this working in the Quest demo site. I am
having trouble though. Do I need to add it to a widget and place it in my
page?

Thanks,
Vanessa



--
View this message in context: http://forumarchive.dotcms.com/Automatic-Captioning-tp5670913p5716204.html
Sent from the dotCMS Users Group mailing list archive at Nabble.com.

[Mark Pitely]

Vanessa,

You can add that script part just about anywhere on the page, as just web-page content. You don't even need to put the Velocity on it - that little bit helps identify that the block has code in it so your end-users don't delete it when it looks blank (since it only contains script).

You could add that code to your header/templates if you like as well, if you are going to use it throughout.

Now, it won't work unless this part matches your HTML/CSS:

 var images = document.getElementById("yui-main").getElementsByTagName("img");

Use Chrome's inspector or something to find out the id of the 'block' you want IMG captions to appear in. You don't want to add captions to your header/footer/menu images, right?

Looks like the Quest model doesn't use IDs to define divs - if you edit the Default 1 (Page Content) Container, and add a 'handle' you can make it work.

I added <div id="main-holder"> to the pre-loop and </div> to the post-loop - on the demo site. You can inspect what I did here on the demo site:

http://demo.dotcms.com/services/investment-banking/

 var images = document.getElementById("main-holder").getElementsByTagName("img");

If you put what you are working on on a page that is outside-reachable, I can probably tell in you 5 seconds why it isn't working. I could also tweak the code to use getElementsByClass instead of Id.

Mark Pitely

Marywood University

[Vanessa Jambois]

Worked like a charm, thanks!  Just have to style it a bit and it's good to go.  

Thanks again,

Vanessa

[Vanessa Jambois]

Ok, actually it is close.  It's only captioning the first image on my page... Any help?

On Wednesday, May 22, 2013 10:35:33 AM UTC-5, Mark Pitely wrote:

[Mark Pitely]

Vanessa,

Can you give us a URL to look at?

Mark

--
You received this message because you are subscribed to the Google Groups "dotCMS User Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dotcms+un...@googlegroups.com.
To post to this group, send email to dot...@googlegroups.com.
Visit this group at http://groups.google.com/group/dotcms?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Vanessa Jambois]

Sure, give this a try...

http://slhetctest11.ad.slh.wisc.edu/about-wslh/index.html

[Mark Pitely]

Vanessa,

No dice; that link does not work.

Mark

[Kivi Shapiro]

Are the other images also inside "main-holder"?

Kivi Shapiro

Qualicom Innovations

[Vanessa Jambois]

The images are in the main-holder.  Take a look at the code....

	<div id="main-holder">
	<h1>About the WSLH</h1>
	<p><div style="float: right; display: block; margin: 10px;"><img src="/dotAsset/3097a825-0131-4077-b430-f47e244021b6.png" width="267" height="166" alt="UW Madison Campus Facility" title="Our UW-Madison campus facility includes laboratories for infectious disease, genetics, newborn screening and cytology testing, as well as the School of Cytotechnology and WSLH Proficiency Testing." style="display: block; margin-left: auto; margin-right: auto; padding: 10px;"><div style="display: block; max-width: 267px; padding-left: 8px; padding-right: 8px; padding-bottom: 6px; font-style: italic; text-align: center;">Our UW-Madison campus facility includes laboratories for infectious disease, genetics, newborn screening and cytology testing, as well as the School of Cytotechnology and WSLH Proficiency Testing.</div></div>Since 1903, Wisconsin citizens have depended on the Wisconsin State Laboratory of Hygiene (WSLH) at the University of Wisconsin-Madison to help reach and maintain the high quality of life they expect. As the state’s public, environmental and occupational health laboratory, the WSLH plays a vital role in maintaining the health and safety of Wisconsin’s citizens, protecting the environment and providing training to other professionals. The WSLH’s scientists and academic leaders offer quality services in an array of technical specialties, including microbiology, genetics, cytology, cytotechnology education, environmental sciences, industrial hygiene/occupational health, newborn screening, proficiency testing, radiochemistry, toxicology and virology. We work closely with the state’s Department of Health Services, Department of Natural Resources, Department of Agriculture, Trade and Consumer Protection, local health departments, health care providers and private-sector laboratories.</p>
	<p><img src="/dotAsset/ece650e9-9370-4cd0-b2a6-f56dc1499693.png" width="267" height="157" alt="Agricultural Drive Building" title="Our Agriculture Drive facility on Madison’s east side houses our environmental health and our occupational health divisions, plus our toxicology laboratory." style="float: right;">&nbsp;As a part of the UW-Madison, WSLH staff participate in this vibrant research and education community by fostering partnerships with academic departments and performing vital human and environmental health research. WSLH staff also provide education and training to undergraduate and graduate students, physicians in training and working professionals in the areas of clinical, environmental and occupational health and safety.</p>
	<p><br>Our goal is to partner with others to keep people and our ecosystem healthy. As a world-class laboratory at the University of Wisconsin-Madison, we explore new ideas that benefit the health of the state, the nation and the world. We take our role to provide public service to heart every day.</p>
	<script>
	window.onload = function() {

	var images = document.getElementById("main-holder").getElementsByTagName("img");

	for (var i = 0, image = images[i]; i < images.length; i++) {

if (image.title){

	var wrapper = document.createElement('div');
	var caption = document.createElement('div');
	caption.appendChild(document.createTextNode

(image.title));

	//Move the Float to the entire display, strip from the image
	if (image.style.cssFloat=="left"){
	wrapper.style.cssFloat = "left";
	image.style.cssFloat="";
	}
	if (image.style.cssFloat=="right"){
	wrapper.style.cssFloat = "right";
	image.style.cssFloat="";
	}
	//Style the Box surrounding the image
	wrapper.style.display="block";
	wrapper.style.marginLeft="10px";
	wrapper.style.marginRight="10px";
	wrapper.style.marginTop="10px";
	wrapper.style.marginBottom="10px";

	//Style the Image
	image.style.display="block";
	image.style.marginLeft="auto";
	image.style.marginRight="auto";
	image.style.paddingTop="10px";
	image.style.paddingBottom="10px";
	image.style.paddingRight="10px";
	image.style.paddingLeft="10px";
	//Style the Captioned Text
	caption.style.display="block";
	caption.style.maxWidth=image.width+"px";
	//don't let the caption text run longer than the image- break it into lines, if necessary.
	caption.style.paddingLeft="8px";
	caption.style.paddingRight="8px";
	caption.style.paddingBottom="6px";
	caption.style.fontStyle="italic";
	caption.style.textAlign="center";
	wrapper.appendChild(image.cloneNode(true));
	wrapper.appendChild(caption);
	image.parentNode.replaceChild(wrapper, image);
	}
	}
	};

</script> </div>

[Mark Pitely]

Vanessa,

Perhaps move the script out of the div and place it somewhere else? It shouldn't be within display elements; ideally it should be at the end of your page, after the close for body/html.

At least move it after the div closes.

I mean, it probably should still work. You could try it in Chrome (or Firefox) and look at the javascript console to see if there are any errors.

There appears to be an extraneous ; at the end of the script - it should end with a } not a }; but that looks like something from my original javascript (oops! Too much jquery!)

Mark

[Kivi Shapiro]

I think the problem is in the script itself.  The variable "image" doesn't vary.  Replace

    for (var i = 0, image = images[i]; i < images.length; i++) {

with

    for (var i = 0; i < images.length; i++) {
      image = images[i];

and things should work better:

Kivi Shapiro

Qualicom Innovations

[Vanessa Jambois]

Hi all, I applied those fixes and it is mostly working.  Just needs a few js tweaks.  Thanks all.