iFrame

Engagement iFrame Content Type

Creating an iFrame

Title: Include the title of the iFrame.

Content Rows

  • Add Content: Click on this button to add a body content row.
  • Add View: Select from the drop-down menu what content the View will display.
    • Documents
      • Display: Select from the drop-down menu what the View will display from the content type.
      • ▼ Options
        • Search
        • Projects: Select the project from the drop-down menu
        • Items per page: Specify the number of items displayed per page.
        • Offset Results
        • Pagination: Select from the drop-down menu how the pagination will be displayed.
        • Argument
    • Calendar
      • Display: Select from the drop-down menu what the View will display from the content type.
      • ▼ Options
        • Projects: Select the project from the drop-down menu
        • Items per page: Specify the number of items displayed per page.
        • Offset Results
        • Pagination: Select from the drop-down menu how the pagination will be displayed.
        • Argument
    • Projects — iFrames
      • Display: Select from the drop-down menu what the View will display from the content type.
        • All Projects
        • ▼ Options
          • Search
          • Categories: Select the category of the project from the drop-down menu.
          • State: Select the state of the project from the drop-down menu.
          • Items per page: Specify the number of items displayed per page.
          • Offset Results
          • Pagination: Select from the drop-down menu how the pagination will be displayed.
          • Argument
        • Homepage – Active
        • ▼ Options
          • Items per page: Specify the number of items displayed per page.
          • Offset Results
          • Pagination: Select from the drop-down menu how the pagination will be displayed.
          • Argument
        • Homepage – Featured
        • ▼ Options
          • Items per page: Specify the number of items displayed per page.
          • Offset Results
          • Pagination: Select from the drop-down menu how the pagination will be displayed.
          • Argument

Embedding an iFrame

The CiviKit Engagement Engagement Site is able to embed iframes through the WYSIWYG editor, most notably for GIS maps. To embed an iframe, please ensure the following:

  • The iframe tag is opened and closed
    • <iframe></iframe>
  • The iframe has a valid source attribute
    •  <iframe src=”http://iframesource.com“></iframe> (replace with actual iframe src URL)
  • An appropriate defined height attribute has been included (the suffix of ‘px’ can be included or not in the height value)
    • <iframe src=”http://iframesource.com” height=”400″ ></iframe>
      • Important Mobile Note: it is mobile best practice to keep iframes below 400px tall where possible. This is because it can be difficult for users to scroll past a map that is taller than the device's resolution, meaning if the device's height resolution is 480px and the map is 500px tall, the user may get into a situation where they cannot actively scroll outside the iframe to reach below or above the iframe.
  • A relative width of 100% has been included
    • <iframe src=”http://iframesource.com” height=”400″ width=”100%”></iframe>
    • Important Mobile Note: using the relative 100% width will ensure that the iframe renders in a responsive manner depending on the width resolution of the device being used.
  • Additional attributes of marginheight (0), marginwidth (0), frameborder (0) and scolling (no) with respective values (in parenthesis) are included to reset display parameters:
    • <iframe src=”http://iframesource.com” height=”400″ width=”100%” frameborder=”0″ marginheight=”0″ marginwidth=”0″ scrolling=”no”></iframe>

As shown above, the following example iframe element in its entirety should look something like:<iframe src=”http://iframesource.com” height=”400″ width=”100%” frameborder=”0″ marginheight=”0″ marginwidth=”0″ scrolling=”no”></iframe>