This guide assumes you have read the Video, Flash, and Other External Media Essentials Guide, so if you have not please do so now.
It's easy and routine to create images and text as layers within Photoshop, but images and text represent only a tiny fraction of the media used on modern web pages. Most sites will have areas to display Videos (think YouTube), Flash animations, Twitter feeds, music, and even other web pages.
The most common way to add one or more of these media elements to a page is to use a rectangular image layer with the -xmedia hint that you will connect to media and other external elements (including raw HTML) using the Content Manager's xmedia importers.
Another way to add external content such as YouTube videos is to use the -embed hint on a type layer and paste the code directly into the type layer's content. (Instructions for the -embed hint appear at the end of this document.)
The -xmedia Hint
The xmedia workflow includes creating and positioning the -xmedia layer in Photoshop, previewing it with generic media in the Design Manager, and finally importing your own media in the Content Manager.
This document is concerned with the general use of -xmedia. If you are already familar with using the -xmdia hint and are seeking instructions on the importer for a particular type of media, you will find each media type's reference guide in the sections following this one. An indexed list linked to the various types appears in the section "Types of External Media Supported" below.
Xmedia Layers In Photoshop
Whether using Flash, Video, animated GIF, or remote image files, the steps are the same.
- Identify the dimensions of the media you will be importing
- Create an image layer in your Photoshop document
- Select an area that matches your media dimensions with a color. (This is most easily done using the marquee tool's Fixed Size style, or by watching the Info panel as you drag out the selection.)
- Fill the selection with a color
- Pick a name for the layer and add "-xmedia" to the end of the name, ie "Home Movie-xmedia". The name doesn't have to match the file name, but if it does, and the file is in the folder that you optionally choose to be your Media Folder, SiteGrinder will match the layer to the file automatically.
- Save the document and open SiteGrinder
An -xmedia layer is a placeholder layer. Typically the -xmedia layer is just a rectangle layer that tells SiteGrinder where on the page you want some other media inserted. The layer itself will not appear on the final page, so it can be anything you want while it is in Photoshop: a colored box, a photo, it doesn't matter. Similarly, do not expect the final page to be affected if you apply any Layer FX to an -xmedia layer, or adjust its opacity or transfer mode. Those things are all ignored.
In this screenshot you can see the lavender -xmedia layer. It is just a large box layer named "main-xmedia".
On the final page it some alternative media, like a video, or some text will substitute for the lavender rectangle.
Some types of media, such as video, will always fill the entire rectangle dimensions at 100% opacity on the final page. Of these types, some won't even allow anything to be visible on top of them. If you try to mask certain types of video with image layers, the video will cut right through them.
IMPORTANT: Some media types have an option to show a controller. For some media, like flv video, the controller floats on top of the video when the mouse is hovering so its presence will not increase the dimensions your -xmedia layer will need to be to include both the video and the controller. Other types, such as .mov Quicktime movies, will show their controller beneath the bottom edge of the movie. For those types you will need to increase the height of your -xmedia layer to accommodate the controller. The Quicktime controller, for example, requires 16 extra pixels for the height of your -xmedia layer. So a .mov with dimensions 320x240 will need an -xmedia layer 320x240 without the controller and 320x256 with the controller.
Other types, like text, will allow you to see the background layers through empty areas.
Xmedia in the Design Manager
The next step after building any page design is to inspect its layout in the Design Manager. Because you will not choose your actual media until you deploy your pages to the Content Manager, the Design Manager view of an -xmedia layer is a temporary interactive placeholder:
Have no fear, this is not how the xmedia layer will appear on the final site.
The "test content" menu allows you to try out a few different content types. This is for the purpose of checking what happens to your layout with different media types, not for previewing your actual media.
When you choose text from the menu, for example, if the resulting text overflows your page you may want to look into using columns in your layout, or plan on keeping that as a scrolling element.
For media types like video, which will never go beyond the bounds of the original -xmedia layer, you don't have to worry about this kind of preview.
Xmedia in the Content Manager
Once in the CMS system you will be able to import external media for each of the -xmedia layers on each of your pages.
In the "Pages" panel of the CMS select any page that has an -xmedia layer. The External Media panel will appear and list all the -xmedia layers on that page:
Click the blue entry in the Media column to open the External Media window.
From here you can choose the type of media you want to import from the "Importer" menu.
Xmedia and Making New Pages
Whenever you create a new page in the Content Manager, you choose an existing page design which the new page will be a copy of. If the existing design has any -xmedia layers, then any new page created from that design can have its own unique sources set for its -xmedia layer. Additional sources can even be a completely different type of media.
This means you can create a single template design and then create new pages based on it in the Content Manager using new media on each new page you create. That's the power of separating design and content.
Types of External Media Supported
Here is the breakdown of the -xmedia media types that SiteGrinder 3 imports.
Information about the specific importers can be found in their own sections.
Slideshows and Non-SiteGrinder Galleries
- Images (gif, animated gif, jpeg, png)
- Flash swf
- Flash flv video
- Microsoft Video
- Quicktime and Other Video
- MP3 Audio
- Single Color Rectangle
Preparing Media for Import
Depending on the type of media you want to use, SiteGrinder 3 will get the media locally from your site folder or remotely from a URL. Some media types support both local media files and urls.
If you are using local files, you will place them in your site directory before importing any media into your page.
The workflow for local media is as follows:
- Create a media directory in your site folder, usually at the top level, for your media. Do not place this folder inside any directories whose names begin with "sg_".
- Name your media directory whatever you like.
- Copy the file or files that make up the media to the new folder. For a video this will probably be just one file. For a gallery created with a tool like Adobe Lightroom you will copy all of the files and subdirectories that make up the gallery into the media folder. (See the next section for more details.)
- When possible open the media in a browser by itself before importing with SiteGrinder to make sure it works. If it doesn't display properly, you have probably negelected some necessary files in the previous step.
- Use SiteGrinder's Content Manager -xmedia panel to assign the local media to the -xmedia layer.
Importing Multi-File Media (especially Flash)
Some file types are self contained, meaning that the file depends upon no other files to function properly. Examples of self contained files are most digital video formats (.mpeg, .mov, .wmv), PDF files (.pdf), digital audio (.mp3, etc.), and images (.jpg, .gif, png).
Other media types require multiple files and sometimes even sub directories with still more files. Examples of multi-file media include most web pages (.html + images) and some Flash .swf files which require accompanying gallery image files and an xml file to tie it all together (.swf).
As mentioned previously, to prepare a file for import means moving it into the site directory. With multi-file media, be careful to move all of the files to the site directory (the main file and the dependent ones) and to preserve their directory relationships. It is often easier to move the folder that contains the files into the site directory, rather than moving the files individually.
Further complicating things, multi-file Flash galleries are often initialized within the HTML of the page they are on using either a series of "FlashVar" variables or an swfobject script to determine options. These .swf files won't function even with the other dependent files properly placed without the proper initialization code. In these cases, it is usually preferable to import the .html file that accompanies the gallery using one of the HTML importers (iframe, object, or general html) than try to import the .swf itself. This will import both the media files and the required settings.
There are many third party tools for creating Flash slideshows, Flash galleries, Flash whatever. Very often, these are multi-file Flash files requiring initialization. SiteGrinder has many custom importers for different Flash slideshows, galleries, etc. If possible, use the correct importer (like the ShowItWeb importer, or the Lightroom Gallery importer). If your third party slideshow, gallery, or other media is not in the list of importers, send an email to firstname.lastname@example.org requesting one. If you provide the name of the third party gallery, the URL of the manufacturer, and links to any documentation about embedding it, we may be able to produce a new importer.
When working with multi-file external media be sure to test that they still working in the browser after you move them into the site directory and before you attempt to import them. If media no longer works after merely being moved, SiteGrinder's media importers won't be able to fix them.
Common External Media Interface Items
Many importers use the following controls.
Urls and Files
Almost every -xmedia importer has a file or url control, seen below:
To use it you type in the URL where the source media can be found. If you are running the SiteGrinder Content Manager locally, then the "Site File" button (as seen above) will be available and you can browse your site directory looking for the file to include. When you use the "Site File" button, SiteGrinder creates the url. The Site File button is gold colored as a reminder that this button is only available when running locally.
If the Content Manager system is running remotely using the optional SiteGrinder 3 Control add-on, you'll need to enter in a URL manually. That can be either a full URL (such a http://www.example.com/starwars.mpeg) or a relative one (media/starwars.mpeg).
Urls may be queries, which can provide extra information to the web server. The url http://www.example.com/videoserver.jsp?video=surprisedkitty, for example, includes a "video" argument to specify which video to play.
Urls may also use protocols other than http, such as Real Time Streaming Protocol for videos. That kind of url will look something like this, for example: rtsp://www.example.com/starwars.mov
NOTE: Importers that support file uploading will upload your file to a directory called "sg_userfiles" at the top level of your site.
Dynamic Content and Dynamic Styles
A few of the HTML importers can import both "statically" or "dynamically", and can do so for either the content or the text styles.
If these checkboxes are off, then you are choosing a static import. This means that the HTML in question is grabbed now, as it is today, stored in the -xmedia layer, and then used. If the document at the source URL changes, statically imported content does not change with it. It remains as it was at the time the -xmedia layer was first imported the source.
Dynamic content, on the other hand, is grabbed whenever the page is viewed. So when anyone visits your page they see the source URL embedded on your page as it currently is on the server it lives on.
Static and dynamic both have their advantages and disadvantages. Dynamic content is always current and up to date, great for calendars and frequently changing content. However, dynamic content makes your overall page slower. Also the content depends upon another web server, so if that other webpage is not reachable for whatever reason, your page will not display properly.
As the styles, layout, and formatting of remote content tends not to change too much, using static styles (i.e., turning off the dynamic style checkbox) can give your page a slight speed advantage.
The xmedia importers used by SiteGrinder 3 are all defined by external plug-ins. Media Lab will be adding more plugins as time goes by. You can check for the latest at the SiteGrinder 3 learning center. If you have a particular media type that needs special handling and don't see an importer for it already, contact us at email@example.com to request support for it. We may be able to make a new -xmedia plug-in to handle that media type to be made publicly available.
The -embed Hint
The -embed hint provides a different, somewhat more direct approach to adding media to your pages in type layers.
The -embed process works like this:
- Create and position a new empty type layer using the dimensions you want your embedded content to have
- Paste a snippet of raw HTML code into the contents of the type layer. Usually this comes from copying the contents of an "embed" field from YouTube, Paypal, Twitter, or other popular sites
- Change the layer's name to whatever you want followed by the -embed hint, as in "Simpsons Hilarious-embed".
- Save and build
Even though the layer full of code looks ugly in your Photoshop file you won't see the code at all on the built page. Instead you'll see whatever the code is telling the browser to show. It might be a video, a Twitter feed, or even a PayPal "Buy Now" button.
IMPORTANT: You have to be very careful when you create or select the code to use in the embed layer. The code has to be correct. This means if you miss one letter from the start or end of the code when you select it to copy it to the clipboard, it will probably not work and may cause the entire page to draw incorrectly.
IMPORTANT: An embed layer is used only with "snippets" of code, not entire web pages of code. If your code includes <head> and <body> tags this will cause the whole page's html to be incorrect.
Deciding Between -embed or -xmedia
This section will help you decide when to use an -embed layer or an -xmedia layer to add custom code to your pages.
The unique advantages of the -embed hint over the -xmedia hint are:
- You will see the results of the embedded code in the Design Manager preview. For -xmedia you won't see your actual media until after you deploy to the Content Manager.
- Fewer steps: just make the layer, paste in your code, and you're pretty much done.
- If you want to deploy a page with custom code to many sites, you only have to enter the code in the embed layer once. With an -xmedia layer you will have to import the code for each site.
- For experts only: embed layers can include "server side" instructions such as PHP's include() command.
The unique advantages of the -xmedia hint over the -embed hint are:
- Most of the -xmedia importers avoid HTML code completely. You just select your media and SiteGrinder does the rest. This avoids the possibility of including incomplete or otherwise incorrect code.
- -XMedia layers work incredibly well with the SiteGrinder Content Manager's "New Page" function. A new page made from one with an -xmedia layer can easily show a different media file. You can't edit -embed layers in the Content Manager.
- -XMedia layers have nicer WYSIWYG. - Embed layers can be ugly in your Photoshop document.
Expert Notes For the -embed Hint
The HTML will be inserted into a DIV with the exact dimensions of the type layer allowing easy creation of things like site visit counters. The <div> will be named after the -embed layer.
If you want to include any non-PHP code (such as ASP) you'll have to use -embed instead of -xmedia.
Because -embed happens early in the build process, you can use it for sites you are building with "none" set for CMS or that you are planning to "Save as Static" from the Content Manager.