Add and Edit Images in Engagement Questionnaires

Enhance visual communication and provide context to residents by adding images to your engagement questionnaires. Images serve as content elements that can illustrate concepts, show examples, provide visual context, or break up text sections, making questionnaires more engaging and informative for municipal communication.

Quick Steps

1. Navigate to Ask > Surveys > Build select your survey
   
   
2. Drag "Image" from the Content sidebar under "MEDIA"
3. Drop the image element into your desired position in the questionnaire
4. Configure block heading, upload image, and size settings in the modal that opens automatically
   
   
5. Click "Save" to apply changes and see the in-builder preview

In-Depth Guide

Adding a New Image

Access the Questionnaire Builder Navigate to the Engage section and go to the Activities listing screen. Find your engagement questionnaire and select "Edit" to open the Questionnaire Builder interface.

Add the Image Element From the Content sidebar on the right, locate "Image" under the "MEDIA" section. Drag the Image element and drop it into your questionnaire at the desired position.

The questionnaire builder will display a drop zone where you can position your new image. Release the Image element when the drop zone appears in your preferred location.

Configure Image Settings Once you drop the Image element into your questionnaire, the configuration modal automatically opens. Configure the image display options and content.

Add Block Heading (Optional) Use the Block Heading field to provide a title or caption for your image. This heading appears above the image and can explain what the image shows, provide context, or serve as a section divider.

Upload Image In the "Image" section, upload the visual content you want to display:

• Upload Methods: Drag and drop image files directly into the upload area or click to browse and select files
• File Requirements:
  • Supported formats: .jpg or .png only
  • Maximum file size: 10MB per image
  • Recommended: High-quality images that display clearly at various screen sizes

Configure Display Settings In the "Settings" section, choose how the image should be displayed:

• Size: Select from three display size options:
  • Sm (Small): Compact image display suitable for icons, small illustrations, or inline images
  • Md (Medium): Standard image size appropriate for most content images and visual examples
  • Lg (Large): Full-width or prominent image display for hero images, detailed diagrams, or featured visuals

Save Your Configuration After configuring the heading, uploading your image, and selecting the display size, click "Save" to apply your changes. The modal will close and you'll see an in-builder preview of your image within the questionnaire.

Editing Existing Images

Locate and Select the Image In the Questionnaire Builder, find the image you want to modify. Click on the edit icon on the image block to open the configuration modal and access all editing options.

Modify Image Content Update the block heading, replace the image with a new upload, or adjust the display size as needed. Click "Save" to apply your changes and close the configuration modal. Once saved, you'll see an in-builder preview of your updated image.

Replace Images Upload a new image file to replace the existing one. Ensure the new image maintains appropriate context and quality for your questionnaire's purpose.

Adjust Display Size Modify the size setting based on the image's importance, detail level, and role within the questionnaire flow. Consider how size changes affect the overall questionnaire layout and user experience.

Reorder Images Reposition images within your questionnaire flow using two methods:

• Drag-and-drop: Click and hold the image block, then drag it to a new position. The questionnaire will show drop zones indicating valid placement locations.
• Toolbar: Use the reordering options available in the image's toolbar for precise positioning.

Remove Images To delete an image, use the delete option in the image's toolbar. The image will be removed immediately without a confirmation prompt.

Image Design Best Practices

Choose High-Quality Images Use clear, professional images that accurately represent the content or concepts you're presenting. Poor image quality can detract from the questionnaire's credibility and effectiveness.

Optimize for Multiple Screen Sizes Test images across different devices to ensure they remain clear and appropriately sized on both desktop and mobile displays. Consider how image details will appear on smaller screens.

Provide Context with Headings Use block headings to explain what images show, especially for technical diagrams, maps, or concepts that may not be immediately clear to all respondents.

Consider Accessibility While images enhance visual communication, ensure that essential information is also conveyed through text for users who may not be able to see images clearly.

Match Content Purpose Choose images that directly support your questionnaire's goals, whether providing visual examples, showing proposed designs, or illustrating current conditions.

Methodology

Image Display Processing Uploaded images are automatically optimized for web display while maintaining visual quality. The system handles different image dimensions and aspect ratios for consistent presentation across the questionnaire.

Size Rendering The three size options (Small, Medium, Large) adapt to different screen sizes while maintaining aspect ratios. Size selection affects both the visual prominence and loading characteristics of images.

Block Heading Integration Block headings appear as styled text above images, providing consistent formatting that integrates with the overall questionnaire design theme.

Language Support Image content elements support multi-language engagement questionnaires when configured. Block headings are translated while images remain universal across language versions.

Edge Cases, Exceptions & Known Issues

Drag and Drop Functionality

• Images must be dropped in valid drop zones within the questionnaire area
• Dropping images outside the builder area will not add them to your questionnaire

Image Upload Limitations

• Only .jpg and .png formats are supported; other image formats will be rejected
• Files exceeding 10MB will not upload and will display an error message
• Corrupted or invalid image files may fail to upload or display properly

Mobile Display Considerations

• Image details may be less visible on smaller screens regardless of size setting

Size Setting Behavior

• Size settings provide relative scaling rather than absolute pixel dimensions
• Very wide or tall images may display differently than expected across size settings
• Image aspect ratios are preserved, which may affect how different size settings appear

Accessibility Considerations

• Consider providing equivalent textual information when images contain important details

Content Management

• Replacing images after questionnaire deployment may affect respondent experience

Visual Design Impact

• Image placement affects questionnaire flow and visual hierarchy
• Size selection should consider surrounding content and overall questionnaire layout
• Multiple large images may overwhelm text content and affect questionnaire focus