Hero image text visibility

I have used the Hero image blocks on my site. It works fine but the Hero Heading and Description texts have a visibility problem.

As my H1 and H2 styles are dark text these are not visible on the most of the used images (see my attachment). And there is no possibility to move the text left or right neighter. So it is always centered.

Is there any plans to make these improvements to the Hero image block?

You can achieve this with a custom template.
Create a folder in application/blocks named hero_image.
Inside that folder create a folder named templates.
Copy the view.php file from concrete/blocks/hero_image to your templates folder and rename it to something appropriate i.e. WhiteText.php
In your WhiteText.php file add some css styling immediately after the php closing tag like this:

<style>
.ccm-block-hero-image-text h1 {
   color:#fff;
}
</style>

Then when you are in edit mode choose your custom template from the options dialog.

1 Like

As @ConcreteOwl said this will give you a new template, but if you want you can also create a folder inside the template folder with the template name (white_text) you can then copy the view.php, view.css and the view.js and edit all of them if you want to add some custom code. Concrete Pulls in the css and js into the front end when the custom template is selected.

@andrew has a great tutorial here

Except there is no view.css file or a view.js file inside the concrete/blocks/hero_image folder?

Then you can create on in you template folder and it will pull them in.

Hurrah! This works. I tried the first one first.

Thanks for the detailed instructions to both of you.

Noticed that I didn’t have at concrete/blocks/ the hero_image folder (update from v8 to v9 might be a reason why it was missing). I copied it from the other site.