How to create a flexible hero block

By Rob Allen· May 13, 2019 · Read in one minute.

So you want to offer your authors the ability to specify a “hero” style header for your entry, but have a fallback for when they don’t want one.

For the purposes of this example, we’ll assume your hero block will have an image, heading, and description.

Let’s set up some fields

+------------------+------------------+-----------+
|    Field Name    | Field Short Name | Fieldtype |
+------------------+------------------+-----------+
| Hero Image       | hero_image       | File      |
| Hero Heading     | hero_heading     | Text      |
| Hero Description | hero_description | Text      |
+------------------+------------------+-----------+

Now add some code

{exp:channel:entries channel="my_channel" limit="1"}
 {if hero_image}
   <div class="hero" style="background-image:url({hero_image});">
     <h1>{hero_heading}</h1> 
     <p>{hero_description}</p>
   </div>
 {if:else}
   <h1>{hero_heading}</h1>
   <p>{hero_description}</p>
 {/if}
 ... 
{/exp:channel:entries}

What we’re doing here is using a conditional {if hero_image} to check if the image exists. If it does, then we output the image as a background image using the style= parameter in the div container. If it doesn't exist, then we just output our plain heading and description.

That’s it! All you need to do is add some style!

Originally published at https://u.expressionengine.com.