Home page

[MortenHofft]

Do you need help figuring out how to customise the home page?

There is a set of predefined blocks that you can use, but I might be able to add more if you have anything specific in mind.

You can do so by adding a composition property to the frontmatter. E.g.

composition: # a list of blocks
  - type: heroImage # the block type
  - data: home.cardExample # the _data to use
    type: features # the block type
  - data: home.bannerExample2
    type: floatingText
  - data: home.splitExample
    type: split

So the home page of the theme looks like https://github.com/gbif/jekyll-hp-base-theme/blob/master/pages/home.md

[MortenHofft]

The current choice of image might be temporary but the use of text on those hero images is tricky. The image will aim for full height and then crop if required. The image will cover the area. So the text might be fully are partially removed. If you have something specific in mind but are not sure how to do it, then let me know.

E.g. a tablet view removes your icon and parts of the text

[verovanporras]

Hi Morten! Thanks for your help, I will keep that in mind for our visualizations, for now, I was doing some image tests, but yes, I want to create more content on the home page, I will do some tests today.

[camiplata]

@verovanporras abro de nuevo el issue, la idea es cerrarlo cuando se solucione, en este caso cuanto tengas el layout del home listo, mientras se deja abierto para seguimiento y continuar la discusión o pedir ayuda de ser necesario.

[MortenHofft]

I've created an example of how the stats block can be used in a new branch

Below is a screenshot. Notice there there is also custom css in this, since I wanted to demonstrate how you could port visual elements from your existing website.

I hope that it is useful

[camiplata]

That looks great @MortenHofft! we will have a close look to it. At the moment non of us is experience with css so I probably will ask you some question later to be sure we understand the logic of it, I don't want to go blindly.

[MortenHofft]

Just a brief explainer then:

Add custom class to a block We can add custom css classes to our blocks by adding a klass property to the YAML configuration. It is called klass instead of class from habit as class is typically a magically reserved word that means something else already.

So by adding that line we can now target that (dark) block with custom css.

Make the background of the links a different color since the images you have are white background: linear-gradient(140deg, #465252, #002428); - and instead of a gradient it could have been a solid color like background: #465252; - and the shadow is just adding a little glow to the color.

Scale images Line 21-27 scales the images to appear same size. The images you have all have different heights (would be better to fix the images), so we need to scale them.

The diagnoal line Line 31 -> is really just a lot of code to have that diagonal line.

Vimeo container The wrapper class video-container is really just a little thing. It makes the video full width. I just added the option to the base theme as it seems like a frequent use case.

[verovanporras]

Hi @MortenHofft, I have not been able to call up the _posts on the landing page that was on a preset start to see the most updated _posts. Could you help me with that?

[verovanporras]

@MortenHofft we did it! but now if you notice it drags the slide information.

[camiplata]

This is the behavior @verovanporras is describing:

We added - type: latestPosts to the composition: section of the front matter of home.md

[MortenHofft]

It is assuming a data element All the blocks take a data element and if none is provided it use the page data instead.

so if you added

- type: latestPosts
  data: nonsense_is_not_a_folder # this would work despite not existing

Or the usual way

- type: latestPosts
  data: filename.propertyName

Or even inline

  - type: latestPosts
    inlineData: 
      title: Latest posts
      description: Some description could go here
      cta:
        - text: See all news
          href: /news
          isPrimary: true

[camiplata]

Thank you for the fix, your explanation will help us for other custom pages we have in mind ;)

[verovanporras]

thank you very much!