none
SmartArt: Creating custom SmartArt that works with pictures RRS feed

  • Question

  • I'd like some help, please, in developing custom SmartArt.

    The Project

    I'm trying to create a new SmartArt glox file that will create a ring of pictures, with each picture cropped to a circle.

    The Problem

    In the SmartArt that I have developed, I have got as far as allowing my shapes to accept pictures just as they do in the shipped SmartArt, using blipPhldr = "1".

    However my SmartArt does not allow the images to be cropped and resized inside PowerPoint. Can anyone tell me where I'm going wrong? My code for layout1.xml is included below.

    How it should work

    In the SmartArt that's already included in PowerPoint, the picture-based SmartArt allows users to add an image to a SmartArt shape and then use the Crop tool to position and scale the picture within the shape (Ribbon, Picture Tools... Format... Crop).

    I'll add a screenshot of that being done with one of PowerPoint's own SmartArt once my account here has been verified, but you can try for yourself with Insert.. SmartArt.. Picture.. Circular Picture Callout and then adding one of your own pictures to the SmartArt and using the crop tool.

    My (faulty) Code

    <?xml version="1.0" encoding="UTF-8"?>
    <layoutDef xmlns="http://schemas.openxmlformats.org/drawingml/2006/diagram"
               xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main"
               uniqueId="urn:futurebrand.com/ringofimages">
      <title val="" />
      <desc val="" />
      <catLst>
        <cat type="other"
             pri="140" />
      </catLst>
      <sampData>
        <dataModel>
          <ptLst>
            <pt modelId="0"
                type="doc"/>
            <pt modelId="1">
              <prSet phldr="1"/>
            </pt>
            <pt modelId="2">
              <prSet phldr="1"/>
            </pt>
            <pt modelId="3">
              <prSet phldr="1"/>
            </pt>
            <pt modelId="4">
              <prSet phldr="1"/>
            </pt>
            <pt modelId="5">
              <prSet phldr="1"/>
            </pt>
          </ptLst>
          <cxnLst>
            <cxn modelId="6"
                 srcId="0"
                 destId="1"
                 srcOrd="0"
                 destOrd="0"/>
            <cxn modelId="7"
                 srcId="0"
                 destId="2"
                 srcOrd="1"
                 destOrd="0"/>
            <cxn modelId="8"
                 srcId="0"
                 destId="3"
                 srcOrd="2"
                 destOrd="0"/>
            <cxn modelId="9"
                 srcId="0"
                 destId="4"
                 srcOrd="3"
                 destOrd="0"/>
            <cxn modelId="10"
                 srcId="0"
                 destId="5"
                 srcOrd="4"
                 destOrd="0"/>
          </cxnLst>
          <bg/>
          <whole/>
        </dataModel>
      </sampData>
      <styleData>
        <dataModel>
          <ptLst>
            <pt modelId="0"
                type="doc"/>
            <pt modelId="1"/>
            <pt modelId="2"/>
            <pt modelId="3"/>
          </ptLst>
          <cxnLst>
            <cxn modelId="4"
                 srcId="0"
                 destId="1"
                 srcOrd="0"
                 destOrd="0"/>
            <cxn modelId="5"
                 srcId="0"
                 destId="2"
                 srcOrd="1"
                 destOrd="0"/>
            <cxn modelId="6"
                 srcId="0"
                 destId="3"
                 srcOrd="2"
                 destOrd="0"/>
          </cxnLst>
          <bg/>
          <whole/>
        </dataModel>
      </styleData>
      <clrData useDef="1">
        <dataModel>
          <ptLst>
            <pt modelId="0"
                type="doc"/>
            <pt modelId="1"/>
            <pt modelId="2"/>
            <pt modelId="3"/>
            <pt modelId="4"/>
            <pt modelId="5"/>
            <pt modelId="6"/>
          </ptLst>
          <cxnLst>
            <cxn modelId="7"
                 srcId="0"
                 destId="1"
                 srcOrd="0"
                 destOrd="0"/>
            <cxn modelId="8"
                 srcId="0"
                 destId="2"
                 srcOrd="1"
                 destOrd="0"/>
            <cxn modelId="9"
                 srcId="0"
                 destId="3"
                 srcOrd="2"
                 destOrd="0"/>
            <cxn modelId="10"
                 srcId="0"
                 destId="4"
                 srcOrd="3"
                 destOrd="0"/>
            <cxn modelId="11"
                 srcId="0"
                 destId="5"
                 srcOrd="4"
                 destOrd="0"/>
            <cxn modelId="12"
                 srcId="0"
                 destId="6"
                 srcOrd="5"
                 destOrd="0"/>
          </cxnLst>
          <bg/>
          <whole/>
        </dataModel>
      </clrData>
      <layoutNode name="cycle">
        <choose name="Name0">
          <if name="Name1"
              func="var"
              arg="dir"
              op="equ"
              val="norm">
            <choose name="Name2">
              <if name="Name3"
                  axis="ch"
                  ptType="node"
                  func="cnt"
                  op="gt"
                  val="2">
                <alg type="cycle">
                  <param type="stAng"
                         val="0"/>
                  <param type="spanAng"
                         val="360"/>
                </alg>
              </if>
              <else name="Name4">
                <alg type="cycle">
                  <param type="stAng"
                         val="-90"/>
                  <param type="spanAng"
                         val="360"/>
                </alg>
              </else>
            </choose>
          </if>
          <else name="Name5">
            <choose name="Name6">
              <if name="Name7"
                  axis="ch"
                  ptType="node"
                  func="cnt"
                  op="gt"
                  val="2">
                <alg type="cycle">
                  <param type="stAng"
                         val="0"/>
                  <param type="spanAng"
                         val="-360"/>
                </alg>
              </if>
              <else name="Name8">
                <alg type="cycle">
                  <param type="stAng"
                         val="90"/>
                  <param type="spanAng"
                         val="-360"/>
                </alg>
              </else>
            </choose>
          </else>
        </choose>
        <shape xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"
               r:blip="">
          <adjLst/>
        </shape>
        <presOf/>
        <constrLst>
          <constr type="w"
                  for="ch"
                  ptType="node"
                  refType="w"/>
          <constr type="w"
                  for="ch"
                  ptType="sibTrans"
                  refType="w"
                  refFor="ch"
                  refPtType="node"
                  op="equ"
                  fact="0.1"/>
          <constr type="sibSp"
                  refType="w"
                  refFor="ch"
                  refPtType="node"
                  fact="0.1"/>
          <constr type="primFontSz"
                  for="ch"
                  ptType="node"
                  op="equ"
                  val="65"/>
          <constr type="primFontSz"
                  for="des"
                  forName="connectorText"
                  op="equ"
                  val="55"/>
          <constr type="primFontSz"
                  for="des"
                  forName="connectorText"
                  refType="primFontSz"
                  refFor="ch"
                  refPtType="node"
                  op="lte"
                  fact="0.8"/>
        </constrLst>
        <ruleLst/>
        <forEach name="nodesForEach"
                 axis="ch"
                 ptType="node">
          <layoutNode name="node"
                      styleLbl="fgImgPlace1">
    
            <alg type="sp">
            </alg>
            <shape type="ellipse"
                   xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"
                   r:blip=""
                   blipPhldr="1">
              <adjLst/>
            </shape>
            <presOf axis="desOrSelf"/>
            <constrLst>
              <constr type="h"
                      refType="w"/>
            </constrLst>
            <ruleLst>
            </ruleLst>
          </layoutNode>
    
        </forEach>
      </layoutNode>
    </layoutDef>

    Saturday, September 27, 2014 9:24 AM

All replies

  • Hi Lan,

    Thanks for posting in MSDN forum.

    I used the xml you provied above to create a custom template for the SmartArt and the Crop and Resize of the picture worked well for me in PowerPoint 2013.

    Here is the screenshot for your reference:

    Which version of PowerPoint are you using? Can you describe more detail about the issue? Also you can upload the screenshot on OneDrive and share its link with us. And if you have any issues about using MSDN forum, you can get more effective response from link below:
    Forums Issues (not product support)

    Best regards

    Fei


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, September 29, 2014 9:36 AM
    Moderator
  • Hello Fei

    Thank you so much for taking the time to try out the code that I posted.

    I'm using PowerPoint 2013 on Windows and PowerPoint 2011 on a Mac.

    When I try to use cropping with the SmartArt that I have made, I am able to get to a similar moment that you show in you screenshot. However once I release the cropping and scaling handles the cropping always snaps back to the centre of the image. It's not possible for me to crop and scale the image so that a non-centred part of the image is what shows in the ring.

    Here's a screenshot of how it should work, using one of the built-in SmartArt options:

    As you suggested, I am providing a OneDrive link to three files. This is the link.

    The files are

    1. a PowerPoint document called 'CannotCrop' which has a sample of the SmartArt I made with an image in it that won't crop and scale for me.
    2. the '.glox' file I'm using for this SmartArt
    3. A copy of the screenshot included in this posting.

    Really looking forward to hearing back from you to find out where I'm going wrong.

    Thank you

    Ian


    • Edited by Ian Kirk Sunday, October 5, 2014 9:45 AM
    Sunday, October 5, 2014 9:44 AM
  • Hi Lan,

    Thanks for your sample presentation. I am able to reproduce the issue as you motioned.

    Since the issue is complex, I'm trying to involve some senior engineers into this issue and it will take some time. Your patience will be greatly appreciated.

    Sorry for any inconvenience and have a nice day!

    Best regards

    Fei 


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, October 8, 2014 6:38 AM
    Moderator
  • Thanks Fei, I really appreciate all your efforts to understand this problem. Looking forward to hearing what you and your colleagues discover.

    Best wishes

    Ian

    Wednesday, October 8, 2014 2:17 PM
  • Hi Ian,

    What is the build no of PowerPoint that you are working on?
    Where are you saving the files created?

    Regards.

    Friday, October 10, 2014 9:38 PM
  • Hello

    Most of this development work was done on a PC with Office 365 so I have been using the most recent built of PowerPoint 2013. This has been updated at times over the time that I have been working on this, but the issue has not altered.

    The files have either been stored in a folder on my desktop or directly on the desktop.

    Have you tried using the sample files that I provided? The didn't work for Fei. I don't think it's a version or file location issue. I think there's a bug in my code.

    Best wishes

    Ian

    Sunday, October 19, 2014 7:44 PM
  • Ian,

    Is there a way to attach the image to the glox file and have it rendered in powerpoint. My customer wants to embed their art in the glox file. Can this be done?

    Thanks,

    Jeff Kirkham

    Thursday, April 9, 2015 8:38 PM
  • Hello Jeff

    I'm afraid I can't claim any expertise in SmartArt. I got as far as I could when I posted my question to this thread, but wasn't able to find a solution to my own problem with images and SmartArt.

    Thinking about your question, I'm sure you know already that images can be added to some SmartArt when they are being edited in PowerPoint. There are examples of this that come with PowerPoint.

    If your customer wants their image to always be pre-inserted in a particular SmartArt when it's made in PowerPoint, I suppose you're right in thinking that it would have to be specified in SmartArt definition itself. It might have to go in the style definition files (.gqsx) but I'm not totally sure. You may be able to specify an image fill for one of the styles and reference that in the smartart file.

    These links might be a good starting point, but hopefully someone on this forum who really knows their SmartArt will be able to advise:

    https://msdn.microsoft.com/en-us/library/office/gg583880(v=office.14).aspx#o14ta_creatingcustomsmartartlayouts__CreatingagloxgcsxorgqsxFilefromanExisting

    http://www.ecma-international.org/publications/standards/Ecma-376.htm

    Good luck

    Ian

    Thursday, April 9, 2015 9:59 PM