====== Using Markers in Templates (For Advanced Users) ====== \\ In the Online Designer, the primary way to build out a template is to start with either an Adobe Photoshop or InDesign file. While it's possible to simply upload either a Photoshop (PSD) or InDesign (IDML) file, the Online Designer supports an extensive set of markers that can be used within the PSD or IDML to define functionality within the Online Designer. For example, you can set certain elements to be locked, or to allow an image to be swapped out, or how text should behave when edited, or if an element is visible only on the editor canvas and not the output. ==== Using Markers ==== Markers are essentially a set of tags that you add to a layer name in a PSD file or an element name in an IDML file. The Online Designer will use these to manage what can be done with that specific design element. Markers follow a very basic syntax.\\ Each marker is enclosed in a set of angle brackets <…> and inside is an abbreviated name for the marker (usually in uppercase) and a value for the marker (usually in lowercase) separated by an underscore. If there is no value defined, then the default value for that marker is used. While markers are case insensitive, we recommend using the pattern described above for enhanced readability. The first letter of the marker typically indicates the group it's associated with. //**NOTE: Markers apply ONLY to the layer or element to which they're added.** // Different groups of markers categorize their general functionality. Some markers may be limited depending on the editor mode. For example, Manipulation markers are largely restricted to use with the editor in Advanced mode and will not be available with the editor in Basic mode. The editor mode is configured in the Design Editor Preset assigned to the product in question. The groups of markers are: * Manipulations * Visualization * Text * Shapes * Layers * Predefined Values * Images * Image Placeholders * Barcode Placeholders * Object Inspector * Product Themes * Spot Channels * Miscellaneous * Shortcuts ==== Manipulations ==== Manipulations are things that can be done in the designer such as deleting, moving, and rotation. //**NOTE: These behaviors are only applicable if the editor is in Advanced mode.** // ^Marker^Type^Default Value^Description| ||True or False|t|Allows Deleting \\ By default, users can delete any element on the canvas when in advanced edit mode. To remove the Delete command from the editor menu for the element, add the marker.| ||True or False|t|Allows Drag-N-Drop \\ By default, the editor enables the drag-and-drop mode for image placeholders when you specify the markers. For this marker combination, adding marker disables dragging the content of placeholders.| ||True or False|t|Allows Move Horizontal \\ By default, the editor allows horizontal moves of design elements. To disable horizontal moves add the marker.| ||True or False|t|Allows Move Vertical \\ By default, the editor allows vertical moves of design elements. To disable vertical moves add the marker.| ||True or False|t|Allows Rotation \\ By default, the editor allows rotation of design elements. To disable rotation add the marker.| ||Value Set|N/A|Resize Corner \\ Defines how corner grips resize design elements. \\ \\ a - Arbitrary resize mode \\ p - Proportional resize mode \\ \\ By default, all design elements have corner grips on bounding rectangles allowing the element to be resized proportionately. Using this tag, you can define the behavior, first, for normal dragging of corner grips and second, for dragging of corner grips while holding down the Shift key. \\ \\ Example: \\ \\ Sets the first behavior to be proportional, and the second behavior with the Shift key pressed to be arbitrary. \\ \\ To disable corner grips add the marker.| ||True or False|t|Resize Edge \\ By default, only rich formatted text and image placeholders can be arbitrarily resized. To enable edge grips on bounding rectangles to allow arbitrary resizing of elements add the marker.| ==== Visualization ==== Visualizations control the visibility of design elements in the editor canvas and on the output. ^Marker^Type^Default Value^Description| ||True or False|t|No Print \\ By default, the editor shows all design elements on the canvas and output proof and hi-res images. To only show an element on the canvas, add the or marker.| ||True or False|t|No Show \\ By default, the editor shows all design elements on the canvas and output proof and hi-res images. To only show an element on the output, add the or marker.| ==== Text ==== Text markers are used to control the behavior of text elements in the editor canvas. ^Marker^Type^Default Value^Description| ||True or False|t|Automatically Scales Text \\ Applies ONLY to PSD templates \\ By default, you can resize point text only proportionately. To allow disproportionate scaling of point text to fit the bounding rectangle add the or marker.| ||Value|true| \\ Rich Text \\ Defines how paragraph text and text frames appear. \\ \\ true - enables rich text formatting \\ false - enables plain formatting \\ auto - enables rich formatting only if the content contains different styling \\ \\ By default, paragraph text and text frames appear as formatted text. To force plain text formatting, add the marker.| ||True or False|t| \\ Allows Change Alignment \\ By default, the horizontal text alignment buttons are enabled in the editor for point text elements. To disable these for a point text element, add the marker. \\ \\ If the Design Editor Preset has the horizontal text alignment buttons disabled, then this marker has no effect.| ||True or False|t| \\ Allows Change Bold Italic Underline \\ By default, the faux bold, faux italic, and underline buttons are enabled in the editor for point text elements. To disable these for a point text element, add the tag marker. \\ \\ If the Design Editor Preset has the text emphasis buttons disabled, this marker has no effect.| ||True or False|t| \\ Allows Change Font \\ By default, the font and font style can be changed for point text elements. To disable the Font Name and Font Style lists in the editor toolbar for a point text element, add the marker. \\ \\ If the Design Editor Preset has the font and font style buttons disabled, this marker has no effect.| ||True or False|t| \\ Allows Change Font Color \\ By default, the font color can be changed for point text elements. To disable the font color picker in the editor toolbar for a point text element, add the marker. \\ \\ If the Design Editor Preset has the font color picker disabled, this marker has no effect.| ||True or False|t| \\ Allows Change Font Size \\ By default, the font size can be changed for point text elements. To disable the font size selector in the editor toolbar for a point text element, add the marker. \\ \\ If the Design Editor Preset has the font size selector disabled, this marker has no effect.| ||True or False|t|Allows Change Text \\ By default, the content of both bounded and point text elements can be changed. To disable changing the content for a text element, add the marker.| ||True or False|t| \\ Allows Editing Shadow \\ By default, the shadow can be changed for point text elements. To disable the shadow button in the editor toolbar for a point text element, add the marker. \\ \\ If the Design Editor Preset has the shadow button disabled, this marker has no effect.| ||True or False|t| \\ Allows Editing Stroke \\ By default, the stroke can be changed for a point text element. To disable the stroke button in the editor toolbar for a point text element, add the marker. \\ \\ If the Design Editor Preset has the stroke button disabled, this marker has no effect.| ||Value|1| \\ Column Count \\ \\ Applies ONLY to PSD templates \\ By default, a rich formatted text element has only one column. While Photoshop does not support multiple columns, the Online Designer does. To define more than one column for a rich text element, add the marker, with x representing the desired number of columns. \\ \\ Example: \\ defines the rich text field to have two columns in the editor.| ||True or False|t|Allows Change Column Count \\ By default, you can change the column count that was originally set up using the marker, when using a Photoshop based template. To disable the Columns button in the editor toolbar, add the marker.| ||Value| | \\ Character Limit \\ By default, no character limit is defined for a rich text element. To define a character limit for a rich text element, add the marker, with x representing the character limit. \\ \\ Example: \\ defines the character limit to be 500 characters. \\ | ||Value| | \\ Max Line Count \\ By default, no line count limit is defined for a point or bounded text element. To define a line count limit for a point or bounded text element, add the marker, with x representing the line count limit. \\ \\ Example: \\ defines the line count limit to be 3 lines. \\ | ||value| | \\ Max Line Length \\ By default, no characters per line limit is defined for a point or bounded text element. To define a characters per line limit for a point or bounded text element, add the marker, with x representing the characters per line limit. \\ \\ Example: \\ defines the characters per line limit to be 50 characters. \\ | ||Value|clip| \\ Overflow Strategy \\ Defines how to handle plain bounded or rich formatted text if it goes out of bounds. \\ \\ clip - while typing, crop the excessive text (supports rich text formatting) \\ expandBox - when the bottom bounding box is reached, expand the bottom bound (supports rich text formatting) \\ fitToBox - when the end of a line is reached, move to the next line first, and when the bottom of the bounding box is reached, then shrink the text (ignores rich text formatting) \\ fitToWidth - when the end of a line is reached, shrink the text (ignores rich text formatting) \\ \\ \\ By default, plain bounded or rich formatted text that goes out of bounds is clipped. To change how text is handled when it goes out of bounds, add the marker, with x representing the overflow strategy. \\ \\ Example: \\ defines the clipping behavior to shrink the text when the end of a line is reached. \\ | ||Value|size| \\ Shrink Mode \\ Defines how to handle plain bounded text if it goes out of bounds. \\ \\ scale - shrinks the text in width or height \\ size - changes the font size \\ \\ \\ By default, plain bounded text that goes out of bounds is clipped. To change how plain bounded text is fitted, add the marker, with x representing the shrink mode. \\ \\ Example: \\ defines the shrink mode to change the font size. \\ \\ The scale mode is incompatible with the fitToBox overflow strategy. In this mode, the Online Designer automatically uses the fitToWidth strategy. \\ | ||True or False|t|Text Placeholder \\ To enable a prompt in the editor canvas to fill out a bounded or point text element, add the or marker. If it's not filled out, the prompt is NOT shown on the proof or hi-res output.| ||Value|top| \\ Vertical Alignment \\ Defines the vertical alignment for a text string in a text element. \\ \\ top - aligns a text string with the top bound of the text element \\ center - aligns a text string with the center of the text element \\ bottom - aligns a text string with the bottom of the text element \\ \\ By default, a text string is aligned to the top of a text element. To change the vertical alignment, add the marker, with x representing the alignment value. \\ \\ \\ Example: \\ \\ defines the vertical alignment to be with the bottom of the text element. \\ | ==== Shapes ==== ^Marker^Type^Default Value^Description| ||True or False|t| \\ Allows Change Border Color \\ By default, the border color can be changed for a shape element and the bounding boxes of images and image placeholders. To disable the border color button in the editor toolbar for a shape element and the bounding boxes of images and image placeholders, add the marker. \\ \\ If the Design Editor Preset has the border color button disabled, this marker has no effect.| ||True or False|t|Allows Change Border Width \\ By default, the border width can be changed for a shape element and the bounding boxes of images and image placeholders. To disable the border color button in the editor toolbar for a shape element and the bounding boxes of images and image placeholders, add the marker.| ||True or False|t|Allows Change Fill Color \\ By default, the fill color can be changed for a shape element. To disable the fill color button in the editor toolbar for a shape element, add the marker.| ||True or False|t|Rasterize \\ By default, shape elements are output as vector shapes in the Hi-Res Output. To force rasterization in the Hi-res Output based on the DPI specified in the Design Editor Preset, add the marker.| ==== Layers ==== ^Marker^Type^Default Value^Description| ||True or False|t| \\ Allows Change Opacity of layers \\ By default, the opacity can be changed for design elements. To disable the opacity slider in the editor toolbar for a design element, add the marker. \\ \\ If the Design Editor Preset has the opacity slider disabled, this marker has no effect.| ||Value| |Not currently available.| ||Value|1|Not currently available.| ||True or False|t|Not currently available.| ==== Images ==== ^Marker^Type^Default Value^Description| ||Value|Not currently available| | ||True or False|t|Allows Change of Images and placeholder content \\ By default, the editor allows users to replace the content of images and image placeholders. To disable the select image button in the editor toolbar for images and image placeholders, add the marker.| ||True or False|t|Allows for Editing Images and placeholder content \\ By default, the editor allows users to edit both images and content of image placeholders. To disable the edit image button in the editor toolbar for images and image placeholders, add the marker.| ||True or False|t|Allows user to Keep Color Overlay \\ By default, the editor resets the overlaying color when changing images and placeholders. To keep the overlaying color effect of images and placeholders being changed, add the marker.| ||Value|none| \\ Image Effect \\ Defines the image effect applied to images and image placeholders. \\ \\ none - no effects apply \\ blackAndWhite - converts images to monochrome \\ colorize - converts images and rasterized shapes to grayscale and allows you to specify the fill color with an marker \\ flipVertical - flips images around the vertical axis \\ flipHorizontal - flips images around the horizontal axis \\ \\ By default, no effect is applied. To change the image effect, add the marker, with x representing the effect value. \\ \\ \\ Example: \\ \\ defines the image effect to convert to black and white. \\ \\ defines the image effect to convert to grayscale. Should be paired with the marker or images will be rendered white.| ||Value| | \\ Image Fill Color \\ This is used in conjunction with the marker to specify the CMYK or RGB color for the fill. Without this marker, the image will be rendered white. \\ \\ Example: \\ defines the image to be converted to grayscale with a 100% cyan fill color.| ==== Image Placeholders ==== ^Marker^Type^Default Value^Description| ||True or False|t|Allows Cover Mode \\ By default, the cover mode is disabled for placeholder images which may result in empty areas in the placeholder. To force an image inserted into a placeholder to cover the full area and prevent arbitrary resizing or rotating, add the marker.| ||True or False|t|Allows Edit Content \\ By default, image placeholder content can be edited. To prevent editing of placeholder content, add the marker.| ||Value|center| \\ Aligns Placeholder Content Horizontally \\ Defines the horizontal alignment of placeholder content in relation to the bounding box. \\ \\ center - center horizontal alignment \\ left - left horizontal alignment \\ right - right horizontal alignment \\ \\ By default, the content is center horizontal aligned. To change the content horizontal alignment, add the marker, with x representing the alignment value. \\ \\ \\ Example: \\ \\ defines the content horizontal alignment to be to the right of the bounding box.| ||Value|center| \\ Aligns Placeholder Content Vertically \\ Defines the vertical alignment of placeholder content in relation to the bounding box. \\ \\ center - center vertical alignment \\ top - top vertical alignment \\ bottom - bottom vertical alignment \\ \\ By default, the content is center vertical aligned. To change the content vertical alignment, add the marker, with x representing the alignment value. \\ \\ \\ Example: \\ \\ defines the content vertical alignment to be to the bottom of the bounding box.| ||Value|normal| \\ Placeholder type \\ Defines the placeholder behavior. \\ \\ normal - image with placeholder behavior \\ empty - an empty placeholder without an image \\ stub - an image placeholder with a stub image that is not included in the hi-res output \\ \\ By default, an image placeholder shows the image with placeholder behavior. To change the placeholder behavior, add the marker, with x representing the placeholder behavior. \\ \\ \\ Example: \\ \\ will show the image placeholder with a stub image that is not included in the hi-res output if the stub isn't replaced.| ||True or False|t|Fixes Stub Content Size \\ By default, stub images are resized along with placeholders. To prevent the stub image from being resized with the placeholder, add the marker.| ||Value|fit| \\ Placeholder Resize Mode \\ Defines how an image inserted into the placeholder should be resized. \\ \\ fit - the image is resized proportionally to fit the placeholder with the resulting image size equal to or smaller than the placeholder size \\ fill - the image is resized proportionally to fill the placeholder with the resulting image size is equal to or larger than the placeholder size \\ original - the image is placed in the center of the placeholder at its original size \\ \\ By default, the image is resized proportionally to fit the placeholder with the resulting image size equal to or smaller than the placeholder size. To change the resize behavior, add the marker, with x representing the placeholder resize behavior. \\ \\ \\ Example: \\ \\ will place the image in the center of the placeholder at its original size.| ||Value| | \\ Placeholder Identifier \\ By default, placeholders are treated separately. Placeholders can be linked to share an image. When one of the linked placeholders has it's image replaced, all of the other linked placeholders will automatically be updated. To link placeholders, add the marker, with x representing the name of the linked placeholders. \\ \\ \\ Example: \\ marker is added to 3 out of 4 placeholders on a template. When the user updates the image on one of the placeholders with the marker, the other two with the same marker will automatically be updated.| ||True or False|t|Show Select Button \\ By default, the select button is enabled on a placeholder to allow users to replace images. To disable this button on the placeholder image, add the marker.| ==== Barcode Placeholders ==== ^Marker^Type^Default Value^Description| ||True or False|t|Allows Change Content \\ By default, users can edit barcodes. To remove the ability to edit a barcode, add the marker.| ||True or False|t|Allows Change Type \\ By default, users can change the barcode type. To remove the ability to change the barcode type, add the marker.| ||Value|QR-CODE| \\ Barcode Placeholders \\ Defines a barcode stub in image layers. \\ \\ EAN-8 \\ EAN-13 \\ UPC-A \\ UPC-E \\ QR-CODE \\ CODE-128 \\ \\ By default, barcodes are imported as raster images. To change the import behavior to a stub, add the marker, with x representing the barcode type. \\ \\ \\ Example: \\ \\ defines the barcode to be a stub and is encoded as a Code 128.| \\