Functionality to add hero image to the homepage

[lhmarsden]

At the CF workshop, we discussed improving the appearence of the CF conventions homepage. One thing we seemed to agree upon was adding an image to the top of the home page. In website jargon, this is often called a 'hero' image.

I have added the functionality to include a hero image on any page. Currently, when you bundle the website together, no image will be displayed. To display an image, the relevant md file must have a hero_image attribute at the top of it. Currently, I have commented this attribute out in the index.md. See here

layout: default
title: CF Conventions Home Page
flash_message: "The CF Conventions have won the <a href='https://www.agu.org/user-profile?cstkey=0fc4a399-6049-4787-8dc4-c57c91b8a26f' target='_blank'>AGU Open Science Recognition Prize</a> for 2024! 🎉"
flash_message_type: "success"  # Optional: Use 'info', 'success', 'warning', or 'error'
# hero_image: Data/media/images/CF2024_group1.JPG
hero_header: CF Metadata Conventions # Only displays if hero_image is provided
# hero_paragraph: Some words about the CF Conventions # Only displays if hero_image is provided
hero_button_text: View latest release # Only displays if hero_image is provided
hero_button_url: Data/cf-conventions/cf-conventions-1.12/cf-conventions.html # Only displays if hero_image is provided

To test this yourself, simply uncomment the hero_image attribute.

I would not recommend using the image I have selected. I used this only as a proof on concept, but it is not high enough resolution and the header and button clash with it.

If you have an image that you think might be suitable, I am happy to go in again and make sure that the overlying header and button don't clash.

The button on top is a 'call to action'. You will see this at the entrance of most websites. This is what you want the user to do. In the case of CF, I think this is to read the latest release of the contentions, so I have included a button linking to that.

Whilst this proof of concept is shown only for the homepage, the functionality is there to add an image to any other page should one wish to in future.

Let me know what you think.

Kind regards,

Luke

[lhmarsden]

I am happy to do other appearence improvements if you would like. Though we should probably agree upon what changes we would like to make. We could sketch up what we would like the homepage to look like, for example. @feggleton do you have the photo of the sketch we made on the whiteboard at the workshop?

Now I have an understanding of how the webpage has been put together, it shouldn't take too long to make sure quick but effective changes. Fine tuning takes longer of course...