These changes are coming from the feedback that we've received from the patch submission that we've made on 9/23/2020.
+++ b/core/themes/olivero/css/components/node-teaser.pcss.css
@@ -0,0 +1,124 @@
+ .field--name-field-image {
Can we untie this from the image machine name?
+++ b/core/themes/olivero/css/components/node.pcss.css
@@ -0,0 +1,72 @@
+ .field--name-user-picture img {
Can we untie this from user_picture field?
| Comment | File | Size | Author |
|---|---|---|---|
| #9 | Screenshot 2021-04-25 at 08.46.10.png | 91.83 KB | gauravvvv |
| #8 | Screen Shot 2021-04-25 at 1.22.20 AM.png | 63.56 KB | djsagar |
| #8 | Screen Shot 2021-04-25 at 1.22.34 AM.png | 148.74 KB | djsagar |
| #7 | user-picture.png | 164.38 KB | mherchel |
| #7 | 3173016-6.patch | 7.1 KB | mherchel |
Comments
Comment #2
chrisfree commentedThis looks as good a ticket as any to try and jump in on...
What is more desirable here? Would this selector be better?
& .field--type-imageIt would match the existing field's default markup and any other of type image added to the teaser display mode in the future.In this case, would it be fine to assume that images rendered within the
.node__metacould all be similarly styled? Would& imgwork? Or would that be too broad a selector?Comment #3
mherchelYeah, from my point of view, both selectors need to be tied to the machine name of the field.
In the first case (with
field--name-field-image), it might be possible to add additional images onto the article content type. We only want to apply this style tofield--name-field-image.The second case is very much the same. The user may have multiple image fields attached to it, but we only want to style one.
Comment #4
lauriiiI agree that we probably don't want to tie it to the field type either. We should probably add a new template (with some classes specific to this use case) for this, which could be extended so that it could be used by fields with other machine name.
Comment #5
chrisfree commentedAdditional templates for these use-cases makes a lot more sense. Even better if the classes that style the relevant elements are written in a more generic fashion.
Comment #6
mherchelComment #7
mherchelPatched attached.
A couple notes:
.field--name-field-image, I created a custom class called primary image. When this class is inside of the teaser it will inherit the teaser styles..field--name-user-picture img, i added a wrapper in thenode.html.twigfile with a BEM style name. This image is a slightly different use case than the primary image. This is the author's pic that can appear above the post.Comment #8
djsagar commentedHi @mherchel,
i'm getting error while applying patch #7.
please check the attachment and let me know what am i doing wrong.
Thanks you!
Comment #9
gauravvvv commentedPatch #7 working fine in 9.2.
It updates the class
field--name-user-picturetonode__author-image.Adding an after-patch screenshot for reference.
Moving to RTBC.
Comment #10
gauravvvv commentedPatch #7, is passing the drupal CI test so there are issues with your local setup not with the patch. Don't change the status to NW when any patch passes CI.
Comment #11
gauravvvv commentedComment #12
mherchelTugboat preview of #7 https://3173016-node-pcss-82idgqvb9a6edlt3dtksahsddk3vfr7w.tugboat.qa/
Comment #13
mherchelFollowup issue created at #3211148: Separate styles within node.pcss.css in Olivero
Comment #14
lauriiiCommitted 3296fcb and pushed to 9.2.x. Thanks!