Complete How-To Guide. Part IV: Variable Handling

Transcription

1 Table of Contents Page 1. Simple Text Variables Static and Variable Elements Create and Format Text Designate Variable Text Elements Variables and Variations Create a Text Variation Create and Preview HTML Form Variable Fonts and Colors 6 2. Short and Long Text Variables About Short and Long Text Variables Long Variations 8 3. Images, Image Scaling and Variable Images Loading and Using Static Images Scaling Static Images Variable Images Image Handling and Scaling of Variable Images Image Variations Chains Creating a Simple Chain Using an Invisible Chain Driver 19 Page 1 of 19

2 1. Simple Text Variables 1.1 Static and Variable Elements In Parts II and III of this guide, we have talked about some of the various features of the Web4Print system, but now we come to what makes Web4Print so useful and powerful: its ability to designate variable elements. Variable elements are those elements which are dependent on choices made by the end-user of the template as opposed to static elements, which are those unchanging parts of the template. For instance, a business card template design might contain an unchanging corporate logo (a static image) and various variable text elements, such as name and title. The best way to assemble a Web4Print template is to put together a nal design with text and image formatting the way you want it, then go through and designate which elements will be variable. We will next look at an example of creating a simple text variable Create and Format Text First we must create some text. Open a new document, draw a text frame, and enter three lines of text; name, title, and name of company: Format the text however you like and select different fonts/font sizes. While it is possible to change text formatting after variables are created, it is not recommended Designate Variable Text Elements Now, highlight the rst line. Switch to the Variable Tool. Note that the top toolbar has switched from text formatting options to various buttons related to variables: Page 2 of 19

3 1. Simple Text Variables 1.3 Designate Variable Text Elements (cont.) Click the Create/Edit Variable button. This will open the Create/Edit Variable Dialog box. You must enter a name for your new variable. Name would be suitable in this case. Leave the other settings as they are. Maximum Length refers to the maximum allowable length in characters. The Make paragraph text conditional checkbox, when selected, makes the paragraph containing the variable element disappear if that element is not lled in by the end-user. For instance, you might have a line reading Fax: , then you could designate the number as a variable and make the paragraph text conditional. This way if the end-user doesn t have a fax number, there won t be a line reading Fax: with no number. Once you have named your new variable, click OK. Now follow the same process to change the next line into a variable called Title. Next we will look at creating the HTML form. This HTML form is what the end-user will be lling out when using the template to generate a print-ready document. Page 3 of 19

4 1. Simple Text Variables 1.4 Variables and Variations When we convert static text to variable text (as shown on p. 2), a variable text eld is created. This variable text can then be lled in by the user. Elements with user-supplied content are known as variables - whether the content is variable text or variable images. Sometimes it is the case that rather than allowing the user to enter whatever text they wish, you want them to select from a nite series of choices. In this case, change a text variable to a text variation as shown below in section 1.5. Similarly, variable images can be converted to variations when the user is to choose from a nite set of images. In the web form the user lls out, variable text is lled into a text eld, whereas text variations are chosen from a drop-down list. 1.5 Creating a Text Variation Create a text variable. Now, with the Variable Tool still selected, click the Variations button on the top toolbar. This will open the De ne Variations dialog box: enter up to 20 possible variations click the View button next to any variation to see what it looks like in context on the page Enter up to 20 variations for the end-user to choose from. We will look at long variations, where the user can choose between long sections of text, in section 2.2 on page 8 of this guide. Page 4 of 19

5 1. Simple Text Variables 1.6 Create and Preview HTML Form With the Variable Tool selected, click the View/Edit HTML button from the top toolbar: This will open the HTML dialog box. It is in this dialog that you control what the user will see (the HTML input form) when they open the job on the server Job Title must be lled in. This is the title given to the job when the user opens the form via the web interface. 2. Names of the variables; these are not visible to the end-user. 3. Fill in a brief description of what user input the variable requires; for instance, for the Name eld in this example, you could have Please enter your name: 4. These buttons control the sort order; if you want to change the order the user will be asked for inputs, use these to move a eld up or down. 5. Divide Rule: these default to being selected; each places a rule under that input in the nal form. 6. Tick these boxes to mark a particular input as mandatory. In the example of a business card, you might have a mandatory Name and Title input, but leave Fax No. optional. 7. Opens a preview of the nal input form in your web browser. 8. and 9. Used to create lists of optional fonts or colours for the end-user to choose. Page 5 of 19

6 1. Simple Text Variables 1.6 Create and Preview HTML Form (cont.) Once you have lled in the Job Title and the descriptions for the Name and Title variables, click the Preview button to open the HTML input form in your web browser. If you see at this point that anything needs to be made more clear in your descriptions, or that the variables should be presented in a different order, or any other changes, you can go back to the HTML dialog box and make these adjustments. Note that the HTML preview is just to get an idea of how the user input form will look. If you try lling in the form and clicking the preview button, you will not be able to actually preview the end result. Creation of the PDF proof and the print-ready document can only be done by the Web4Print server after the template has been uploaded. 1.7 Variable Fonts and Colors In addition to giving the user the option to specify the content of a text variable, you can also give the option to select a font or colour. In the case of fonts, you must rst create a master list of font variations. Select the Variable Tool, and click the Font List button at the left of the Variable Toolbar: The Make Font List dialog box will open. Click the arrow button to the left of each of the rst few elds to open a drop-down menu of fonts, and select a few different fonts. Then click OK. This master list of fonts will now be available whenever you want to give the user the option of choosing a font. Create a simple text variable (not necessary if you already have a document open with variables). Now click the View/Edit HTML button. When the HTML dialog box opens, ll in the Job Title if you haven t already; this is always the mandatory rst step in using the HTML dialog box. Now click the Edit Fonts button to the right of one of the inputs: Page 6 of 19

7 1. Simple Text Variables 1.7 Variable Fonts and Colors (cont.) Select two or three of the fonts from your master list as options for this input. Now click the Preview button to see a preview of the HTML Input Form in your web browser. Note that now the user will be given the choice of those speci ed fonts for that input. Similarly, you can give the user the option to select a color for any variable. There is no need to create a master list of colors rst. Open the HTML dialog box and click the Edit Colors button next to one of the inputs. You can now select colors for the end-user to choose from. Colors are chosen from the color palette, which initially contains a pre-set range of colors, but can be added to at any time. New colors are added from either the Master Book of Web4Print colors or any of the Pantone Color Books. For more information on creating new colors, see page 9 of Part II of this guide. Page 7 of 19

8 2. Short and Long Text Variables 2.1 About Short and Long Text Variables Variable elements are those elements which allow user input. In Section 1 we looked at creating short text variables, or variables that allow a limited number of characters to be input by the user. Short variables are de ned as having a maximum character count of 50 or less. The maximum character count for long variables can be from 51 to unlimited (represented in the Create/Edit Variable dialog as 0 ). This is the range of maximum characters; long variables and short variables alike can accept small amounts of text. There is never a minimum number of characters to be entered by the user. Note that, once created, the variable type cannot be changed. If, for instance, you create a short text variable with maximum length of 20 characters, you can edit this variable later and change the maximum length to 50, but you will not be allowed to increase its maximum length to more than 50 as this would change it from a short variable to a long variable. Similarly, once you have created a long variable, you can change its maximum length to anything 51 and higher, or set it to unlimited ( 0 ), but you will not be allowed to change its maximum length to anything from 1-50 as this would change it to a short variable. Other than maximum length, there is another important difference between short and long variables. Short variables cannot accept Enter s (paragraph breaks) when lled in on the input form. The line of text generated by a short variable can break across lines, for instance, if the line exceeds the width of the frame, but placement of that line break cannot be chosen by the user. For example, if there is a case where you are using a narrow text frame, and you know that the variable text is likely to break across lines, the placement of that break may look a bit awkward if a long variable is used, the end-user can insert a break if necessary. Another thing to note about long variables is that each paragraph in a long variable will be formatted the same way. If you have a case where you want the user to enter several paragraphs of text, and the rst paragraph will have a drop cap, for instance, you must create one long variable for the rst (drop cap) paragraph, and another for the following paragraphs with no drop cap. 2.2 Long Variations We looked at (short) variations in section 1.4, now we will be looking at long variations. Remember the distinction between a text variable and a text variation: a text variable takes input from the user, whereas a variation gives the user a choice of several pre-de ned options. A long variation offers the user the choice of more than one long piece of text. Long variations can be used in any case where a body of static text will need to be replaced for a speci c purpose; examples include translation into a different language, or inclusion of different seasonal material for a holiday brochure. To create a long variation, enter a paragraph or two of text. Then select all that text and create a long variable. Now click the Variations button. The Create Variations dialog box will open. Enter a name for this variation, and click OK. Now click the SAVE VARIATION button. The Save Variation dialog box will open. Click OK. Page 8 of 19

9 2. Short and Long Text Variables 2.2 Long Variations (cont.) Note that, as with short variations, the strikethrough indicating a variable has now changed to an underline, indicating a variation. Now, to add more variations, click the Variations button again, enter a new label in the Create Variations dialog box and click OK. The text will be replaced with the word type, prompting you to type in new text for your new variation. Enter in a new paragraph of text. Now click the SAVE VARIATION button, then click OK in the Save Variation dialog box. Next we will take a look at editing long variations. You should now have two long variations saved in this variable. With the Variable Tool still selected, click anywhere in the paragraph and click the Variations button. When the Create Variations dialog box opens, instead of clicking New, click Edit. You will now see a window much like the Set Text dialog box for editing text streams we looked at on page 18 of Part II of this guide. This is the Edit Text Variation dialog box: select a variation here by name preview variation in this window You can select one of your variations, then click OK. Now that variation will open in the text frame. You may now edit it. When you are nished editing, click the Save Variation button, then click OK in the Save Variation dialog box. Note that, when selecting one of the long variations, the end-user will choose from a drop-down list of the names of the variations, not the variations themselves. This is sensible when you consider that there is no limit to the length of a long variation, and it could run to several pages. Choose names for your variations that will give the end-user a clear idea of what they are choosing. Page 9 of 19

10 3. Images, Image Scaling, and Variable Images 3.1 Loading and Using Static Images We will now look at including images in a Web4Print template. This topic was covered brie y on page 8 of Part II of this guide. First of all, it will be helpful to differentiate between static and variable images. Static images are simply images that will not change. In the example of a business card template, the corporate logo would probably be a static image; there is no need for the user to have any control over it and it should always stay the same. Variable images, like variable text, are images that the user uploads for inclusion in the print-ready document. In learning how images are handled in Web4Print, it will be simplest if we look at using static images rst. Variable images will be discussed on p. 14. When images are to be added, they cannot be placed directly from an external le to the page. They must rst be loaded into the Web4Print document. These loaded images can then be placed in image frames for use. Images in a number of different formats can be used: TIFF, JPEG, EPS, BMP or GIF. Create an image frame by selecting the Frame Tool, clicking the New Frame button, and selecting Image/Colour in the Create New Frame dialog box. Drag the Frame Tool to draw the frame. Now click the Load button from the Images Toolbar above the document window: The Select Image(s) dialog box will open. Page 10 of 19

11 3. Images, Image Scaling, and Variable Images 3.1 Loading and Using Static Images (cont.) The Select Image(s) dialog box: lename of selected image (if more than one image is selected, this displays number of images) navigate through folder structure here select from this list of images available in current folder folder shortcuts can be created by selecting File -> Create a folder shortcut, from the main menu select drive for top level of navigation this dropdown list restricts which image formats are visible; to see all images in folder, select All Files Use Linked Rasters option should usually be left unchecked. This option reduces processor load by using low-res preview images in place of EPS les on the server side; the high-res images are replaced only if you output from the same computer the client software resides on, and if the images are kept in the same location. A good rule of thumb is to leave this box unchecked. Page 11 of 19

12 3. Images, Image Scaling, and Variable Images 3.1 Loading and Using Static Images (cont.) Select an image to load and click OK. Now, to use the image you have just loaded, click the Use Image button. This will open the Set Image dialog box. Images loaded into the document and ready for use are listed in the left frame. Select an image from this list and a preview will appear in the right frame: Click OK to use the selected image in the current frame. Note that the option No_Image does not (as the name might suggest) use no image in the frame, it in fact uses a built-in image le which is solid white and is used for special purposes. To remove whatever image is being used in the current frame, select None rather than No_Image. Also note that the Use Image dialog must be opened to delete any loaded images from the current document. Page 12 of 19

13 3. Images, Image Scaling, and Variable Images 3.2 Scaling Static Images When you rst select an image to use in an image frame, by default there will be no scaling applied. The upper right corner of the frame and the image are aligned, and the image is its original size (in the example below left, most of the image isn t showing because it is so much larger than the frame itself). To t the image to the frame, use the Image Scale button in the Images Toolbar. This will open the Raster Graphic Scaling dialog box. This dialog gives you scaling options for both the vertical and the horizontal dimension. Typically, you will set one to Fit to Frame and the other to Preserve Aspect Ratio, depending on the relative dimensions of the frame and the image. In some cases, you want the image to ll the frame exactly and don t mind distorting the image; if this is the case, set both scaling options to Fit to Frame. The other scaling options are covered in more detail in the Web4Print Help system accessible from the top menu. Also, note that scaling options are applied to the frame, not the image. Once you have set scaling, if you select a new image for that frame, it will be scaled the same way the previous image was. image with no scaling scaling options set: horizontal - Preserve Aspect Ratio vertical - Fit to Frame Page 13 of 19

14 3. Images, Image Scaling, and Variable Images 3.3 Variable Images In the last section we looked at the use of static (non-changing) images. Now we will take a look at variable images. Like variable text, a variable image is one which is supplied by the user. When they ll out the HTML form to generate the nal print-ready document, they will be given the option to upload any variable images. On p. 15 we will look at image variations, when the user is given a choice from a nite set of images. To create a variable image: create an image frame, select the Variable Tool, Click the Create/Edit Variable button in the Variable Toolbar and give your new variable a name. When the user is accessing the template on the server, they will be given the opportunity to browse on their system for an image to upload. 3.4 Image Handling and Scaling of Variable Images Generally, it is best to exercise some control over the position and scaling of variable images. Otherwise, your page design is at the mercy of the original size of any image the user uploads. Create a variable image frame (as outlined above). Now, select Variable Image Handling from the Variable menu. The Variable Image Control dialog box will now open. Image handling options are fairly straightforward. First, set the image position. This will x the image to a particular corner or edge of the frame; scaling will then be applied relative to that position. For instance, if you set the horizontal position to Left and the vertical position to Top, the top left of the image will be xed to the top left corner of the frame. Any tting changes to the frame or to the image will be relative to this point. The Best Fit option scales the image such that it ts as closely as possible to the frame dimensions while preserving the image aspect ratio and keeping the image within the frame boundaries. The Fill Frame option ensures that the entire frame will be lled; the image s aspect ratio is preserved but, if necessary, some of the image may disappear outside the bounds of the frame. Page 14 of 19

15 3. Images, Image Scaling, and Variable Images 3.4 Image Handling and Scaling of Variable Images (cont.) Fit Frame to Image is fairly self-explanatory; the frame will contract or expand towards the anchor point speci ed in the positioning options to t the image exactly. After setting the variable image handling options, you may wish to set variable image scaling options. Select Variable Image Scaling from the Variable menu: The Raster Graphic Scaling dialog box will open; set these settings just as you would for a static image (as shown on p. 13 of this guide). Note that these scaling options will be over-ruled by any of the last 3 image handling options: Best Fit, Fill Frame, or Fit Frame to Image. 3.5 Image Variations Just as text variations can be speci ed to give the user the option to choose from a pre-selected list of text options, variable images can be designated as image variations. Before designating a variation image, a list of available images must be created. This is analogous to the creation of font lists for variable fonts (as shown on p. 6 of this guide). Load a few images into your Web4Print document. Now select the Variable Tool and click the Image List button: Page 15 of 19

16 3. Images, Image Scaling, and Variable Images 3.5 Image Variations (cont.) Now create an image list. This list can consist of some or all of the images available in your document. Next, create a variable image. Now, with the Variable Tool selected, click the Variations button in the Variable Toolbar. The Select Content Type dialog box will open. At this point if you select colour you can then create a list of colors; the end-user can then select a color with which to ll the frame. For the purpose of this example, select Image. You may now create a list of images for the end-user to choose from. Note that, unlike ordinary variable images, where the scaling options are applied to the frame, image variations each have their own scaling. This means some images might retain their original size, some might be scaled to t the frame, etc. To set individual image scaling, click the Edit Scaling button to the right of each entry in your image variations list. click here when image is scaled to your liking, and return to variations list opens Raster Graphic Scaling dialog box (to set scaling as shown for static images on page 13) resets scaling of both horizontal and vertical to none allows you to manually reposition image in frame by dragging resets position of image to upper left corner of frame Page 16 of 19

17 4. Chains 4.1 Creating a Simple Chain Chains are used to link variations together. A business card is a good example of a simple use of chained variables. Different branches of an organization might have different telephone numbers, addresses, even graphics, all of which would be designated as variations by the template creator. Rather than having to choose the correct address, phone number, etc., the end-user can just select the branch, and the other options will be chosen automatically via chained variables. We will now look at the creation of a simple chain. Create two text variables with several variations (as shown on p. 4 of this guide). For the purposes of this example, call; the rst variable fruit and specify the following variations: apple, banana, strawberry and grape. Call the second variable color and specify variations of red, yellow, purple and blue. Now, with the Variable Tool selected, click the Create/Edit Chains button: The Edit Chains dialog box will be opened: First, select a Chain Driver; this is the variable which the user will interact with through the HTML form. We will select the variable fruit. Now you can designate the variables to be driven by the Chain Driver. Page 17 of 19

18 4. Chains 4.1 Creating a Simple Chain (cont.) Up to four variables may be driven by the Chain Driver, but for this example we will just use one. For the rst Chain Driven entry, select the variable color. Now click OK, and the De ne Chained Items dialog box will open. For each user-chosen variation of the variable fruit shown on the left, there is a drop-down menu of variations of the variable color on the right. For this example, select the color of each fruit. Note that there are no restrictions on how these variations map to one another; in this example we are using the red variation twice (for both apple and strawberry ) and not using the blue variation at all. Once you have de ned all of the chained items, click OK. Now we will test our chained items. Click the Test Chains button to open the Test Chains dialog box. There is only one chain to choose from in our example. Click the test button to the right. The Test Chained Items dialog box will open. This dialog box is identical to the De ne Chained Items dialog shown above, with the addition of a test button for each chained item. Click this button to see how these variations look on the page. This test function is especially useful when using more complex chains involving different background colors/images, etc. Note: When chaining long variations, the drop-down list in the De ne Chained Items dialog will consist of the names of the variations rather than their actual content (for more on long variations, see p. 8 of this guide). Page 18 of 19

19 4. Chains 4.1 Using an Invisible Chain Driver In some cases, the Chain Driver is not to be output to the nal document. For example, you might have a template with a body of text with English, French and German variations, as well as a color scheme/background images chained to each of these options. In this case, you don t neccesarily want your end-user to be choosing from either the names of the long text variations or the actual background images, but rather, from the options English, Français or Deutsch, none of which terms are to actually appear in the nal document. The solution is to create a text frame with the desired variations, then change the text color to white. These variations can then be chained to the other desired changes to the document. It is a good idea to see to it that this frame is at the bottom of the frame stack so that there is no risk of it interfering with the rest of the design. Select the frame and then select Frame -> Position -> Send to Start from the top menu to do this. Page 19 of 19