How to enable Image Header for Custom Content Type [#2870370]

If one creates a custom type, how does one get the node display to show the large image on top?
Which template has to be copied or modified to achieve this effect on the node display of the new content type?

I tried adding the existing field_topic_image field used by topic content type to the new content type, but when displaying the node, the large image on top does not show.

I apologize for my lack of experience with Drupal 8 theming and twig. I've been reviewing the layouts and templates, but any advice would be helpful.

In summary, how do we make the large hero image to be displayed on top for custom content types we add to our distribution?

Thanks.

Comment	File	Size	Author
#9	Screen Shot 2017-07-21 at 12.44.37 AM.png	97.09 KB	Carlos Miranda Levy
#9	Screen Shot 2017-07-21 at 12.44.12 AM.png	104.77 KB	Carlos Miranda Levy
#9	Screen Shot 2017-07-21 at 12.43.44 AM.png	46.4 KB	Carlos Miranda Levy

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

17 April 2017 at 13:17

Carlos Miranda Levy created an issue. See original summary.

Comment #2

Carlos Miranda Levy CreditAttribution: Carlos Miranda Levy as a volunteer commented 19 April 2017 at 08:56

Issue summary:

View changes

Comment #3

Carlos Miranda Levy CreditAttribution: Carlos Miranda Levy as a volunteer commented 19 April 2017 at 08:58

Title:

How to enable Image Header for Custom Content Type (in particular blog_post)

» How to enable Image Header for Custom Content Type

Comment #4

DeBeukeleerM CreditAttribution: DeBeukeleerM as a volunteer commented 22 April 2017 at 14:32

Something similar is how to place the image on his proper place in the teaser display of a new content type. The image I added is allways placed inline instead of on the top (default) or on the left (teaser)

Comment #5

Carlos Miranda Levy CreditAttribution: Carlos Miranda Levy as a volunteer commented 25 June 2017 at 20:09

For anyone who hasn't figured this out yet and is looking for an answer to the same question:

In your new custom content type, add a field, type Image and name it field_your_content_type_machine_name_image.
If your new content type's machine name is sadsongs, then you should name the field field_sadsongs_image.

On the Display Form configuration, set the Widget for the field to ImageWidget crop, and replicate the settings from one of the default core content types:

Always expand crop area: Yes
Show default crop area: Yes
Warn the user if the crop is used more than once: Yes
Preview image style: social_x_large
Preview crop zone image style: Crop thumbnail
Crop Type used: hero, teaser

Hide the field from display on the Display configuration.

That's it. The template will do the rest and automatically pick up the image from the field_your_content_type_machine_name_image field and will use it and display it as the large header image for the page.

:-)

Comment #6

Carlos Miranda Levy CreditAttribution: Carlos Miranda Levy as a volunteer commented 25 June 2017 at 20:10

Assigned:	Unassigned	» Carlos Miranda Levy
Status:	Active	» Fixed

Comment #7

9 July 2017 at 20:14

Status:

Fixed

» Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

Comment #8

Pegasus360 CreditAttribution: Pegasus360 commented 20 July 2017 at 10:07

Category:

Support request

» Bug report

Thanks Carlos Miranda Levy for your response.
I realize this has been closed as fixed but I cannot recreate your success in this process.
I previously posted this issue
https://www.drupal.org/node/2883427
But it has not received any response.

I have tried and tried to get the theme to pick up the image. (of course clearing caches along the way)
I have tried it on a site where the header image shows up on the default content type (like event) but a new content type with the above image setup results in a grey or black hero image instead of the article image.
I have also tried to make the default content type show the black background but the image still appears.

I would love to use this theme on my sites but this problem is beyond frustrating.
Thoughts??

Comment #9

Carlos Miranda Levy CreditAttribution: Carlos Miranda Levy as a volunteer commented 20 July 2017 at 22:53

File	Size
Screen Shot 2017-07-21 at 12.43.44 AM.png	46.4 KB
Screen Shot 2017-07-21 at 12.44.12 AM.png	104.77 KB
Screen Shot 2017-07-21 at 12.44.37 AM.png	97.09 KB

What's the machine name of your custom content type?
That's the name you have to use to name the field for the image that's picked up by Open Social to be displayed as header.

In my case, I created a content type called civ_media_gallery.
So for the image field to be used for header image, it has to be named field_civ_media_gallery_image.

And remember to disable it or hide it for both Default and Teaser display.

I hope the screen captures below help you better understand:

Field definition:

Form Display:

Display:
Display

Comment #10

Pegasus360 CreditAttribution: Pegasus360 commented 21 July 2017 at 09:27

Thanks Carlos Miranda Levy.
That was it!! Matching names.
Your clarification made my day, week, and month wonderful.
In hindsight it was very simple... all I had to do was follow your instructions... oh and read the details first.

Thanks so much for taking the time to help out. This is what makes open source/Drupal community great.

Comment #11

Carlos Miranda Levy CreditAttribution: Carlos Miranda Levy as a volunteer commented 22 July 2017 at 10:21

Glad it worked :-)
It took me a while to figure it out too and I knew it should be easy!
(I was diving into templates and code trying to achieve it) - in the end it was a lot easier than imagined :p

Comment #12

Pegasus360 CreditAttribution: Pegasus360 commented 24 July 2017 at 19:36

It seems to be even easier.
From what I have tried the only thing that matters is the machine field names that match.
The widget configuration on the manage form doesn't seem to matter nor does hiding the image field in the manage display.
Just as long as the machine names match EXACTLY with "_image" at the end and the appropriate social core title block is activated for that content type then the title image block should display.
I had a content type that had a long machine name. When I added the image field with the required name protocol I realized the last part of the machine name was missing. In other words with '_image' at the end only the '_im' was present. DID NOT WORK.
Had to build another custom content type with a shorter machine name.

I always wonder... where is the documentation when they create these fabulous ideas....??

Thanks again.