render-image-preview-with-mockup

This task prepares a preview for the specified artifact (image) using a mockup.

note

The rendering is performed based on the settings specified in this task. The rendering settings configured in the editor will be ignored.

Parameters

• mockupId (string): The ID of the mockup in Asset Storage.
• mockupFolder (string): The path to the mockup folder in Asset Storage (e.g., /Cards/Stack).
• mockupName (string): The name of the mockup file in Asset Storage within the specified folder (e.g., Card.psd).
• previewWidth (number): The width of the preview image in pixels.
• previewHeight (number): The height of the preview image in pixels.
• previewFormat (string): The output file format for the preview image, either Jpeg or Png.
• mockupTargetArtworkLayers (string[]): An array of smart-object names within the mockup where the artifact will be inserted. You may find this useful if mockup masks are treated as smart object layers.
• fitMode (string): The mode for fitting the image, either Fit, Shrink, Resize, or Fill.

These parameters support argument interpolation following the common rules.

note

If only mockupFolder is specified (i.e., mockupId and mockupName are not set):

• Each single input artifact will be inserted into all mockups in the specified folder.
• Only one element from each collection of input artifacts will be inserted into all mockups in the specified folder.

Examples

Using a specific mockup by ID

{
    "description": "Prepare preview of image file with mockup",
    "name": "render-previews",
    "type": "render-image-preview-with-mockup",
    "inputArtifacts": [
        "image", "image2"
    ],
    "parameters": {
        "mockupId": "6565dac9c2807e72a406fb7a",
        "previewWidth": 500,
        "previewHeight": 500,
        "previewFormat": "Jpeg",
        "fitMode": "Shrink"
    },
    "outputArtifacts": [
        "preview", "prevew2"
    ]
}

Using a mockup folder with target layers

This is how to generate a preview when a custom field MockupFolderPath specifies a folder with mockups, and all of them contain a Design smart object.

{
    "description": "Prepare artwork preview with mockup folder",
    "name": "render-previews",
    "type": "render-image-preview-with-mockup",
    "inputArtifacts": [
        "artwork"
    ],
    "parameters": {
        "mockupFolder": "{{project.items.@.fields.MockupFolderPath}}",
        "mockupTargetArtworkLayers": [
            "Design"
        ],
        "previewWidth": 2048,
        "previewHeight": 2048,
        "previewFormat": "Png"
    },
    "outputArtifacts": [
        "preview*"
    ]
}