• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Add an image to a frame using JavaScript

Explorer ,
Feb 16, 2022 Feb 16, 2022

Copy link to clipboard

Copied

I can't find a way to programmatiaclly add an image to a frame placed with "Frame Tool" in the document.
This is the Frame layer in Photoshop.

 

fraktall_0-1645076973226.png

 
Some verification code and output:

 

$.writeln(frameLayer.typename); // === "LayerSet"
$.writeln(frameLayer.name); // === "placeholder_frame"
$.writeln(frameLayer.artLayers.length); // === 0
$.writeln(frameLayer.layers.length); // === 0
$.writeln(frameLayer.layerSets.length); // === 0

 

I assume that's ok, but there's no `add` method or anything like that. Object content from vscode debug console:

 

fraktall_1-1645077239012.png

 

How can an I add an image to this layer?

 

 

TOPICS
Actions and scripting

Views

431

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Feb 16, 2022 Feb 16, 2022

Many things are not covered under the standard JavaScript object model reference, one has to use action manager code. The easiest way to do this is to use the scripting listener plugin and or the clean sl script on the recorded code, however some folk understand how to write it from scratch without this crutch.

 

Presuming that your existing code is set to open the targetFile.psd and to select the targetLayer that contains the frame:

 

 

placeEvent(5, new File( "~/Desktop/sourceFile.jpg" ), true
...

Likes

Translate

Translate
Community Expert ,
Feb 16, 2022 Feb 16, 2022

Copy link to clipboard

Copied

A couple of different methods that come to mind:

  • Copy/paste content into active frame
  • Place linked or embedded into active frame

 

Or the opposite of what you currently have:

  • Existing layer active, then add the frame

 

Obvioulsy drag-n-drop is not for scripting. More here:

https://helpx.adobe.com/photoshop/using/place-image-frame-tool.html

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 16, 2022 Feb 16, 2022

Copy link to clipboard

Copied

Thanks, though not sure I'm following. The frame layer is active but there's no method that'd would allow adding an image to it. I thought about doing something like that:

const imageFile = new File("/path/to/file.jpg");
frameLayer.artLayers.add(imageFile);

Obviously this is not working...

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 16, 2022 Feb 16, 2022

Copy link to clipboard

Copied

Did you try:

  • Copy/paste content into active frame layer?
  • Place linked or place embedded into active frame layer?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 16, 2022 Feb 16, 2022

Copy link to clipboard

Copied

I'm more than happy to try, do you know if there's a programmatic way of doing both!

Also what "linked" and "embedded" is referred to in this context?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 16, 2022 Feb 16, 2022

Copy link to clipboard

Copied


@fraktall wrote:

I'm more than happy to try, do you know if there's a programmatic way of doing both!


 

I feel that this discussion is lacking context for the source that should be masked via the frame... What is the source image?

 

  • A layer in the current doc?
  • A different open doc?
  • An unopened doc on disk?

 

What is your particular use case? Where is the source data that you wish to mask via a frame?

 

Should I use your example of:

 

const imageFile = new File("/path/to/file.jpg");

 


Also what "linked" and "embedded" is referred to in this context?


 

A place image, as in File > Place Linked or File > Place Embedded (as mentioned in the previous link to using frames).

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 16, 2022 Feb 16, 2022

Copy link to clipboard

Copied

My use case:

- a psd file with a mockup

- frame in the middle to contain an image

- script opens the psd doc

- script locates a jpg file in the file system

- script should add that image to the frame (just because the image can be placed nicely, without the need to adjust size if I were to use a smart object layer instead)

 

no masking involved

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 16, 2022 Feb 16, 2022

Copy link to clipboard

Copied

Many things are not covered under the standard JavaScript object model reference, one has to use action manager code. The easiest way to do this is to use the scripting listener plugin and or the clean sl script on the recorded code, however some folk understand how to write it from scratch without this crutch.

 

Presuming that your existing code is set to open the targetFile.psd and to select the targetLayer that contains the frame:

 

 

placeEvent(5, new File( "~/Desktop/sourceFile.jpg" ), true, 0, 0);

function placeEvent(ID, null2, linked, horizontal, vertical) {
	var s2t = function (s) {
		return app.stringIDToTypeID(s);
	};
	var descriptor = new ActionDescriptor();
	var descriptor2 = new ActionDescriptor();
	descriptor.putInteger( s2t( "ID" ), ID );
	descriptor.putPath( s2t( "null" ), null2 );
	descriptor.putBoolean( s2t( "linked" ), linked ); // change true to false to embedd
	descriptor.putEnumerated( s2t( "freeTransformCenterState" ), s2t( "quadCenterState" ), s2t( "QCSAverage" ));
	descriptor2.putUnitDouble( s2t( "horizontal" ), s2t( "pixelsUnit" ), horizontal );
	descriptor2.putUnitDouble( s2t( "vertical" ), s2t( "pixelsUnit" ), vertical );
	descriptor.putObject( s2t( "offset" ), s2t( "offset" ), descriptor2 );
	executeAction(s2t( "placeEvent" ), descriptor, DialogModes.NO);
}

 

 

The above code presumes a file titled sourceFile.jpg on the desktop.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 16, 2022 Feb 16, 2022

Copy link to clipboard

Copied

Thanks! I'm sure this is a step in the right direction, though it's placing the file above the frame when I run the script.

fraktall_0-1645083860428.png

I set `doc.activeLayer` to the `placeholder_frame` layer.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 17, 2022 Feb 17, 2022

Copy link to clipboard

Copied

When I tested without scripting, I was able to copy/paste into the frame. When I tried with scripting, it pasted above the frame.

 

The script listener code provided was a slightly modified "recording" of placing the file directly into the frame, it obviously worked for me at the time otherwise I wouldn't have poste it... I'm not sure why it isn't working for you. Perhaps you should install scripting listener and try yourself. Good luck!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Dec 17, 2022 Dec 17, 2022

Copy link to clipboard

Copied

LATEST

I've got some framing programmed, sometimes it performes correctly, sometimes not.

Here is what I found after some testing....

 

Setup ;

50 cm x 50 cm image.

Turn on grids at 33%, subdivisions 1.

Select the frame tool and draw INSIDE any 3x3 division (11%) and a NEW frame group layer is created on top of the image.

Select the frame tool and select or draw more than a 3x3 division (11%) and the frame group is created in the SAME layer as the image without creating a new layer on top.

 

Programmatically - this sucks.

What's worse is that if your image is a smart object and you resize your image down 50%, no selection by the frame tool will create a frame on the image... A new layer with the frame group will ALWAYS be created.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines