27 Replies Latest reply on Sep 12, 2016 9:46 AM by ajaatshatru

    Placing multiple images in a container (rectangle/oval/polygon)

    ajaatshatru Level 1

      I refer this API  for InDesign Scripting - InDesign ExtendScript API (11.0)

      In the rectangle object, there is a property called images (also rectangles). This implies that a rectangle is capable of holding multiple images (also rectangles) within itself. How is this achieved via the InDesign UI? I tried placing images in a rectangle container, but the previous image got overwritten.

       

      Basically, I just want to place multiple images inside a container. How do I do that via the Id UI?

        • 1. Re: Placing multiple images in a container (rectangle/oval/polygon)
          Peter Spier Most Valuable Participant (Moderator)

          To put multiple objects in a single container they must be grouped.

          • 2. Re: Placing multiple images in a container (rectangle/oval/polygon)
            ajaatshatru Level 1

            Hey Peter!

             

            Thanks for replying. I tried that way, of grouping images and placing them inside the container.

            The point is, the API says,

            rectangle.'images'

             

            This means that the rectangle itself is capable of holding multiple images. (The group technique leads to rectangle.groups getting populated)

             

            Am I making any sense here?

            • 3. Re: Placing multiple images in a container (rectangle/oval/polygon)
              Peter Spier Most Valuable Participant (Moderator)

              You might be -- there are things that can be done through scripting that are not possible in the interface directly, but I'm a designer, not a developer, and you'll be hard-presssed to find anyone on this forum who understands what you are talking about. I don't see anything (that I understand) that says a rectangle can contain more than one image at a time, and I'm not convinced that the plural is anything more than a signal that more than one type of image is supported.

              • 4. Re: Placing multiple images in a container (rectangle/oval/polygon)
                rob day Adobe Community Professional & MVP

                The point is, the API says,

                rectangle.'images'

                 

                An image has to have its own container. If you look at image in the API, its parent can't be a spread or a page. So even though the API treats a container's images as a list, I don't think the list can have more than one item—you could confirm that over in the Scripting forum

                 

                A rectangle also has an allGraphics property, so if you group multiple images and paste them into a rectangle and get the allGraphics property, a list of all the images in the group will be returned.

                 

                I'm more fluent with AppleScript, so if I run this script on a selected rectangle with a group of two images inside, a 2 item list is returned:

                 

                tell application "Adobe InDesign CC 2014"

                    get all graphics of selection

                end tell

                 

                --returns: {image id 310 of rectangle id 309 of group id 300 of rectangle id 260 of spread id 220 of document id 20 of application "Adobe InDesign CC 2014",     image id 302 of rectangle id 301 of group id 300 of rectangle id 260 of spread id 220 of document id 20 of application "Adobe InDesign CC 2014"}

                • 5. Re: Placing multiple images in a container (rectangle/oval/polygon)
                  jane-e Adobe Community Professional

                  Funny thing is that it's easy in Illustrator. Go figure.

                   

                  Draw inside mode, which makes a clipping mask

                   

                   

                   

                   

                  • 6. Re: Placing multiple images in a container (rectangle/oval/polygon)
                    ajaatshatru Level 1

                    Hi!

                     

                    Plural 'images' implies a list (a chunk of memory is designated to it). That could indeed be the case that in spite of it being a list you cannot add multiple images via UI (even not using Scripting as the list is read-only, we can't mutate it). But even if it had been just 'image', it could indeed hold more than one type of image format.

                     

                    Thank you so much for taking time out to reply.

                     

                    On a different note, I asked another question in this forum (unfortunately with no replies), could you answer it?

                    Here it is -

                    Setting Object Styles for Movies

                    • 7. Re: Placing multiple images in a container (rectangle/oval/polygon)
                      ajaatshatru Level 1

                      Hi!

                       

                      Yes, through scripting adding images to the list is not possible (as it is a read-only list). Thank you so much for suggesting allGraphics. I think it can be used as a workaround in my case (have to check).

                       

                      Thanks a lot for replying. I asked one more question here (no replies), would you be able to answer it? Here it is - Setting Object Styles for Movies

                       

                      Thanks!

                      • 8. Re: Placing multiple images in a container (rectangle/oval/polygon)
                        ajaatshatru Level 1

                        Not familiar with Illustrator, worse luck. But thanks for replying

                        • 9. Re: Placing multiple images in a container (rectangle/oval/polygon)
                          rob day Adobe Community Professional & MVP

                          Are you trying to write a script that applies an object style to a placed movie, or are you simply trying to apply a style via the UI? If it's a script post in the InDesign Scripting forum.

                           

                          An AppleScript example would be like this where I've set a variable x to get the style named MovieStyle that I want to apply and then applied it to the current selection—the selection can be a placed movie.

                           

                          tell application "Adobe InDesign CC 2014"

                              set x to every object style of active document whose name is "MovieStyle"

                              set applied object style of selection to item 1 of x

                          end tell

                          • 10. Re: Placing multiple images in a container (rectangle/oval/polygon)
                            ajaatshatru Level 1

                            EDIT: Spelling, additional info

                             

                            No I am trying to achieve it via UI. Applying Object Style to a movie object or its container is trivial via scripting (and very much possible, as the API suggests too, appliesObjectStyle attribute is read/write for both movie object and the container).

                             

                            But via UI, once I select the container or the image inside it, the object style panel becomes deselected and no option is clickable. But if I click repeatedly it becomes active and I can select some object style, which (upon investigation via script) doesn't actually get affixed to the object. (Weird, right?)

                            • 11. Re: Placing multiple images in a container (rectangle/oval/polygon)
                              rob day Adobe Community Professional & MVP

                              I'm not seeing a problem with CC2014 on OSX 10.10.5. Maybe try resetting your prefs and clearing caches?

                               

                              Screen Shot 2016-09-10 at 1.05.32 PM.png

                              • 12. Re: Placing multiple images in a container (rectangle/oval/polygon)
                                ajaatshatru Level 1

                                EDIT: Script comment

                                Hi Rob!

                                 

                                Could you do a double check? Run a script on this document and check the result.

                                [Save the script as a plain-text file with the .jsx file extension to the Scripts Panel folder. Double click it to run it.]

                                 

                                var filepath = "~/Desktop/File.txt";

                                var txt_file = new File(filepath);

                                txt_file.open("w");

                                 

                                 

                                var doc = app.activeDocument; // I am assuming your document just has a movie placed in a rectangle

                                var pages = doc.pages;

                                var page = pages[0];

                                 

                                 

                                var movie = page.rectangles[0].movies[0];

                                var objectStyleName = movie.appliedObjectStyle.name;

                                 

                                 

                                txt_file.writeln(objectStyleName);

                                 

                                Could you post the result you get in the file which gets created as a result of this script. (On your Desktop). I would be grateful. Thanks!

                                • 13. Re: Placing multiple images in a container (rectangle/oval/polygon)
                                  rob day Adobe Community Professional & MVP

                                  Your var objectStyleName = movie.appliedObjectStyle.name; line throws an error in ExtendScript Toolkit.

                                  • 14. Re: Placing multiple images in a container (rectangle/oval/polygon)
                                    ajaatshatru Level 1

                                    Hi!

                                     

                                    Thanks a ton for trying this out. Could you tell me the exact error? I am assuming it could be undefined object?

                                     

                                    I see you ran this script using the ExtendScript toolkit, did you make sure the target above is InDesign CC? And that your document has nothing else but a rectangle with a movie placed in it? I can't think of any other reason why this piece of script should raise any errors.

                                     

                                    Thanks!Screen Shot 2016-09-11 at 00.39.55.png

                                    • 15. Re: Placing multiple images in a container (rectangle/oval/polygon)
                                      rob day Adobe Community Professional & MVP

                                      OK I see what you are seeing. Yes I had accidentally lost the link to the movie in my test.

                                       

                                      It looks like the movie object is an example of something that can be changed via scripting but not the UI. You are right, if the selection is the movie rather than the movie's image, the Object Styles are grayed out, so you have to direct select the movie's image to apply an object style.

                                       

                                      So I can apply a style's attributes to the movie object via AppleScript and the style's dropshadow shows—and yes if I get the style name via scripting it comes back as [none]—the style hasn't been applied but its attributes have.

                                       

                                      --this returns movie, which confirms I have the movie selected, and applies the style attributes the selection.

                                      tell application "Adobe InDesign CC 2014"

                                          set x to every object style of active document whose name is "MovieStyle"

                                          set applied object style of selection to item 1 of x

                                          get class of selection

                                      end tell

                                       

                                       

                                      Screen Shot 2016-09-10 at 4.04.50 PM.png

                                       

                                      Unless there's a good reason to apply the style to the movie object I would avoid it and apply the style to the image, which you can do in the UI or via scripting.

                                      • 16. Re: Placing multiple images in a container (rectangle/oval/polygon)
                                        ajaatshatru Level 1

                                        EDIT: Accidentally marked your answer as correct. Could you post it on the other link? I didn't realise this was a different thread.

                                         

                                        Woah! I never realised that by repeatedly clicking the movie I was actually selecting the image inside the movie object, which is infact the poster, [as I mentioned above that I was able to apply object style to something].

                                        This turns the tide as this is exactly what I was trying to achieve, I can set object style to the image and retrieve it via scripting. I knew I was missing something fundamental. This is my mind right now -

                                         

                                        Screen Shot 2016-09-11 at 02.04.17.png

                                         

                                        Thank you sir, you are the real MVP.

                                        • 17. Re: Placing multiple images in a container (rectangle/oval/polygon)
                                          rob day Adobe Community Professional & MVP

                                          Woah! I never realised that by repeatedly clicking the movie I was actually selecting the image inside the movie object,

                                          You can directly select the movie image by clicking once on it with the (white) Direct Selection Tool arrow. The black Selection Tool selects the movie.

                                          • 18. Re: Placing multiple images in a container (rectangle/oval/polygon)
                                            ajaatshatru Level 1

                                            Yes I realised that know. And even if you click multiple times, you eventually select the image object.

                                             

                                            Nice reaching-at-the-answer with you.

                                            • 19. Re: Placing multiple images in a container (rectangle/oval/polygon)
                                              Laubender Adobe Community Professional & MVP

                                              Hi,

                                              to answer the question of this thread's title:

                                              Yes, you can. And you need no group of images that is pasted inside a graphic frame.

                                               

                                              But you have to provide the frames where the images should be placed into.

                                              One ExtendScript example below where I use the add() method for this.


                                              Save that script with a jsx suffix before running.
                                              Otherwise nothing will happen.

                                               

                                              The images will be saved to the folder of your saved script.

                                               

                                              // PlaceTwoImages-to-OneGraphicFrame.jsx
                                              // Uwe Laubender
                                              
                                              /**
                                              * @@@BUILDINFO@@@ PlaceTwoImages-to-OneGraphicFrame.jsx !Version! Sun Sep 11 2016 15:13:52 GMT+0200
                                              */
                                              
                                              /*
                                                  WARNING:
                                                  Do NOT run this snippet without saving the code to a file !!
                                                 
                                                  Creates an InDesign document.
                                                  On page one is a graphic frame where two PNG images (with their container frames) are placed into.
                                                 
                                              */
                                              
                                              main();
                                              
                                              function main()
                                              {
                                                 
                                                  var path = File($.fileName).path;
                                                  if(!File($.fileName).name.match(/\.jsx$/i))
                                                  {alert("Save your script with suffix jsx and try again."); return};
                                              
                                                  var doc = app.documents.add
                                                  (
                                                      {
                                                          documentPreferences :
                                                          {
                                                              facingPages : false ,
                                                              pagesPerDocument : 3 ,
                                                              pageOrientation : PageOrientation.LANDSCAPE ,
                                                              pageWidth : "100mm" ,
                                                              pageHeight : "100mm"
                                                          }
                                                      }
                                                  );
                                              
                                                  var oval = doc.pages[0].ovals.add
                                                  (
                                                      {
                                                          geometricBounds : [0,0,"100mm","100mm"] ,
                                                          strokeWeight : 1,
                                                          strokeColor : doc.colors.itemByName("Black") ,
                                                          strokeTint : -1
                                                      }
                                                  );
                                                  doc.pages[1].rectangles.add
                                                  (
                                                      {
                                                          geometricBounds : [0,0,"100mm","100mm"] ,
                                                          fillColor : doc.colors.itemByName("Cyan") ,
                                                          strokeWeight : 0
                                                      }
                                                  );
                                                  doc.pages[2].rectangles.add
                                                  (
                                                      {
                                                          geometricBounds : [0,0,"100mm","100mm"] ,
                                                          fillColor : doc.colors.itemByName("Magenta")  ,
                                                          strokeWeight : 0
                                                      }
                                                  );
                                              
                                                  app.pngExportPreferences.properties =
                                                  {
                                                      pngExportRange : PNGExportRangeEnum.EXPORT_RANGE ,
                                                      exportResolution : 300 ,
                                                      exportingSpread : false
                                                  };
                                                  app.pngExportPreferences.pageString = "2";
                                                  doc.exportFile( ExportFormat.PNG_FORMAT , File(path+"/"+"image-1.png") , false );
                                              
                                                  app.pngExportPreferences.pageString = "3";
                                                  doc.exportFile( ExportFormat.PNG_FORMAT , File(path+"/"+"image-2.png") , false );
                                              
                                                  var rectangle1 = oval.rectangles.add
                                                  (
                                                      {
                                                          geometricBounds : [0,0,"50mm","100mm"] ,
                                                          strokeWeight : 0
                                                      }
                                                  );
                                                  var rectangle2 = oval.rectangles.add
                                                  (
                                                      {
                                                          geometricBounds : ["50mm",0,"100mm","100mm"] ,
                                                          strokeWeight : 0
                                                      }
                                                  );
                                                  if(File(path+"/"+"image-1.png").exists)
                                                  {
                                                      rectangle1.place(File(path+"/"+"image-1.png"),false);
                                                  };
                                                  if(File(path+"/"+"image-2.png").exists)
                                                  {
                                                      rectangle2.place(File(path+"/"+"image-2.png"),false);
                                                  };
                                              
                                              };
                                              

                                               

                                              Regards,
                                              Uwe

                                              1 person found this helpful
                                              • 20. Re: Placing multiple images in a container (rectangle/oval/polygon)
                                                ajaatshatru Level 1

                                                Hi Uwe!

                                                 

                                                Thank you for writing such a detailed script. Correct me if I'm wrong, here's what (I think) you did:

                                                1) Added 3 pages to a new document

                                                2) Oval on the first one, one rectangle each on second and third page (having a fill color)

                                                3) Exported second and third pages into a png image

                                                4) Added two rectangles to the aforementioned Oval

                                                5) Placed an image each in the two rectangles

                                                 

                                                My point is, how do you achieve this via UI? This is the point where I am stuck, just like you placed two rectangles inside an oval(works fine for a rectangle too), how do I achieve the same not via script?

                                                 

                                                Thanks a lot for clearing this out. (The question of multiple containers inside a container is sorted out.)

                                                • 21. Re: Placing multiple images in a container (rectangle/oval/polygon)
                                                  Laubender Adobe Community Professional & MVP

                                                  ajaatshatru wrote:


                                                  My point is, how do you achieve this via UI? This is the point where I am stuck, just like you placed two rectangles inside an oval(works fine for a rectangle too), how do I achieve the same not via script?…

                                                  The thing is:
                                                  You cannot do it via UI directly.

                                                  You have to use a method like add() with scripting.


                                                  Alternatively: You have to manipulate the code of an IDMS snippet file by opening it with a text editor and "move" or "nest" the code of two already existing graphic frames "inside" another graphic frame and place the snippet.

                                                   

                                                  To stay with my example where two rectangles are added to an oval:

                                                  1. Draw one oval on the page.

                                                  2. On top of it draw two rectangles.
                                                  Important: Draw all three frames in the position and with the size they are intended.

                                                  Do not move or scale any of them!


                                                  Select and export them to IDMS file format.
                                                  Open the IDMS with your text editor, text only.

                                                   

                                                  There will be a opening tag and a closing tag for the oval object in the idms code, that's just XML text. An opening and closing tag for the one rectangle and another pair of tags for the second rectangle.

                                                   

                                                  Just copy/paste the entire code for the two rectangles before the cosing tag of the oval to nest the objects inside the oval. Save the text file with suffix *.idms and place it on the page. You now can place images to the two rectangles.

                                                   

                                                  Regards,
                                                  Uwe

                                                  • 22. Re: Placing multiple images in a container (rectangle/oval/polygon)
                                                    ajaatshatru Level 1

                                                    Ow. I always believed that script and UI go hand in hand(otherwise what's the point). Going via scripting is better than the IDML way.

                                                     

                                                    Thanks a lot man!

                                                    • 23. Re: Placing multiple images in a container (rectangle/oval/polygon)
                                                      Laubender Adobe Community Professional & MVP

                                                      And I made a mistake with the idms example!


                                                      Do not copy/paste the code, but cut and paste.


                                                      The frames have unique IDs with dependences to other parts of the code.
                                                      Duplicating the frames is no good idea.

                                                       

                                                      Regards,
                                                      Uwe

                                                      • 25. Re: Placing multiple images in a container (rectangle/oval/polygon)
                                                        ajaatshatru Level 1

                                                        Hi Uwe!

                                                         

                                                        I see you are well familiar with ExtendScript, could you explain this behaviour to me?

                                                         

                                                        Point Size of a Paragraph Showing Different Value in ParagraphStyle

                                                         

                                                        Thanks!

                                                        • 26. Re: Placing multiple images in a container (rectangle/oval/polygon)
                                                          rob day Adobe Community Professional & MVP

                                                          A text's paragraph style can be overridden—when the text is selected, overridden styles have a + sign in the Paragraph Style panel. So the text in a paragraph can be a different point size than the point size assigned to the applied paragraph style.

                                                           

                                                          paragraph.pointSize can be different than paragraph.appliedParagraphStyle.pointSize. In the UI there is a Paragraph panel (paragraph.pointSize) and a Paragraph Styles panel (paragraph.appliedParagraphStyle.pointSize)

                                                          • 27. Re: Placing multiple images in a container (rectangle/oval/polygon)
                                                            ajaatshatru Level 1

                                                            Thanks a lot for this, kind sir!