Theme Content/Article Listing - Node Teaser

@proeung thank you for sharing the designs.

I am looking forward to starting an implementation of the same. Just to confirm, are we covering/supporting User Meta in the teasers ? Example: Author Picture, Name, Post Date.

Article "Teaser" view display has much more fields than presented on design. How do you want to manage it?
"standard" installation of drupal has the following fields for Article "teaser" view display:

So on presented design there are no "Authored by", "Image", "Tags" and "Links" fields. Links field can contains lots of links, like "Read more", "Add new comment", "Login" (if anon user) and other.

Adding on to this, I'd love it if the teasers would show the image (if present). We'd have to accommodate a mixed use of images and no images.

Hey there!
I've updated the listing design to include

• thumbnail image
• tags
• authored by

Image attached. I also updated this in the Figma file. Feedback welcome!

Hello!
Thanks for your proposed design, it looks cool! Only one note - design for "Links" field is still missing (Re: #5). Would be great if you will add it!

@kostyashupenko - Just discussed this with @jwitkowski79 on Slack. We agree that we don't need the links field, and are going to omit it.

The "Read more" link is redundant and not needed, and the "Add new comment" link is also not needed.

We should create a core issue to remove this from the teaser display within the standard profile.

But for the 8.x version, let's just omit it.

The design updated in #8 looks great, everything mentioned in #5 (except the links which we are going to omit) has been covered, so if this is final, please let me know if I can pick this up for development.

In the mobile design, I noticed that we are not displaying the author field, are we planning to scrap off the author information in mobile design?
I think keeping the author's information won't make much difference to the design plus the User Experience will be the same for desktop and mobile users.

Also, the date format looks different for mobile, do we really need to render different date formats for desktop and mobile?

@jwitkowski79 has been working on them at https://www.figma.com/proto/r8uq72Q9weTMVsNUFZKEYH/D9-Theme-Master?node-.... I thought they were in the primary public Figma, but they're not yet there.

@hansa11: @proeung and I are sprinting on Olivero this weekend, and this is one of our targeted issues to knock out. Do you have a patch yet? If so, we can build on top of it. If not, we'll probably we putting this together today or tomorrow:

@mherchel, yes I do have a patch, a few things are remaining if this needs to be completed on priority I'll try to wrap it up quickly and add the patch here in some time.

Thanks!

I am uploading the patch for article node teaser, please review and let me know

Thanks!

Thanks for doing the heavy lifting on this @hansa11! I made a few changes, and will get this committed shortly!

I had some debug code in the last commit. This one is better :)

@hansa11,

Nice work towards theming the article listing. While reviewing I found couple of theming issues.

Desktop:

• As per the figma design, Tags label should be shown as PUBLISHED IN
• Tags links should not matching with design. (Design has no underline, comma etc..)
• As per the design, Read more, Login or register to post commnets links are not required. So in node--article--teaser.html.twig file also add links to without function to exclude from display. ( {{ content|without('field_image', 'links') }})

Mobile:

• Image and title not aligned properly. As per the design both top position should match. (CSS align-items property should update)
• Tags and other teaser links update as mentioned in desktop.

@mherchel,

Sorry, I have seen your patch (#22, #23) little late after updated my comment (#24).
#23 patch working great and fixing teaser links issue.

@mherchel and @Sreenivas Bttv: Thank you very much for your time to review my patch :)

@Sreenivas Bttv: The default theming for tags is covered in https://www.drupal.org/project/olivero/issues/3118088. So, I have made only the teaser specific changes for tags. For the links, as per #14, we are going to get it removed from the core for teasers, also Mike has made the required changes to the patch and omitted it from the twig itself for now.

@Sreenivas Bttv - The "tags" label would need to be changed in Drupal core's standard profile. We can create a followup issue if necessary -- but honestly, I think "tags" is okay.

I left the link styles within the tags the default, so they are more accessible.

I also opened #3124988: Better focus styles on title within node-teaser to implement a focus style on the teaser title.

Sorry to reply here - don't know where to post elsewhere - I see that the design of the article teaser reduces the article image to a small round thumbnail. Are you sure that this is supposed to be the article image, instead of the author profile image?
To me it makes no sense that the article image is crammed into a small thumbnail, no clear benefit, and looks like a mistake instead of being intentional. Cant we allow the article image to be above the teaser text?