Maybe I am overlooking something, but it seems hero block have a fixed height.

I would like to have a/the hero block image 100% wide and auto height - like f.x. nivo-slider. I could use nivo-slider, but I need only one slide.

Accepted answer

Finally got it (have been somewhat sleepy lately) - copying code from inspecting nivo-slider.

Here is the content of my custom block:

<div style="box-shadow: 0px 1px 5px 0px #4a4a4a;"><img alt="SensiStop flasker" data-file-id="35" height="auto" src="/files/flasker5.webp" width="100%"> <div style="text-shadow:0 0 6px black; color: white; position: absolute; top: 30%; right: 5%; width: 50%;"> <h1 class="text-align-center">    <strong>SensiStop!</strong>™<strong> - Homøopatisk Lægemiddel</strong> </h1> <h4 class="text-align-center">    <strong>siden 1981</strong> </h4></div></div>

Result here: https://sensistop.dk/home

Comments

It's down to the layout you are using. You need to use a full width layout for the home page if that's where the hero block needs to be. Have a look at https://holisticwebservices.com - is this the type of display you are looking for? Which layout are you using and what theme?  

The image should scale with the size of the window - yours do not.

I am not 'locked into' any specific layout or theme.

The Hero block height is determined by the content inside the block. Hero blocks are not the best option to display images. A hero is by definition a large text block that has a decorative background image.

You have a few options (I'm no expert on front end, so there may be better ones)

  • You could use hero block with an image and without text, and then add css classes to the block (under "style options"). Then use custom css rules to achieve the height you want (or an auto height)
  • You can create a flexible layout template, with a region devoted to showing the image, then create a layout that uses it, put a custom block (or field block) with the image in it,  and use custom css rules to achieve what you want.
  • Or, you can edit the template file for a specific layout, and hard code some markup there to show the image, combined with some css

People tend to use CSS Injector to add custom css rules to sites.

Instead of using the Hero block, I would use a standard custom block to insert an image - alone or together with text.

When I make a custom block via admin/structure/block/add, the process is complicated by the fact that the field for creating a new block lacks a CKE editor or some other editor to facilitate writing code (for example, I use BUEditor to create pages, CKEditor and IMCE but they don't work in the create new block field or at least I don't know how to get them to work. If anyone can help me how to enable these editors in the custom block creation form I would appreciate it.

Therefore, I use a trick - I write the content of the custom block as a regular page (in which I am facilitated by the presence of the editors mentioned above), and then I copy the code into the desired custom block with an image.

I find this way much more versatile and it simplifies the structure of the site, having a Hero block seems to me an unnecessary complication to the development and architecture of the site.

Adding a specific CSS style for the custom block as argiepiano pointed out works for any custom block and makes it even easier to make an image block especially in combination with the CSS Injector module or by managing the CSS style through the styles in the site's theme.

This allows for a maximum set of tools for image and text placement, size and composition in this block.

Using nivo-slider or another slider module, eg flexslider also solves the problem, but it is an unnecessary burden on the code page if only one image will be displayed in that block.

Once a custom block is created, it is positioned on the page by editing its layout and placing it in the desired region.

1. Why do you need an editor when you need to put HTML code (Raw HTML format) in a block?

2. Problem with the editor - check "Text editors and formats" (/admin/config/content/formats).

3. I am inserting an image using CSS background-image, like https://webmetod.ru so that the block is displayed correctly on any screen.

4. Each case uses a different approach, need to look at a real example.

But the height of the image - the block does not scale (is not 'resonsive')

Look at the example on my link, open the inspector (F12) in the browser and look at the CSS and HTML .block-block-3, copy it for yourself if you like.

Which I did. image scales from height 675 to 688. It does not scale as nivo-slider.

The bottom of the picture is cut off. I want the whole picture to be visible and scale u and down when narrowing or expanding the viewing window.

This is not to complain - a beautiful site

It is impossible to make the entire picture visible in a block of arbitrary proportions. Therefore used background-image and background-size: cover.

Thank you for taking time with this. I guess I will have to 'hack' nivo-slider to figure out how they do it.

I will try this out, but what is the css to get the block (image) to be fully responsive - in width as well as height (like nivo-slider is)?

Have not figured that out yet

Also, I did make a custom block, but I got a (white) margin on both sides. What is the trick to get the image to be as wide as viewing window?

To maybe clarify: This is the website in question:  https://sensistop.dk/

The image scales beautifully (of course the 'caption' does not).

I am trying to accomplish the same without using nivo-slider.

Yes, but I have been trying to get a custom block to 'take' that 100% / auto already: Did not work for me. Seems the block only generate height from the amount of text in it.

Without seeing a real example, we can discuss this forever and not come to any decision. I passed.

Finally got it (have been somewhat sleepy lately) - copying code from inspecting nivo-slider.

Here is the content of my custom block:

<div style="box-shadow: 0px 1px 5px 0px #4a4a4a;"><img alt="SensiStop flasker" data-file-id="35" height="auto" src="/files/flasker5.webp" width="100%"> <div style="text-shadow:0 0 6px black; color: white; position: absolute; top: 30%; right: 5%; width: 50%;"> <h1 class="text-align-center">    <strong>SensiStop!</strong>™<strong> - Homøopatisk Lægemiddel</strong> </h1> <h4 class="text-align-center">    <strong>siden 1981</strong> </h4></div></div>

Result here: https://sensistop.dk/home