Can you add background-position selector to masthead images?

divspan

11/11/23, 9:36 PM

The theme we are using incorporates mastheads on almost all pages. The images are 1440x625 with a hard coded background-position of top center. I had no hand in developing this theme so I'm really lost. The major issue is that with the masthead image being set as top center on every page, we're having very mixed results with image behavior at different breakpoints.

Is it possible to add a drop-down or some kind of selector that would allow content creators the ability to choose from one of a number of positions (for example,top center, center center, bottom right) that would benefit the intended focus of the image? I don't want to get into using custom values, just the "default" positions.

I did a quick and dirty mock up.

If this is possible, could some one please point me in the right direction on how to incorporate this into the theme?

I know this topic has been hit on in a number of posts, but for the life of me, I couldn't find a solid answer for my question.

Let me also state that I am very new to Drupal and I am diving into this head first, so please forgive me for any confusion I may type up or misunderstanding.

0 + 1

media

leymannx

11/12/23, 4:55 PM

You would add a new list select field "background position" to page content type. And hide this field from display. That's the first step. The second step is to retrieve this field's value in the template that actually prints that background image and use it to either set a CSS var or inline CSS. This usually happens via preprocess hook. You get the value from the node object and pass it to the template via `$variables['masthead_background_position'] = $my_value;` which in the template can be accessed as `{{ masthead_background_position }}`. That's probably the most common approach.

Elon Musk

I sit in a Tesla and translated this thread with Ai:

EN: Can you add background-position selector to masthead images?

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.