Modal and Popover

Modal Windows

Shortcode Name: modal
Shortcode Properties:

  • link_text: what you assign to this property will be what the link will appear as on the website
  • destination: this is the full path to the images attachment page or the path to the youtube video
  • caption: this will be the caption of the image. If you do not add this, then caption field of the image will be displayed
  • media: this describes what will be displayed in the modal window. This can only have the value of “img” or “video”. The default is an image (img).

How do you use this?

Heads Up! In the shortcodes below you must REMOVE the * in order for it to work in the WYSIWYG area

Once you upload an image you will then be able to copy and paste the image’s url for “Attachment Page”. With this URL copied to your clipboard you may then enter in the shortcode in your post/page WYSIWYG editor. Here is an example of what you would add in:

[*modal destination=”/our-services/site-visit/engineers-silo-inspection-structural/”]

which will then output:

view modal

say we don’t like the default ‘view modal’ type, so we want to make it more descriptive. We will then add in the link_text parameter to override the default:

[*modal destination=”/our-services/site-visit/engineers-silo-inspection-structural/” link_text=”View Silo Inspection”]

which then output:

View Silo Inspection

Our link looks good, but we want to add a caption to our image. Remember, by default, this will use this media’s caption field, but since our image doesn’t have one. You may either:

  1. Update the caption field of the image in the Media Library
  2. Add caption in the shortcode

To add the caption we will simply add the caption attribute.

[*modal destination=”/our-services/site-visit/engineers-silo-inspection-structural/” link_text=”View Silo Inspection” caption=”Jenike Engineers Performing a Silo Inspection”]

which will then output:

View Silo Inspection

Video Example

[*modal destination=”http://www.youtube.com/watch?v=A76a_LNIYwE” link_text=”Of Monsters and Men” caption=”Of Monsters and Men Music Video” media=”video”]

Of Monsters and Men
Contact Form Example

[*modal_contact link_text=”contact us”]

contact us

Popover Windows

These are very similar to the modal window parameters above

Shortcode Name: popover
Shortcode Properties:

  • link_text: what you assign to this property will be what the link will appear as on the website
  • title: this is the title that will appear in the window
  • image: this is the Attachment Page URL of your image
  • content: this is the content that will appear under the image
  • direction: this is where you want the window to appear. The default setting is “top”. Allowed values are top, right, bottom, left

Heads Up! In the shortcodes below you must REMOVE the * in order for it to work in the WYSIWYG area

An example implementation of this would be:

Top

[*popover image=”/our-services/site-visit/engineers-silo-inspection-structural/” link_text=”Check out my popover” title=”This is the title of my popover” content=”Here is some content”]

Check out my popover - Top

Bottom

[*popover image=”/our-services/site-visit/engineers-silo-inspection-structural/” link_text=”Check out my popover” title=”This is the title of my popover” content=”Here is some content” direction=”bottom”]

Check out my popover - Bottom

Left

[*popover image=”/our-services/site-visit/engineers-silo-inspection-structural/” link_text=”Check out my popover” title=”This is the title of my popover” content=”Here is some content” direction=”left”]

Check out my popover - Left

Right

[*popover image=”/our-services/site-visit/engineers-silo-inspection-structural/” link_text=”Check out my popover” title=”This is the title of my popover” content=”Here is some content” direction=”right”]

Check out my popover - Right