0

I've created a view for selected articles to be featured on the homepage. Each article includes the following fields: image, title, body. Currently, these elements are arranged vertically, but I aim to modify their layout. I want to position the image to the left with the title and body text to the right of the image.

Initially, I considered using a CSS style such as 'float:left' for this purpose. However, it appears that the ability to add custom CSS classes to images has been removed in Drupal 10. Do you have any suggestions for achieving this layout?

enter image description here

1 Answer 1

0

Steps to Add class to img field wrapper:

  1. click on image field, click on style settings

  2. Check this option "Customize field and label wrapper HTML"

  3. Select from select box (Wrapper HTML element) dropdown "div" element

  4. Checked the "Add HTML class" option & add your required class

enter image description here

Note: clear cache after adding class

There are multiple approaches to achieve the desired layout that you specified:

  1. Create view mode & theming of this newly created view mode as per desired HTML structure , select the view mode in view -- i.e more flexible way as that layout can be reused anywhere where that view mode selected , layout 'll not restricted to view page/block only

  2. Add custom text field in view after adding all the fields , then hide the all fields except custom field, Add required html structure as per need in the "custom text" field along with token of field that are hide in above for eg:

    enter image description here

Note: These token can be get from by click on "Replacement patterns" tab of custom text field.

1
  • 1
    Thanks, it works well! The field "custom text" and the replacement patterns was what I was looking for. Alternatively you can use bootstrap classes to achieve this layout: <div class="row"> <div class="col-md-auto mb-3 mb-md-0"> {{ field_image }} </div> <div class="col-md"> <h2>{{ title }}</h2> <p>{{ body }}</p> </div> </div> Jan 27 at 11:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.