Custom Header Plugin for Movable Type
- Upload and crop a photo or image to use as a header
- Automatically restricts your cropped image to the proper aspect ratio for your header (according to your theme's design)
- If you make a slight mistake, easily re-crop the image to fine tune your header exactly the way you want it.
- Your cropped header and the original file you uploaded is managed for you within Movable Type's asset management framework.
This plugin is installed just like any other Movable Type Plugin.
To use the Custom Header plugin you must first apply a template set to your blog that supports the plugin. You will know if you plugin supports the Custom Header plugin because a "Custom Header" menu option will appear under your Design menu.
To customize your header, select "Custom Header" from the Design menu. Then select a photo to upload and click the "Upload" button. A dialog will automatically appear allowing you to crop the photo you upload. When the area has been selected that you want to use for your header, click the "Crop" button.
That's it. Your header is ready to be used. Republish your blog and your header will appear.
Template Sets Known to Support Custom Header
Designers and Theme Developers
To add support for this plugin to your theme or template set, you will need to edit your template set's definition within its
config.yaml file. The definition is simple and defines the max width and height for the header that your users will be allowed to upload. The definition looks like this:
custom_header: max_width: 780 max_height: 125
This definition should be placed within your template set's
config.yaml like so:
template_sets: awesome: base_path: templates label: 'My Awesome Blog Theme' custom_header: max_width: 780 max_height: 125 templates: archive: category_entry_listing: snip...
Once this is in place and a users installs this template set, then a "Custom Header" menu option will automatically appear under the Design menu.
This template tag puts the current blog's header asset into context. That means that because the Custom Header plugin utilizes Movable Type's asset management framework you can utilize all of MT's asset related template tags in order to display all manner of information about your header. For example, this tag will display an HTML image tag for your header:
<mt:CustomHeaderAsset> <img src="<mt:AssetURL>" width="<mt:AssetProperty property="image_width">" height="<mt:AssetProperty property="image_height">> </mt:CustomHeaderAsset>
If there is no custom header associated with the current blog then this tag will return an empty string.
This template tag returns the maximum width allowed for the custom header defined by the current template set.
This template tag returns the maximum height allowed for the custom header defined by the current template set.
This template tag puts the parent asset, or the asset from which the current asset was derived, into context. This is useful for example if you want to display not only the header image, but the original image from which the header image was cropped. For example, the following template code will display a thumbnail of the original image for the current header image:
<mt:CustomHeaderImage> <mt:AssetParent> <mt:AssetThumbnail width="200"> </mt:AssetParent> </mt:CustomHeaderImage>
- This plugin currently only works for Themes and Template Sets that explicitly support the
custom_headerdirective in their configuration files.
- Your blog must be republished after uploading a new header.