Formatting: Post Cover


About

Formatting Post Cover is a new feature added in version 3.0.0 that allows you to display a full-screen image at the top of a blog post or page - (Demo).



Specification




Configuration



Description

src
The URL of the image to be used. This image URL will be used in all view modes when the light_src and dark_src configurations are not defined.
light_src
The URL of the image to be used specifically for light view mode. When this configuration is chosen, the dark_src configuration must be defined.

dark_src
The URL of the image to be used specifically for dark view mode. When this configuration is chosen, the light_src configuration must be defined.

shadow
Enables shadow at the bottom of the image.

always_display
By default, the system will always display the image regardless of whether the image width is sufficient or not. Set the value to no if you want to only display the image when the image width is sufficient (according to the screen width).




Usage

  1. Upload an image to post or page editor in Blogger. You will get the complete HTML format of the image with data-original-width and data-original-height. Both attributes are mandatory.

    When adding an image in Blogger, you will get several HTML elements automatically added, besides the img element - (View). Remove all these extra elements and keep only the <img .../> element - (View). This HTML image can be placed anywhere in the post or page.

  2. Add the attribute id="w-post-cover" to the img element. This attribute is mandatory.

  3. Add the desired configurations by including attributes data-configuration-name='Value' on the img element. Here are some examples of HTML img with configurations:

    Example using a single image URL for all view modes:
          
<img id="w-post-cover" 
  alt="NEOS Blogger Theme" 
  data-original-height="647" 
  data-original-width="1348" 
  data-src="url-image.jpg"
  data-shadow="no"/>


    Example using image URLs based on view mode:
          
<img id="w-post-cover"   
  alt="NEOS Blogger Theme"  
  data-original-height="647" 
  data-original-width="1348" 
  data-light-src="url-image.jpg" 
  data-dark-src="url-image.jpg"
  data-shadow="no"/>


  4. IMPORTANT...! This formatting only supports images uploaded to Blogger. Also, ensure that the dimensions (width and height) of the images for the light_src and dark_src configurations are the same.
Have Question?