OOXML Hacking: Custom Picture Content Controls

Recently I was creating a white paper template in Word for a client and needed to insert some custom Picture Content Controls for photos that would be inserted by users. The designer had specced round-cornered pictures, but Picture Content Controls (PCC) have square corners. It didn’t take long to figure out that after selecting the PCC, I could choose the Picture Tools>Format tab of the Ribbon, then apply a Picture Style. I chose the rounded corners with reflection (fifth icon over in Word 2010), then removed the reflection.

Now I had rounded corners, but also another problem. Word keeps the corner radius in proportion to the box size, so resizing the PCC up to the right size made the radius much larger than the design. Unlike AutoShapes, Content Controls will not display a yellow radius handle to adjust the radius. I also tried resizing the PCC before applying the Picture Style, but got the same big corners.

Default Picture Content Control

A Picture Content Control with default corner radius.


Custom Picture Content Controls XML

When I’m stuck, I crack open the XML. Can’t leave it alone! If you’ve never opened Office files to edit their XML, read XML Hacking: An Introduction. If you’re using a Mac, you should also read XML Hacking: Editing in OS X. All document content is in word\document.xml, so I opened it and started searching. In some respects, a PCC is handled like an ordinary picture, so I found it inside a <w:drawing> tag. The information I was looking for was in this subsection:

<pic:spPr bwMode="auto">
  <a:xfrm>
    <a:off x="0" y="0"/>
    <a:ext cx="3222172" cy="4576355"/>
  </a:xfrm>
  <a:prstGeom prst="roundRect">
    <a:avLst>
      <a:gd name="adj" fmla="val 8594"/>
    </a:avLst>
  </a:prstGeom>
  <a:solidFill>
    <a:srgbClr val="FFFFFF">
      <a:shade val="85000"/>
    </a:srgbClr>
  </a:solidFill>
  <a:ln>
    <a:noFill/>
  </a:ln>
  <a:effectLst/>
</pic:spPr>

When I spotted the line <a:prstGeom prst=”roundRect”>, I was pretty sure that’s what I was looking for. But inside that tag, there were only 2 parameters. I went for the fmla tag and changed the value from “val 8594” to “val 4000”. Because I’m experimenting, I make only 1 change, then zip the XML to test. If you make several changes and the file doesn’t open, it can take a long time to find the error.

I reopened the Word file. Success! The corner radii were about half the size. Then I just had to try several values until I found one that match the designer’s intent. Keep in mind that the fmla value is not setting any particular radius size, it’s setting the ratio of the curve to the size of the picture. So you should make the placeholders the correct size first, then try out fmla values to get the radius you want at those dimensions.

You don’t always get lucky with parameters. A few lines down I spied another setting that looked like it could be useful. While you can set the PCC border in the program interface, you can’t set the fill color. However, in the XML, I saw these tags:

  <a:solidFill>
    <a:srgbClr val="FFFFFF">
      <a:shade val="85000"/>
    </a:srgbClr>
  </a:solidFill>

Unfortunately, changing these values had no effect on the color of the Content Control. So what do these tags do? Search me, maybe someone at Microsoft knows. But I was happy to be able to set the radii to my preference. Here’s the final result:

Custom Picture Content Controls

A custom Picture Content Control with smaller corner radii.

We can provide custom Content Controls and much, much more. Get pro help with your PowerPoint project by emailing me at production@brandwares.com.

7:19 pm

5 thoughts on “OOXML Hacking: Custom Picture Content Controls

  1. I got a picture placeholder which should blur the pictures it holds automatically. Unfortunately thats not possible to apply on the placeholder – but only on the picture inserted within. Do you know any way to apply this effect to the placeholder via xml?

    • Sorry, this is not possible. Before a picture is added to the placeholder, the placeholder is handled as a shape and is inside a <p:sp> tag. Once you place a picture in it, the XML is rewritten by PowerPoint in a <p:pic> (picture) tag. At that time, all effects added in XML are discarded.

      If you’re already familiar with PowerPoint VBA, you could write a macro to apply the effect, then add that macro to the Quick Access Toolbar, making the process of applying the effect simpler.

  2. Hi again John,

    Ever encountered an issue with inserting an image in the OOXML? What I am experiencing is when I add a new image (w:drawing), it does not display in the docx file. However, if I duplicate the code with the same image (so this time, there will be 2 drawing tags in the XML) it will display the image but only the second insertion. Have you encountered it? It seems like I have to run initially a ‘w:drawing’ before it renders the image. It like if I insert 3 images, only 2 are displayed.

    I have compared namespaces, tried using an inline or anchored image but no luck. I’m not sure what I’m missing.

Leave a Reply

*Required fields. Your email address will not be published.

Posting XML? To enter XML code, please replace all less than signs "<" with "&lt;" and greater than signs ">" with "&gt;". Otherwise, Wordpress will strip them out and you will see only a blank area where your code would have appeared.