The featured post template provides three header layout options:

Mobile | Tablet | Desktop Standard Header

Standard Header

Standard layout option highlighted

This is Kinja’s default featured header option. Once you upload a featured asset the standard header appears automatically. It preserves the aspect ratio of the image/video and presents the title above the image. This layout supports the following featured media assets:

  • Native video player with preroll
  • Video loop (no audio, autoplay)
  • Static images
  • Gifs to mp4 conversion (looping)
  • Sponsored labeling
  • Responsive scaling of featured media asset

Advertisement

Mobile | Tablet | Desktop Magazine Header

Magazine Header

Magazine layout option highlighted

Like the standard header, the magazine header preserves the aspect ratio of the featured image/video asset, but here the title is moved to to the left of the asset. This means a user can generally see both the title and image in its entirety on page load at desktop viewport sizes. The mobile view of the magazine header is identical to the standard header. This layout supports the following featured media assets:

  • Native video player with preroll
  • Video loop (no audio, autoplay)
  • Static images
  • Gifs to mp4 conversion (looping)
  • Sponsored labeling
  • Responsive scaling of featured media asset
Mobile | Tablet | Desktop Impact Header

Impact Header

Impact layout option highlighted. Bottom row l-r (title alignment: bottom left, bottom center, horizontal/vertical center, bottom right, reverse color scheme: white title on black gradient, black title on white gradient)

Advertisement

The impact header is designed to create a fullscreen landing experience. There are four title placement options as well as a reverse color scheme to create more contrast if the title clashes with the background element. It is important to note that the impact header does not support the native Kinja video player. Video used in the Impact Header should be a silent and short clip to be used as a background element (recommended max length of roughly 8-10 seconds). The video will loop continuously adding background motion to the header. This layout supports the following featured media assets:

  • Video loop (no audio, autoplay)
  • Static images
  • Gifs to mp4 conversion (looping)
  • Sponsored labeling
  • Parallax effect (on static images)
  • Custom navbar (includes user login, notifications and a white blog logo or text fallback if no logo exists)
  • Four title alignment options (bottom left, bottom center, bottom right, vertical/horizontal center)
  • Reverse title color option (white title on black gradient, or black title on white gradient)
  • Featured media asset centered / cropped according to browser width (portions of the asset may be obscured depending on width of the viewport)

This header should not be used if you intend to preserve the aspect ratio of the image (such as a custom illustration/graphic). Refer to standard or magazine options.