Embedding interactive maps and image galleries into your blog posts is a perfect way to show off your road trip! 

To embed Bing Maps into a blog post, open the Post Editor. You can attach a map as either the enclosure image (the hero image on top of the page) and/or inline within a blog post.  

There are two types of maps that you can embed

1. A Map Route showing the route between two or more locations
2. A static map

To embed a map, click on one of the last two icons in the post editor. 

• Use the globe icon to embed a static map
• The arrow icon will embed a map route

Embedding Static Maps

1. Open the post or enclosure editor and click on the globe icon to the right of the editor. Alternatively, click on the Insert menu and select Map

1. Type in your desired location in the Location text box.
2. The map autosuggest should populate as soon as it finds results
3. Click on the auto-suggested value that you want and a map preview will appear.
   1. If you want an optional custom map cursor, click on the Pin Url field to open up the Pin Url editor. See Uploading Images for more information.
   2. You can also optionally outline your location if it is a city or a place. Click on the Outline Map checkbox to do so.
4. Once you are satisfied with your map, click on the Submit button to continue.

Embedding Map Routes

1. Click on the arrow icon in the Post or Enclosure Editor or click on Insert - Map Directions
2. Enter your starting location
3. Enter the final destination, or click the Add Destination link to add more points to the route. A map route can have up to fifteen (15) different destinations.
4. Once done, click on the OK button at the top left-hand corner of the page.

 

That's it, an interactive map will be present in your blog post! 

Note: maps are not supported by Facebook or Twitter social media sharing. If you want to share these maps to either platform, you should take a snapshot of your map, upload these snapshot images to the server and use the following Galaxie Blog Directives with the proper links to the image:

<twitterImageUrlMetaData>YourImageUrl</twitterImageUrlMetaData>
<facebookImageUrlMetaData>YourImageUrl</facebookImageUrlMetaData>

I will develop a new interface in the future to upload custom Facebook and Twitter social media images.

Background

For those who don't know, Galaxie Blog was built on top of BlogCfc, one of the most popular ColdFusion Blog engines around. However, BlogCfc was originally built in the early 2000s.

Raymond Camden, the author of BlogCfc, used .ini files to store a lot of variable settings. It was a decent approach as the blog software in those days was much simpler. It is easier to store dynamic information in the .ini files rather than the database as BlogCfc supported SQL Server, MySql, Oracle, and Access.

After releasing version 1.15, I decided to put a freeze on using any new settings in the .ini files and instead incorporated new functionality by using these directives as it was a quick method to do so- at least until I was able to get version 3 done. After version 3, I decided to keep the directives in place for backward compatibility and it is still one of the easiest and quickest ways to roll out new functionality.

What is a Galaxie Blog XML Post Directive?

BlogCfc used what I call an XML Post Directive to deliver certain functionality to a given blog post, such as wrapping a code block with <code> tags to present code. BlogCfc also used the more tag to condense a post on the main site that aborted the page at a certain position and created a button that navigates the reader to the full post.

Since Galaxie Blog 1.15, I used a handful of additional XML Post Directives to embed optional meta tag information, such as embedding video and to bypass ColdFusions' Global Script Protection that is used by my hosting provider.

Note: all of these directives are optional and are only needed for certain occasions, such as including a video, presenting video or code, and bypassing ColdFusion's Global Script Protection that is used by various ColdFusion hosting providers.

Original BlogCfc XML Post Directives

• Use <code> tags to format programming code:
  1. Create the initial <code> tag.
  2. Insert the actual code
  3. Terminate your code block with </code>
• Real-world example: How to make a round Kendo UI button

• Use a single  tag to condense the blog body when you're looking at all of the blog posts:
  • Place a tag where you want the body to terminate
• Real-world example: Scroll down to Kendo Server-Side Validation

SEO XML Post Directives

• Set the meta title for the individual blog post:
  • Enter the title between the titleMetaTag tags:
  • <titleMetaTag>Galaxie Blog Post Directives</titleMetaTag>

• Set the description for the individual blog post. This also sets the description when sharing the post on social media sites (i.e. the open graph and Twitter meta tags):
  • Enter the description between the descMetaTag tags:
  • <descMetaTag>How to use post directives in Galaxie Blog</descMetaTag>

Image XML Post Directives

• Set the image URL for Facebook (i.e. sets the value for the og:image):
  • Note: if you upload an enclosure when making a post, Facebook and Twitter images will be automatically created for you.
  • Enter the URL between facebookImageUrlMetaData tags:
  • <facebookImageUrlMetaData>/enclosures/facebook/aspectRatio.jpg</facebookImageUrlMetaData>

• Set the image URL for Twitter (i.e. sets the value for the twitter:image):
  • Note: if you upload an enclosure when making a post, Facebook and Twitter images will be automatically created for you.
  • Enter the URL between the twitterImageUrlMetaData tags:
  • <twitterImageUrlMetaData>/enclosures/facebook/aspectRatio.jpg</twitterImageUrlMetaData>

Video XML Post Directives

• Set the video type. When the proper video type is encountered, the media player will attempt to play the video:
  • The videoType can be: .mp3, .mp4, .ogg .ogv or .webm
  • Specify the video type between the videoType tags:
  • <videoType>.mp4 </videoType>
• Real-world example: Sharing-Videos-to-Facebook-and-Twitter

• Set a cover image on top of the video if is not playing (optional):
  • Specify the URL to the cover image between the videoPosterImageUrl tags:
  • <videoPosterImageUrl>https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg</videoPosterImageUrl>
• Real-world example: Sharing-Videos-to-Facebook-and-Twitter

• Set the URL to the small source (576p) of a video (optional):
  • It's possible to have a small, medium, and large video source. The code will determine which video source to play depending upon the end-users device type (i.e. desktop or mobile). The large video source should be in 576p format.
  • Specify the URL to the medium sized video between the smallVideoSourceUrl tags:
  • <smallVideoSourceUrl>https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4</smallVideoSourceUrl>
• Real-world example: Sharing-Videos-to-Facebook-and-Twitter

• Set the URL to the medium source (720p) of a video (optional):
  • It's possible to have a small, medium, and large video source. The code will determine which video source to play depending upon the end-users device type (i.e. desktop or mobile). The large video source should be in 720p format.
  • Specify the URL to the medium sized video between the mediumVideoSourceUrl tags:
  • <mediumVideoSourceUrl>https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4</mediumVideoSourceUrl>
• Real-world example: Sharing-Videos-to-Facebook-and-Twitter

• Set the URL to the large source (1080p) of a video (optional):
  • It's possible to have a small, medium, and large video source. The code will determine which video source to play depending upon the end-users device type (i.e. desktop or mobile). The large video source should be in 1080p format.
  • Specify the URL to the medium sized video between the largeVideoSourceUrl tags:
  • <largeVideoSourceUrl>https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4</largeVideoSourceUrl>
• Real world example: Sharing-Videos-to-Facebook-and-Twitter

• Set the URL to the video captions file (optional):
  • Specify the URL to video captions VTT file between the videoCaptionsUrl tags:
  • <videoCaptionsUrl>https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt</videoCaptionsUrl>
• Real-world example: Sharing-Videos-to-Facebook-and-Twitter

• Set the cross-origin setting (optional):
  • This is an optional setting that only should be set when the video source is outside of your domain. Set to true only when the video is hosted from another source.
  • Specify the URL to video captions VTT file between the videoCrossOrigin tags:
  • <videoCrossOrigin>true</videoCrossOrigin>
• Real-world example: Sharing-Videos-to-Facebook-and-Twitter

• Set the video width metadata (optional):
  • This is an optional setting that sets the width in the meta tags. It does not impact the presentation of the video and is only used by Facebook and Twitter.
  • Specify the width in pixels between the videoWidthMetaData tags:
  • <videoWidthMetaData>1920</videoWidthMetaData>

• Set the video height meta data (optional):
  • This is an optional setting that sets the height in the meta tags. It does not impact the presentation of the video and is only used by Facebook and Twitter.
  • Specify the width in pixels between the videoHeightMetaData tags:
  • <videoHeightMetaData>1080</videoHeightMetaData>

XML Post Directive for YouTube

• Set the URL to a YouTube Video:
  • Specify the YouTube full URL between the youTubeUrl tags:
  • <youTubeUrl>https://www.youtube.com/watch?v=liJqpsjai9I&feature=youtu.be</youTubeUrl>
  • Real-world example: Embedding a video from YouTube in Galaxie Blog

XML Post Directive for Vimeo

• Set the ID to play a video from Vimeo:
  • Specify the Vimeo ID between the vimeoVideoId tags:
  • <vimeoVideoId>343068761</vimeoVideoId>
  • Real-world example: Embedding a Video from Vimeo in Galaxie Blog

XML Post Directives to bypass ColdFusions' Global Script Protection

• Use a cfinclude:
  • Enter the path to the template that you want to include after the cfincludeTemplate tags:
  • <cfincludeTemplate>/blog/includes/postContent/parallax/parallaxScript.cfm</cfincludeTemplate>

• Include a javascript inside of a post
1. Use the initial attachScript, and place the optional script type, if necessary, after attachScript string within a blog post like so:
<attachScript>
2. Copy and paste the actual javascript
3. alert("Hello World");
4. And terminate the script with </attachScript>:
</attachScript>

Note: This article was rewritten for Galaxie Blog 3

Create responsive videos with your own hosted content with Galaxie Blog Directives

It is recommended to use the media interfaces in the post editor, however, you can also embed responsive videos using Galaxie Blog Directives.

Galaxie Blog supports the following video types: .mp3 , .mp4, .ogg, .ogv and .webm. If you have the video in another legacy format, you'll need to convert it to a modern format to play it in Galaxie Blog.

If you have a supported video format, upload your videos using an FTP client.

You can also host videos that are stored on a different server, but you'll need to specify the cross-origin true argument using a Galaxie Blog Post Directive.

If you want the videos to be optimized for different client devices, just like responsive images, you can use up to three videos of different sizes. Galaxie Blog supports 576p, 720p, and High Definition 1080p video formats.

Once you have the video(s) on a server, you will need to enter the proper URL xml post directives into the Post Header interface.

The following Galaxie Blog Post XML Directives were used to play the video that you see on top of this blog post.

• The videoType directive is necessary. Here I set it to ".mp4"
• The videoPosterImageUrl directive completely optional. This is used to 'cover' the video with an image until it is played. I used an image of the video to cover the video and specified the URL.
• Since my video format is 720p, I used the mediumVideoSourceUrl directive.
• You can use one argument, two, or all three to have a responsive video. You will need at least one argument for the video to play
• Use smallVideoSourceUrl for 576p
• Use mediumVideoSourceUrl for 720p
• Use largeVideoSourceUrl for 1080p
• Or use all three arguments if you want the video to be responsive
• This video is hosted on the same domain, so I used false for the cross-origin argument. If you are integrating a video that is hosted on another server, set the videoCrossOrigin to true.

This snippet of code will initialize our Plyr and it will play the video file within Galaxie Blog. The video will be lazy loaded, and will only load once the page loads and the video is downloaded to the client.

Embedding Vimeo videos using Galaxie Blog Directives.

Note: it's recommended that you use the media interface in the post editor to insert Vimeo videos. However, you can also use Galaxie Blog Directives.

To embed a Vimeo video into the enclosure using a Galaxie Blog Directive, simply grab the video Id from Vimeo, and copy and paste the URL into the Post Header editor like so:

<vimeoVideoId>343068761</vimeoVideoId>

This snippet of code will initialize our Plyr and it will play the Vimeo video file within Galaxie Blog. Like YouTube videos, The video will be lazy-loaded, and will only load once the page loads and the video is downloaded to the client. 

Embedding YouTube videos using Galaxie Blog Directives

While it is recommended to insert YouTube videos with the media editor, you can also embed YouTube videos with Galaxie Blog Directives.

I intend to use the capabilities of the Galaxie Blog Directives in a new markdown editor that I will incorporate in a future version. Additionally, the video directives provide backward compatibility with previous versions of Galaxie blog. 

To embed a YouTube URL to the enclosure, simply grab the video URL from YouTube, and copy and paste the URL into the YouTube URL xml post directive into the Post Header interface: 

<youTubeUrl>https://www.youtube.com=watch?v=LXt-hDDiEAQ&feature=youtu.be</youTubeUrl>

This snippet of code will initialize our Plyr and it will play the YouTube video file within Galaxie Blog. The video will be lazy-loaded, and will only load once the page loads and the video is downloaded to the client.

This video is an amazing performance by Chris Botti and Carolyn Campbell playing Kashmir to the violin. The video source is from YouTube at https://www.youtube.com/watch?v=LXt-hDDiEAQ&feature=youtu.be.