Stefan Cameron on Forms
Building intelligent forms using Adobe LiveCycle Designer

Image Field Z-Order Problems

Description

If you’ve ever tried to use an image field’s contents (an image) as the background for a form and wanted to let the user change it at run-time, you’ve probably run into problems if you had placed objects on top of this image field. The most common result is the image field’s contents always appears on top of all other fields which are technically higher in z-order (“in front” in the hierarchy) than the image field.

While this may seem like buggy behaviour, it’s not technically a bug and I’ll try to explain why it isn’t.

The behavior occurs because of the way image fields are translated from XFA objects to AcroForm objects when your form is saved as a PDF and rendered in Acrobat.

The PDF format has a definition for what is called an Annotation object which represents essentially all the “extra” stuff you can add to PDF documents such as comments, stamps, highlighting, etc. When it comes to image fields, their contents is actually an Annotation in the PDF layer as opposed to contents in the XFA layer. Since the PDF layer is above the XFA layer, Annotations can’t be placed behind objects on the XFA layer — hence why the contents of an image field is always displayed above any objects that may be “in front” of it in the XFA hierarchy (z-order).

Workaround

Unfortunately, there aren’t any workarounds to this problem if you want users to pick the image field’s contents at run-time (in Acrobat) or if you specifically need to use an image field object.

If you are able to restrict the possibilities to a known set of images that you can store in the form at design-time (in Designer), however, then you could embed all the images in separate read-only image objects (note that this is a static image object — not an image field object) and then change their presence attribute (make one visible and all the others invisible) when the user performs an action that would’ve let them change the background image.

Since static image objects (as opposed to image field objects) render their contents in the XFA layer at the moment the form is rendered in Acrobat, their contents appears “behind” all the other objects, as is desired in this case.

Fix

Please refer to the Bug List for updated information on the version(s) affected by this bug as well as if and when it was/will be fixed.


Posted by Stefan Cameron on October 4th, 2006
Filed under Acrobat,Bugs
Both comments and pings are currently closed.

43 Responses to “Image Field Z-Order Problems”

  1. Howard Treisman on November 6th, 2006

    Hi
    We actually want to use a Static Image rather than an ImageField – but we want some javascript to load a particular image on init or form:ready, rather than always having it use the same field. Is there any way of achieving this?

    Many thanks,
    Howard

  2. Stefan Cameron on November 7th, 2006

    Howard,

    Unfortunately, you can’t use static image objects when you need to change the image that it displays at runtime (e.g. in Acrobat). This is because static image objects are rendered directly to the canvas as opposed to image fields which are actual objects (in dynamic PDF forms).

    I’ll take a guess and will assume that you’re wanting to use a static image object instead of an image field because you (1) don’t want to have a caption and (2) don’t want the user to be able to click on the image field and change the image.

    You can easily make image fields behave like static image objects simply by making them read-only and removing their caption.

    Use this script to make an image field read-only on load (in FormCalc here):

    $.access = “readOnly”

    Use the Caption Position property on the Layout palette to remove the caption completely.

    Finally, as long as the image data isn’t embedded (make sure the “Embed Image Data” property on the Object palette’s Field tab isn’t checked), you can change the file which the image field references (and displays) by accessing the following property (in JavaScript here):

    ImageField.value.resolveNode(“#image”).href

    You may set the property to an absolute path or a relative path (from the PDF’s folder).

  3. Melissa Hendricks on November 7th, 2006

    I have a question regarding Image Fields. I am a minimal user, no knowledge of any scripting. I created a form with upwards of 6 Image Fields. Each picture is a different-size rectangular “icon” for a particular task students must complete. My problem is that the image ALWAYS left aligns and because the icons are different sizes, I can use any of the other options except “Scale Image to Fit”. Let me know if there is any quick and easy way to make this happen. (I have asked my husband–a programmer–who had no answer to give me.)

  4. Brad Whitaker on November 8th, 2006

    Fortunately this “non-bug” seems to have been “fixed” in LiveCycle Designer 8. I put a text field over an image field and the text is visible over the image. It works this way when I open the PDF in either Acrobat 8 or Reader 7. This “non-fix” is great.

  5. Stefan Cameron on November 8th, 2006

    Melissa,

    I’m not certain I completely understand your problem. Are you saying you’re unable to use the “Scale Image to Fit Rectangle” option because your icons are all different sizes?

    It sounds to me like you should be using the “Use Original Size” option and aligning the images on the grid using the alignment buttons on the toolbar up top rather than trying to apply different paragraph formatting to the image fields.

    Also, you should probably be using image objects (“Image” as opposed to “Image Field”) instead of image fields because image fields, by nature, let you click on them to load-in other images when viewing the form in Acrobat. Image objects, however, don’t do this because they’re meant to be “read-only” or unchangeable.

  6. Stefan Cameron on November 8th, 2006

    Brad,

    That’s very interesting. I can’t get it to work as you describe it on my end. Did you do anything special like save the form as a “static” form or preview it as a “print” form? If you did that, then I would understand, since the image field would basically be treated as an image object.

  7. Brad Whitaker on November 9th, 2006

    The simple test form I used had saved (by default) as “Acrobat 7 Static”. I tested it again after saving it as “Acrobat 7 Dynamic” and see the same behavior. As I look again at my form I realize that my text field only partially overlaps my image field. If I select a new image then it is rendered in a way that obscures my text field, but clicking on the portion of the text field that does not overlap the image field causes the entire text field to be raised on top of the image. I tried this again with Designer 7 and Reader 7 and the behavior is the same.

    BTW, I tried the static image tip that you described. While it does work I found unpredictable (or perhaps just complex) and undesirable interaction with the display of other fields. Changing the visibility of overlapping static images would cause other image fields to “loose” or hide their image. I would have to go back an click the image field to “raise” it.

    Finally, I’ve noticed that the new support for transparent PNGs only works in the “GUI”, but does not work properly when printing to PDF. I’m not sure how to report this bug.

  8. Stefan Cameron on November 11th, 2006

    Brad,

    Essentially, you’re seeing the behaviour I’m describing in this post. In the end, you’re best not to have any fields overlap image fields.

    As for the transparency with PNG images, it’s specifically only PNG8 with one color mapped as transparent in Acrobat 8.0 XML Forms that’s supported. PNG24 images with transparency are not supported at this time and this isn’t backwards-compatible with older versions of Acrobat.

    If your problem is specifically with PNG8 with one transparent color in Acrobat 8.0 XML Forms, then it may be a bug. Please let me know so that we can verify what’s going on and possibly report something.

  9. Howard Treisman on November 15th, 2006

    Hi Stefan
    (This is going back to one of the very early postings on this topic…)
    The reason that we want to use an Image rather than an ImageField isn’t because of captions or use-clicks. It’s because a) we specifically want the image to act like a background behind the form fields (it’s actually a map, overlaid with form objects), and b) there are around 5000 images – we don’t want to have to develop a separate form for each image. The idea is to import some form data, one bit of which is the name of the image, which then gets loaded.

    By the way, I totally don’t buy you saying that this isn’t a bug. At the very least, it’s the absence of a feature. Your explanation of why it doesn’t work is an excellent explanation – but that’s what it is – an explanation. Explaining why something is so doesn’t detract from the fact that the product doesn’t do something that customers want it to do… :-$

    Many thanks for your patient responses and excellent explanations.

    Howard

  10. Stefan Cameron on November 15th, 2006

    Howard,

    I’m glad you think my explanations are helpful even if they explain something you think should work differently.

    I’m with you on this one. I think the way images are handled in Acrobat with respect to XFA forms isn’t correct and I have been lobbying for change since I posted this tutorial last August: Tracking Mouse Clicks.

    Unfortunately, I haven’t had any luck in changing things yet but I’ll definitely update this post if I get results. Your valuable feedback might give my case the boost it needs…

  11. Miguel Moral on January 15th, 2007

    Hi Stefan,

    Is there any way of embedding an image loaded at runtime into an ImageField into a pdf document, for delivery purposes?.

  12. Stefan Cameron on January 17th, 2007

    Miguel,

    You can specify whether an image loaded into an image or image field object is linked or embedded by using the “Embed Image Data” check box in the Object palette’s Field (for image fields) or Draw (for images) tab.

    If you set it to be embedded, then the image picked by the user at runtime (in Acrobat) gets embedded into the form rather than linked externally.

  13. Miguel on January 18th, 2007

    Stefan,

    Thanks for your soon reply. Yes, it is right, I understand the concept. But let me explain you what I want to do.
    We develop a software that integrates Acrobat Reader inside. We open a customer and we want to generate a form with personal information embedded on it (name, address, …) including his photo (all this information comes from our software and we pass thru xml to the form, we pass the photo as a path to a temporary image file). We save the form asociated to the customer in a pdf in an appropriate directory and we want to delete the temporary information (we want to delete the photo), but the photo must be maintained (embedded) into the pdf, because we want to deliver by email the pdf.
    Conclusion, we want to use dynamic loading images and have the possibility (programatically) to embed the images before saving the final pdf filled.
    I hope this information help you to understand my problem.
    Note: Sorry for my english.

  14. Stefan Cameron on January 23rd, 2007

    Miguel,

    Thanks for the explanation. What you describe should definitely be possible however I discovered a bug with this process while attempting to reproduce it.

    Essentially, I had a form with an image field set to “link” to its image file. I would then import an XML data file that contained the path to the image file. The image would get loaded into the image field but simply saving the PDF (which should’ve embedded the image into the PDF regardless of whether the image field was linking to or embedding its image into the XFA Data) didn’t embed the image file for future reference and neither did programmatically setting the image field’s “embed” property like this

    ImageField1.ui.oneOfChild.data = “embed”

    make any difference. The only way the image would get embedded after importing the data is if you manually clicked on the image field to pick a different image and then re-picked the original image and I’m certain that’s not acceptable to you given the workflow you described.

    I’ve logged a bug about this issue in hopes that it’ll be addressed in a future version of Acrobat.

  15. sasikumar on February 12th, 2007

    hai

    i am new to this field so can u

    tell how to set image to a

    particular field. Please send

    quickly its very urgent.

  16. Stefan Cameron on February 15th, 2007

    Sasikumar,

    You can put an image into a field by using an image field object from the Library palette’s Standard tab. Note that there’s also an image object (which isn’t a field) that’ll let you include an image on your form but the user won’t be able to click on the field in Acrobat in order to include an image of their choice.

  17. Becky on August 8th, 2007

    I think this question was asked already, but not directly answered: I’ve inserted an image field with Scale Image Porportionally sizing and can’t get it to vertically center the image. So when I click the image in Preview, it defaults it to the horizontal center and vertical top. I want it to be positioned at the vertical center. It seems like setting the Anchor to middleCenter could fix the problem, but that option is greyed out. Any ideas? I feel like I’m missing something obvious.

  18. Stefan Cameron on August 20th, 2007

    Becky,

    Unfortunately, I don’t believe there’s a way to position the image at the vertical center. Changing the Anchor property on the Layout tab simply determines the anchor location used when rotating the field, not how the data in its content area gets aligned.

  19. Mark on October 4th, 2007

    Hello Stefan,

    Since you seem to be the PDF generation guru I really need some help 🙂 We have a flex based app that is serving up some PDFs. Basically these are typical form letters and we have some java code that inserts data from our DB via XML. One of the items we need to have included is an image of the users signature. We kinda have this working but it seems very hit or miss and we need to find out the proper way to do this. Most users get a message from Acrobat asking for permission to link to external data (the image coming in via the URL). This has caused enormous issues as most users are just so accustomed to denying access that they cause the image not to load. After that the image never loads for these users. Is there a way to have the image sent just like the rest of the XML data (ie. not as an external URL link)? We would like it somehow embedded in the file. Obviously this data changes from user to user so can’t just be put in the letter itself as part of the template. I am really a nubbie with regards to created these PDF XML templates so the more detail you could give the better. Thanks so much for your time.

  20. Stefan Cameron on October 16th, 2007

    Mark,

    You should be able to UTF8-encode your image into your XML data and then bind that data node to the image field. Importing the data into the form should produce the image in the image field.

    To illustrate, I’ve put together a little sample PDF which has an empty image field set to “use original size” (so it will resize itself to the original size of the image). Then, when you import the included data file (which has a UTF8-encoded version of the Adobe logo in it that is in a data node bound to the image field in the form), the image is displayed.

    You can easily get the UTF8-encoded version of an image by inserting an image field in a form in Designer and then setting the image to it. Make sure the image field embeds its content (by using the “Embed Image Data” property in the Field tab in the Object palette) and then go to the XML Source view (via the “View > XML Source” menu). Select the image field in the Hierarchy palette (this will scroll to and select the line of XFA that defines the image field) and you’ll see the image in its encoded form. Copy and paste that into your XML data file (or data source).

  21. Alex Kel on April 21st, 2008

    Hi there,

    i have been searching for a solution some time now and i think this is the most proper place to find it. So, here it goes:

    I need to display an image dynamically. I understand that the Image Field will be used but i think that i lack the proper script.
    I tried with [i]this.value.image.href[/i] but i did not get any results. The images are displayed only when i insert the path in the
    URL field… Most of the images that i want to display are in a local network.

    Do you have any suggestions ?

    Thank you in advance!

    By the way Stefan, congrats for the great job you have achieved in here!

  22. Stefan Cameron on April 29th, 2008

    Alex Kel,

    I had to do some digging to find-out why this might not be working for you and I’m afraid you might not like the answer: Since Acrobat/Reader 8.1, loading images from URLs is no longer supported due to security issues (a malicious user could load an image into a hidden image field from the user’s computer without their knowledge, for example), which is why assigning a URL to “this.value.image.href” doesn’t work.

    The only way around this that I can think of is to pre-load all the images (into hidden image fields) and display the correct ones using the presence property (show/hide).

  23. Stefan Cameron on April 29th, 2008

    Alex Kel,

    Actually, there’s another way around this issue which is to create a web service that returns the image bytes (as a base64-encoded string). You can bind that data string to an image field to get the image to display. This is OK since it’s bytes, not an external reference (URL).

  24. Karl Sigiscar on July 3rd, 2008

    Hello Stefan,

    We are having a problem with PDF documents with images.

    I have two visible Image Fields in LiveCycle Designer with bindings VendorLogoImage and FunderLogoImage respectively.

    In the XML model that Flex uses to generate the data for the PDF, there are two corresponding nodes: VendorLogoImage and FunderLogoImage.

    The Flex application loads some bitmaps, encodes them in Base64 and then sends them to the PDFService remote object along with the other data.

    However, although the Text Fields data display without problem, the Image Fields do not show their bitmap.

    I have traced out what XML data Flex sends to the PDF Service Remote Object and it looks correct.

    The Flex documentation says the bitmaps should be encoded in Base64 but when I see what encoding LiveCycle Designer uses for Embedded Bitmaps (View > XML Source), it uses UTF-8. When I compare the encoding for the same bitmap in Flex and in LiveCycle Designer, the encoded output is not the same.

    Best regards,

    Karl Sigiscar.

  25. Stefan Cameron on July 12th, 2008

    Karl Sigiscar,

    The image bits should be Base64-encoded when they’re merged into the form. When you look at the XML Source in Designer, what you see is UTF-8 encoded so it’s possible you’re seeing UTF-8-encoded Base64-encoded strings — that’s all I can think of at the moment.

    I’ve written Flex apps that do similar things to what you’re trying to do (Flex app selects images and they’re then transferred to the PDF as image data) and it has worked so it makes me suspect there’s something wrong with the PDFService remote object.

    I would suggest you use your Flex app to generate the XML data, save it to an XML file then set that file as the “preview data file” in Designer (“File menu > Form Properties > Preview tab”) and preview the PDF within Designer. If your Flex app is producing the correct data, you should see your images in the PDF at this point. If you do, then the image data is being corrupted somewhere between the Flex app and the PDF (possibly by the PDFService remote object).

  26. Shirley on September 16th, 2008

    I created an Adobe Form with an Image Field as part of it. I downloaded an image on it, but I can’t figure out how to delete an image once it is in the space. I can select another image, but I can’t return the space to blank. If someone accidently puts an image in there, and they decide they don’t want one afterall, they are stuck. Any suggestions?

  27. Stefan Cameron on September 24th, 2008

    Shirley,

    You should be able to remove the image by setting the image field’s “rawValue” property to “null”:

    myImageField.rawValue = null;

    You could put that code in a button’s Click event and label the button “Clear Image”, for example.

  28. Tobias on April 28th, 2009

    Hello Stefan,

    we are using LiveCycle Designer ES 8.2 to program a dynamic form in which we want to use image fields. Users filling the form should choose the picture to display in the image field.

    We set the Image Field to embed data (so it can be saved) and to scale proportionally.

    Testing the form with Adobe Reader 8.1.4 or 9.1, it’s possible to insert a picture, but it does not get scaled and seems to be positioned in the Background of the form.

    Can you help us fixing this problem? If helpful, i can provide a copy of the form draft. Thanks in advance for any help und

    kindest regards
    Tobias

  29. Tobias on April 30th, 2009

    Hi Stefan,

    I figured it out by myself. In the layout-tab the image field was set to rescale to fit content. Now it works fine.

    Cheerio
    Tobias

  30. simon on June 3rd, 2009

    Hi,

    Great site! with a good post!

    My question: Without using javascript (as the forms/fdf/pdf are handled on a linux host with pdftk), what key/value pair can I use in the xfdf file to toggle the visibility of an element?

    thanks a lot
    simon

  31. Stefan Cameron on June 8th, 2009

    simon,

    I’m afraid I don’t know the answer to that question.

  32. Cris on October 21st, 2009

    Hi, I’m trying to make a checklist with image objects since I don’t want the images to change/be able to be changed based on who’s using the form. I got my form all set up the way I wanted it with the image objects blank on the form, and nice checkboxes set up by each of the images. The problem arose when I put the images in the blank image objects. Most of my images are uniform with the image centered on a white background that when put into the image objects are centered nicely. However, when I insert the images that aren’t uniform they end up being aligned to the left top of the object, which makes them all look very out of place. I’ve tried figuring out how I can align the images within the object, but couldn’t figure out how. So, right now the only way I can get the images to all look right is if I put the image objects manually on the page in a way that the images are all lined up the way I want which is very time consuming and frustrating. Is there anyway that I can accomplish what I want with the form without having to manually arrange the objects all over the page?

  33. Stefan Cameron on October 22nd, 2009

    Cris,

    It’s possible to center a picture within an image or image field object. The problem is that Designer doesn’t make it easy for you to do so.

    No matter what you set the “Object palette > Draw/Field > Sizing property” to, Designer will always insist that the image/field be the same size as the picture it contains and the Paragraph palette isn’t available (is disabled) for image/field objects. This behaviour means you can’t easily center pictures.

    What you need to be able to do is set the width/height of the image/field to be larger/taller than the picture it contains and then be able to set paragraph alignment properties to align the picture horizontally/vertically.

    By going to the XML Source view, you can change the “w” and/or “h” properties of the image/field to match those of the other fields and then paste the following line into the <draw> (for an image object) or <field> (for an image field), which will cause the image/field’s content (the picture) to be centered both vertically and horizontally:

    <para vAlign="middle" hAlign="center"/>
  34. Hitesh on July 20th, 2010

    We want to validate image size once the user upload his / her photograph in Adobe Form.
    How to achieve this feature using Javascript ??

  35. Stefan Cameron on July 26th, 2010

    @Hitesh,

    You could try an Exit script (on the image field that the user will use to upload the image) that retrieves the rendered dimensions of the image field — provided the image field is set to “size to content” (otherwise, the rendered dimensions of the field won’t match the actual pixels). In the Exit script, you can use the “xfa.layout.w(fieldRef, units)” and “xfa.layout.h(fieldRef, units)” methods to get the dimensions of the image field:

    // JavaScript:
    var width = xfa.layout.w(this, "pt");
    var height = xfa.layout.h(this, "pt");

    The script above will get the width and height in points, which should be the equivalent in pixels.

  36. David Todd on August 11th, 2010

    Stefan,

    Has Adobe fixed the original issue of this post where the image field always appears on top?

    My issue is that I am using an image field to display an image received from a URL in an xml. The image displays fine, however the annotations etc go “behind” the image and not on the image as they should.

    Can you help?

    Thanks for all your posts, which I frequently turn to for answers.
    David

  37. Peter Donoso on August 11th, 2010

    I apologize in advance if this question is inappropriate for this thread, but can’t seem to find a CONTACT US link or thread on this subject anywhere.

    I’m creating a form using Acrobat 7 and want to validate that one field’s entry matches another, specifically as in a “reconfirm e-mail address” or “reconfirm password” entry situation.

  38. Stefan Cameron on August 13th, 2010

    @David Todd,

    I’m running Acrobat 9.3.3 and I’m seeing mixed behaviour: An image field behind, say, a button no longer hides the button once an image is set. That said, if the form is rendered as a Static PDF, annotations (such as a note, call-out, etc.) display on top of the image field but once you click away from them, you almost can never select the annotation again because you always end-up clicking on the image field which displays the “Open File” dialog. Other annotations such as the rectangle simply do not display above the image field.

  39. Stefan Cameron on August 13th, 2010

    @Peter Donoso,

    To compare two field values, compare their rawValue properties. For example, in a button’s Click event, you would do

    // JavaScript
    if (PasswordField.rawValue != ConfirmField.rawValue)
        xfa.host.messageBox("The passwords do not match!");

    which would display an alert message if the password and confirmation fields do not match.

  40. David Todd on August 16th, 2010

    Stephan,

    Thank you for your quick response. You are always very helpful and reliable.
    Just to clarify, you are saying that rectangles, circles, arrows etc do not ever display on top of or above images? That would be unfortunate for us since we need the ability to put circles around parts of an image that will require re-touching by our artists.

    Thanks again Stephan
    David

  41. Stefan Cameron on August 16th, 2010

    @David Todd,

    You’re welcome!

    I’m saying that’s the behaviour I observed in Acrobat 9.3.3 with certain annotations like rectangle. I don’t know if that’s the expected behaviour. I will confirm with my colleagues and update here.

  42. David Todd on August 18th, 2010

    Stefan,

    Any updates you could provide would be wonderful.
    I have tried many different ways to get the circles, rectangles etc to stay in front of or on top of my image fields, but have had no luck. This is very frustrating because the images are what our users need to annotate. Without the circles etc on the images, we are losing a very important piece of our business.

    Oh, I thought that I would pass this info along to others regarding making the image fields “non-changeable”. I’ve noticed that if I create an image field, then change the type to text field and set the value of that field to protected, then change the type back to image field, the image becomes protected and a user cannot change. Just passing along.

    Thanks again Stefan
    David

  43. Stefan Cameron on August 31st, 2010

    @David Todd,

    I have confirmed that the behaviour I saw is “the way things are” at present. That is, displaying annotations above image fields isn’t directly supported (which explains what I described earlier) but displaying them atop static images should work.

    I encourage you to log a feature request for this so that the Acrobat Team can consider it for a future release. It will help to know there’s a real customer use case out there for the feature.

    In the mean time, you might be able to work around the issue by using both a static image and an image field in tandem: You could show the image field in thumbnail size (i.e. quite small) and, when the user sets an image, you can set the static image’s “bits” to be a copy of the bits in the image field. Of course the static image would be large enough to comment on…

    Another alternative is to flatten the PDF once the image is loaded into the image field by printing the form using the Adobe PDF Printer. That will generate a flattened version of the PDF which is a “pure PDF” without any notion of a form behind it. You should be able to comment atop the image at this point. The drawback is that you can’t change the image anymore.

    Finally, thanks for pointing-out the “unchangeable protected image field” issue. I will pass this along to the Designer Team.