Inline editing for image in XPM

Question

I am trying to edit an image field of a component through XPM but not able to get the desired options. Below is the screen shot

I have taken all the steps described in this question : "How to change image using Experience Manager?"

The markup is getting created properly:

 <div><span><!-- Start Component Presentation: {"ComponentID" : "tcm:55-211",
 "ComponentModified" : "2014-07-24T07:41:48", "ComponentTemplateID" : "tcm:55-727-32", 
"ComponentTemplateModified" : "2014-07-24T07:49:17", "IsRepositoryPublished" : false } -
->

 <!-- Start Component Field: {"XPath" : "tcm:Content/custom:Content/custom:largeimage[1]"} 
-->
<img src="/Images/products-wipers.png"  alt="hello"/>
</span></div>

   <!-- Page Settings: {"PageID":"tcm:55-720-64","PageModified":"2014-07-24T07:49:45",
"PageTemplateID":"tcm:55-178-128","PageTemplateModified":"2014-07-23T09:06:42"} -->

<script type="text/javascript" language="javascript" defer="defer" 
src="http://tridiondev/WebUI/Editors/SiteEdit/Views/Bootstrap/Bootstrap.aspx?mode=js" 
id="tridion.siteedit"></script></body>

Is there any specific JAR file required for Image editing in XPM which could be missing?

Any help would be appreciated.

Answer 1

So looking at your screenshot I'm assuming the problem you are referring to is that the border in XPM does not match the size of your image right? (in that case, it would be beneficial that you update your question and make the actual problem a bit more clear)

The border as shown in XPM is generated based on the XPM markup and the HTML elements around that. In your case you want a border around an img element (which is an inline block level element), and for that you have the <!-- Start Component Field: {...} --> markup placed above it and wrapped in a span element.

Now the span element is in HTML a inline element, and this is what is used by XPM to draw the border, so it will pick up the width of your image, but unfortunately, it won't pick up the height of the image. If you would change that span into a div (which is a block level element), you will notice that the border will be nicely around your image.

Now the next (possible) issue is that you have both the <!-- Start Component Presentation: {...} --> and the <!-- Start Component Field: {...} --> markup wrapped in the same HTML element (in your case the span). This means that both the Component Presentation border and the Component Field border (the border around the image), will have the exact same size. So when you hover over the image, you will never see the Component Presentation border, or at the least it will be difficult to reach. Ideally you should adjust the HTML to work better with XPM, and you could consider something like:

<div><!-- Start Component Presentation: {"ComponentID" : "tcm:55-211", "ComponentModified" : "2014-07-24T07:41:48", "ComponentTemplateID" : "tcm:55-727-32", "ComponentTemplateModified" : "2014-07-24T07:49:17", "IsRepositoryPublished" : false } -->
    <div><!-- Start Component Field: {"XPath" : "tcm:Content/custom:Content/custom:largeimage[1]"} -->
        <img src="/Images/products-wipers.png"  alt="hello"/>
    </div>
</div>

It seems a minor change, but it will have a huge effect on the usability. Other options could be to give the span (or whatever other HTML element you are using to wrap the XPM markup in) a different display properly (like display:block; or display:inline-block;), see also http://www.w3schools.com/cssref/pr_class_display.asp