1

I'm trying to customize a View that I've created showing all of one published content type. The grid is set to have 3 columns. I also have it set as a Rendered Entity with view mode "Teaser" so that it displays the image and content.

Using CSS I've been able to modify the header size, hide the words in the teaser while leaving the image, and modifying the size of the teaser image.

I'd like to be able to display the title underneath the image rather than on top, as is the default. There is no setting in the Views module to achieve this that I can find, so I'm doing some modifications using CSS. I'm having some trouble figuring out which divs to use to do so (there seem to be quite a lot that don't move around so easily). The divs are currently positioned like so:

enter image description here

I did find that assigning display: table-header-group and display: table-footer-group to the images (l-slat__media) and header text (l-slat__header) respectively worked, after assigning display: table to article. But they were tiny and about 25% of the original size. Not really sure why this is happening.

Any input as to what I might be able to do to put the header text below the teaser image would be appreciated.

2

You could simply edit the "Teaser" view mode and place the title below the image using Display Suite Here are the instructions:

  1. Download Display Suite and enable the "Display Suite" and "Display Suite UI" modules.
  2. Go to admin/structure/types/manage/article/display/teaser where "article" is your content type.
  3. In the "Layout for article in teaser" fieldset, select the "One column" layout and click Save.

Layout step 1

  1. You will now see a lot more fields, provided by the Display Suite module. One of those fields is the title field.

Layout step 2

  1. Now drag the title field up to the top, below the Image field, just like you requested. From what I understand from your question, you could remove the Body field as well.

Layout step 3

  1. All done! No custom theming required.
  • How does one create a new view mode? Do you mean "Manage Display" for the fields in the content type? Wouldn't that also alter other locations where the content type is displayed? Ideally I'd like to be able to do this with my current configuration and CSS rather than download a new module. – Kate Jan 11 '17 at 16:27
  • I edited my answer to add a detailed guide with screenshots to show you how easy the Display Suite module is. – Wim Mostrey Jan 11 '17 at 18:35
  • 1
    Thanks for the detailed instructions! I really appreciate it. As I mentioned in my original query though, I was looking to do this with CSS only. – Kate Jan 17 '17 at 17:00
1

I dislike answering my own questions, but I was able to figure it out using CSS only and not downloading any new modules, which is what I had stated in my original question and preferred to do.

The answer is to set the header position as absolute and change the bottom padding of the text:

div.ViewClassName .l-slat__header {
    position: absolute;
    bottom: 30px;
 }

div.ViewClassName article {
    padding-bottom: 40px;
 }

Where .ViewClassName is the CSS class you can assign your View to alter it in the Views UI, .l-slat__header is a default value given to the header from the Views source code, and article is an object created by the Views source code. You could probably also create a selector to only get articles in a specific View. I dislike using pixels instead of em or %; it would probably take some more finagling to incorporate those, but I suspect it would work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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