Open topic with navigation

Editing Pictures

You can edit pictures in a couple of different ways:

• Edit image properties You can edit the properties for a picture, including its size, position, borders, margins, and more. This can be done through styles or by using local formatting. Using styles is usually recommended because the setting is automatically applied to any content using that style throughout the project, whereas local formatting affects only the particular content that you are working on.

  Best Practice: Style sheets are the best way to control the look of your content. See Best Practice—Using External Style Sheets Instead of Local Formatting .

• Edit image in MadCap Capture If you have MadCap Capture installed, you can open the image in that application to modify it (e.g., add callouts, crop).

  Capture is MadCap's screen capture and editing tool, which is tightly integrated with Flare. If you have Capture installed on your computer, you can use it to do any of the following from within Flare:

  • Insert screen capture images into topics You can capture an image on your screen and insert it into a topic at the same time. See Inserting Screen Capture Images into Topics.
  • Add screen capture files to projects You can capture an image on your screen and add the image file to the project (without inserting the picture into a topic). See Adding Screen Capture Files to Projects.
  • Edit pictures You can open any image in your project. The image opens in Capture, where you can make changes to it.
  • Launch MadCap Capture You can simply open the Capture application from Flare. See Launching MadCap Capture.
    

  Some advantages of using Capture include the following:

  • Layers You can add special effects or objects such as callouts, shapes, or lines. Because layers are used (rather than merging the objects into the image), you can easily return to the image later after you have saved it and modify just a single object (rather than re-creating the entire image).
  • Changes reflected automatically As soon as you save the image in Capture, the changes are automatically reflected anywhere the image was inserted in your project.
  • Single-sourcing images This feature reflects Capture's tight integration with MadCap Flare. For a single image, you can provide one group of settings for online output, and another group of settings for printed output. For example, you might want to use a resolution of 72 DPI for online output, and a resolution of 300 DPI for printed output. Rather than creating two separate images, you can single-source the image outputs. For more information see Creating Single-Source Images.

How to edit image properties using a style

1. Open the topic style sheet that you want to modify.

2. Complete one of the following sets of steps, depending on whether you want to use the Simplified view or Advanced view in the Stylesheet Editor.

   • Simplified The Simplified view is better for new users. It provides an easier way to apply properties to styles, with format options available from a toolbar (similar to the way one would use the Text Format toolbar to change the look topic content without a style). In many cases, only the most common property options are available in the Simplified view (e.g., font, letter/word spacing, paragraph alignment/indentation, auto-numbering format, borders, background). One advantage of the Simplified view is that you can apply a property to multiple styles at the same time. You can also click a check box to hide the properties in the editor, allowing you to see only the styles.
   • Advanced The Advanced view displays style classes and properties in hierarchical tree structures. It is not as quick as using the Simplified view, but it allows you to edit a great deal more settings than are available in the Simplified view.

   Warning: When editing styles, make sure the proper medium is selected in the Stylesheet Editor before you begin (you can do this from the Medium drop-down list). Flare remembers the last medium that you used when working in the style sheet, so it may or may not be the one that you want to use the next time around. If you want all mediums to use the same setting, select the "default" medium and the properties will "trickle down" to the other mediums. If you are not using different mediums, you do not need to worry about selecting one when you edit styles. See About Style Sheet Mediums.

If using the Simplified view:

1. In the local toolbar, make sure the first button displays (which means that the Simplified view is currently shown in the editor). If the button displays instead, then click it.
2. In the upper-left corner of the editor, click in the Show Styles field and select Show Image Styles.
3. From the area below, select the img tag. If you created classes of the tag, you can click the plus button next to the <img> tag and select the class instead.

4. In the local toolbar of the editor, click . The Properties dialog opens.

5. Use the tabs in the dialog to set any of the following:
   • Background See Adding Backgrounds to Pictures.
   • Border See Adding Borders to Pictures.
   • Margins See Adding Margins to Pictures.
   • Padding See Adding Padding to Pictures.
   • Position See Positioning Pictures.
   • Size See Resizing Pictures.

6. Click OK.

If using the Advanced view:

1. In the local toolbar, make sure the first button displays (which means that the Advanced view is currently shown in the editor). If the button displays instead, then click it.
2. In the upper-left corner of the editor, click in the Show Styles field and select Show Image Styles.
3. From the area below, select the img tag. If you created classes of the tag, you can click the plus button next to the <img> tag and select the class instead.

4. Use the properties section on the right side of the editor to apply settings for the style.

   • Background See Adding Backgrounds to Pictures.
   • Border See Adding Borders to Pictures.
   • Margins See Adding Margins to Pictures.
   • Padding See Adding Padding to Pictures.
3. Press CTRL+S or click to save your work.

How to edit image properties using local formatting

1. Do one of the following:

   • Open a topic where the image is inserted. Right-click on the image.

     OR

   • In the Content Explorer, locate and right-click the image file that you want to edit (e.g., Resources\Images\NameOfFile.png).
2. Select Edit Picture. The Edit Picture dialog opens.
3. You can use the General tab to make the following changes.

   • You can select a different image file. You can do this in various ways.

     You can select an image file already in the project by finding and choosing it in the Select File Area. Use the buttons in the local toolbar to view all files in a list, view files in their folder structure, etc.

     	Shows all of the files in the project in a list in the area below. If you click the button again, it switches to a folder tree view. In the list, you can click the "File," "Type," or "Path" column headers to sort the list alphabetically by that column data.
     	Shows or hides the folders that the files are stored in.
     	Shows or hides the files. If you click this button when the "Show Folders" button is selected, the area splits into two halves. The folder is shown on the left side, and the files and subfolders within it are shown on the right.
     	If the "Show Files" button is the only one selected, you can click this button to move up one folder level.

     You can click to find and select an image file outside of the project.

     If you want to link to an image stored on a website, rather than adding it to your project, you can enter the path directly into the field.

     If you want to select an image file that you recently inserted somewhere in your project, click the down arrow in the field next to and select the file from the list.

     Note: If you select an image file outside the project, that file is then copied and placed inside the project. The image file is stored in the Resources\Images folder of the Content Explorer.

   • If you want to apply a specific style class to the image, you can select it from the Style Class field. For more information see About Styles and Style Sheets.

     example

     Let's say that you have created in your style sheet a class of the <img> tag called "button" (i.e., img.button) and you have set a maximum size on that style class. The idea is that you want to use that style class whenever you insert an image of a button, ensuring that the image always displays in a very small size. Rather than using the default parent <img> tag when you insert the image, you select img.button from the Style Class drop-down.

   • In the Screen Tip field, you can type a phrase that will appear when the end user hovers over the picture.

   • In the Alternate Text field, you can type alternate text to display when the image is not available, such as when a disabled individual is using a screen reader.

     For more information see About Accessibility.

   • Select Apply the alternate text and screen tip to all image references if you want the same alternate and screen tip text to be used everywhere the image is used in the project.

     

4. You can use any of the other tabs to provide additional settings for the image.
   • Size and Print Size tabs You can use these tabs to resize the image. If you want to provide only one group of settings for the image, use the Size tab. If you want to provide two groups of settings—one for online output and another for print-based output—use the Size tab for online output, then use the Print Size tab for print-based output. See Resizing Pictures.
   • Position tab You can use this tab to adjust the positioning of the image on the page. This includes the ability to wrap text around an image or float a picture outside the frame holding the regular flow of text.. See Positioning Pictures.
   • Thumbnail tab You can use this tab to create a thumbnail version of the image in the output. See Showing Images as Thumbnails in Output.

   • Borders & Margins tab You can use this tab to set borders, margins, or padding for the image. See Adding Borders to Pictures, Adding Margins to Pictures, and Adding Padding to Pictures.

     

   • Background tab You can use this tab to add background settings (e.g., color, image) for the picture. See Adding Backgrounds to Pictures.
5. Click OK.
6. Press CTRL+S or click to save your work.

How to open images in MadCap Capture for editing

1. Do one of the following:

   • Open a topic where the image is inserted. Right-click on the image.

     OR

   • In the Content Explorer, locate and right-click the image file that you want to edit (e.g., Resources\Images\NameOfFile.png).
2. Select Edit With MadCap Capture. The image opens in MadCap Capture.
3. Edit the picture in Capture. For details, see Capture's online Help.
4. Save your work in Capture.

Note: You can also make any picture in your online Help interactive by linking it to another topic, bookmark within a topic, or an external file such as a website.

Note: If you are using the "generate web-safe images" option in WebHelp targets, images that link to external locations, such as websites, are not affected by that option. See Generating Web-Safe Images.

See Also

Open topic with navigation