Home Page Theme: Home Page Shortcodes

[post] Shortcode Attributes for the Banner

Image Gradient and Text Color 


By default when a post is placed in the banner or in one of the buckets on the homepage, the text is white and a gradient is placed over the image.  It is now possible to add attributes to the [post] shortcode that change these settings.  


Note: the picture was replaced in this image to display the gradient clearly.


How To...


...turn off the gradient, simply add the 'overlay' attribute and set it to false.    
[post id=1234 overlay="false"]

...change the color of the text from white to black, simply add the 'reverse' attribute and set it equal to true.
[post id=1234 reverse="true"]  

... use these two attributes together.
[post id=1234 overlay="false" reverse="true"] 

Note

  • If you do not include these attributes, the gradient with white text is used by default.
  • These attributes are not available for the [posts] shortcode.

Rollover: Turn it off or make it transparent


On hover a colored background pops up on banner images Making the category, share links, and excerpt visible.  You can turn this off or make it transparent.

How to...


...turn off the rollover.  
[post id=1234 rollover="false"]
...make the rollover transparent, this will be the same color, just clear.
[post id=1234 transparent="true"]

Change fontsize


The default fontsize for the banners is 40px, but it can be changed to any size between 50 and 60.

How to...


...keep the default size of forty - leave the attribute out all together.
[post id=1234]

...change font size from 50px to 60px
[post id=1234 fontsize=55]

IMPORTANT NOTE: the following shortcodes must be placed on the post being pulled in, and must be placed above a <!--masthead--> tag in order to display correctly on the page

[fullwidthimage] shortcode



To make an image in the banner go the full width of the browser window, upload an image that is 2000px X 1125px and use this shortcode

[fullwidthimage img="http://www.gsu.edu/wp-content/uploads/2015/01/rotavirus_poster-image_1280x720-v2.jpg"]<!--masthead-->
NOTE: The banner spot has a static height in both the desktop and tablet views (540px and 400px, respectively).  In order to prevent images in this space from distorting, the top and bottom of the image move out of the banner spot as the image gets wider, which can cause images to appear cropped on the top and bottom.  This means that at the native size (2000px X 1125px) approximately 250px on the top and bottom of the image will be hidden when a browser window is taken to 1920px wide, this should be taken into account when creating photos. 

[video] shortcode



To add a video in the banner that is container-width (not full width) you will need three versions of the video uploaded to the site.  The videos need to be in the these formats: .mp4, .webm, .and .ogg.  You will also need a still image or poster that will load if the browser is not able to play the video (e.g. on mobile platforms).  The videos and image all need to be 1280px X 720px.
[video img="http://wpdev.gsu.edu/wp-content/uploads/2015/01/rotavirus_poster-image_1280x720-v2.jpg" mp4="http://wpdev.gsu.edu/wp-content/uploads/2015/01/rotavirus_banner_1280x720-v2.mp4" webm="http://wpdev.gsu.edu/wp-content/uploads/2015/01/rotavirus_banner_1280x720-v2.webmhd.webm" ogg="http://wpdev.gsu.edu/wp-content/uploads/2015/01/rotavirus_banner_1280x720-v2.oggtheora.ogg"  alt="Motion graphic of rotavirus spreading around the world."]<!--masthead-->

[fullwidthvideo] shortcode


To add a video in the banner that is the full width of the browser window, you will need three versions of the video uploaded to the site. The videos need to be in the these formats: .mp4, .webm, .and .ogg.  You will also need a still image or poster that will load if the browser is not able to play the video (e.g. on mobile platforms).  The videos and image all need to be 1280px X 720px.  

NOTE: For users who have monitor resolution greater than 1500px wide, at the browser's full window width the video will max out at 1500px wide, and the top and bottom of the video will move out of the container about 175px to compensate for the video's greater height of 843px, this translates to approximately 150 pixels of the top and bottom of the video's native height being hidden above and below the banner spot.  This should be taken into account when making videos for the banner spots, because many of our users have monitors with resolutions greater than 1500px wide.

[fullwidthvideo img="http://wpdev.gsu.edu/wp-content/uploads/2015/01/rotavirus_poster-image_1280x720-v2.jpg" mp4="http://wpdev.gsu.edu/wp-content/uploads/2015/01/rotavirus_banner_1280x720-v2.mp4" webm="http://wpdev.gsu.edu/wp-content/uploads/2015/01/rotavirus_banner_1280x720-v2.webmhd.webm" ogg="http://wpdev.gsu.edu/wp-content/uploads/2015/01/rotavirus_banner_1280x720-v2.oggtheora.ogg"  alt="Motion graphic of rotavirus spreading around the world."]<!--masthead-->

Feedback and Knowledge Base