trzalica [Oct 5th at 12:37 AM] Hi all! I wrote an article about how I use Responsive images in PL/Drupal... Maybe it will be helpful to some of you who are using/planing to use Pattern Lab in your projects. mosaicwebsites.com/blog/responsive-images-emulsify-pl-theme-easy-way
64 replies
danny_englander [6 days ago]
@trzalica Excellent. So if I understand this correctly, your first block of code (which has things like "responsive_image_base_class": your_component_variable_name_image_base_class,) that defines everything would appear in a Pattern Lab Twig file, say card.twig for example. Then your second block of code i.e. {{ content.field_machine_name_of_responsive_image_field[0] }} would be part of an embed on the Drupal side in a drupal twig template?
trzalica [6 days ago] @danny_englander Yes, exactly! In that way you get modular piece of code/component which works equally good and predictable in PL and in Drupal. Some things, like in this case, responsive images are best to leave to be rendered by Drupal. Otherwise you'll find yourself in a complicated situation without an easy solution.
danny_englander [6 days ago] ok thanks. I'm still lost, I just tried this, but I just can't seem to wrap my mind around it. I've been trying to learn this one thing for several weeks now.
trzalica [6 days ago] Try to first wrap your responsive image part of component in a twig block, make everything you need to style it and make it work in PL and then in appropriate Drupal Twig template just replace that block of twig code as a part of Twig embed with Drupal variable for the responsive image field (which you get via Kint or xDebug etc.) (edited)
trzalica [6 days ago] It's confusing at first, I admit that, but it works well once you wrap your head around that concept (edited)
danny_englander [6 days ago] I've got it working in Pattern Lab but not with a responsive image, I guess that would make a difference of it not working in Drupal in that case. I am also using media entity so it's a bit harder to pull in the image
danny_englander [6 days ago] oh wow, ha I have it working for the first time on the drupal side using embed so now all I need to do is get the responsive image working in Pattern Lab.
danny_englander [6 days ago] and then the same in drupal
danny_englander [6 days ago] That is what is really stumping me over and over again
trzalica [6 days ago] I'm glad to hear that Danny! 🙂
trzalica [6 days ago] You'll see, reponsive image is not much different than an ordinary image component, in a way that it's not much harder to make it work. Just take some time to play with it.
danny_englander [6 days ago] here is my code that work in Pattern Lab
{% block hero_img %}
{% if hero_img_src %}
{% include "@atoms/04-images/00-image/responsive-image.twig" with {
"img_url": hero_img_url,
"img_src": hero_img_src,
"img_alt": hero_img_alt,
"image_link_blockname": hero_base_class,
"image_blockname": hero_base_class,
"output_image_tag": hero_image_output_image_tag,
"responsive_image_base_class": hero_image_base_class|default('image hero__image'),
} %}
{% endif %}
{% endblock %}
danny_englander [6 days ago] so I think I need to adjust this part
trzalica [6 days ago] Yes. Now map variables for use in PL (insert everything in appropriate yml file) and then swap the content of that block in Drupal Twig template file (edited)
danny_englander [6 days ago] the code above only renders a regular image in Pattern Lab, not a responsive one
danny_englander [6 days ago] so I need to somehow get the responsive image working in Pattern Lab
danny_englander [6 days ago]
but it should be working as I am pulling in "@atoms/04-images/00-image/responsive-image.twig but maybe my mappings are off
trzalica [6 days ago] I think I know what's the issue - try to put "output_image_tag": "TRUE", in the twig file and you'll get tag with srcset otherwise you'll get picture element (edited)
danny_englander [6 days ago]
I added that in just now but I am not getting either, just an img tag
trzalica [6 days ago] hmm
trzalica [6 days ago] and you have img_srcset
trzalica [6 days ago] ?
danny_englander [6 days ago]
I added this in "img_srcset:" hero_img_srcset|default(img_element['#attributes'].srcset),
danny_englander [6 days ago] but now on the drupal side it shows an error
danny_englander [6 days ago] for that line
danny_englander [6 days ago] well any way thanks for the help. I think I'll just let it go for now. I know I am probably close but it hurts my head if I focus on it too long
trzalica [6 days ago] because you need to replace that block in Drupal twig template otherwise it will try to pull variables from PL twig template
danny_englander [6 days ago]
oh actually it was a syntax error on my part so I fixed that but still just an img tag
danny_englander [6 days ago] ok well maybe I'll come back to it another day
trzalica [6 days ago] try one more thing - remove "output_image_tag"
danny_englander [6 days ago] ok
trzalica [6 days ago]
you have to get the
danny_englander [6 days ago] heh, no I am definitely doing something wrong then (edited)
danny_englander [6 days ago] well, I gotta get to work now but thanks again! Perhaps another day
trzalica [6 days ago] Shure, I will be glad if I can help
trzalica [6 days ago] Have a nice day @danny_englander
danny_englander [6 days ago] ok you too @trzalica!
danny_englander [6 days ago] ahh, ok I tried one more thing, I need to define that stuff in my yml! like srcset. now it's starting to work at least on the pattern lab side (edited)
danny_englander [6 days ago] I remembered from your blog post " you just need to enter your own data into corresponding yml file" @trzalica (edited)
danny_englander [6 days ago] so I had lots of data already in there but just not for srcset
danny_englander [6 days ago] and other responsive image specific things
danny_englander [6 days ago] I was relying on the fact that the Emulsify example was complete
danny_englander [6 days ago] which was false
danny_englander [6 days ago] at least in terms of the YML data
trzalica [6 days ago] Yeah, just go on Danny. 👍 I knew that that silly srcset is missing because I made that mistake too when I was starting to play with this... 🙂
trzalica [6 days ago] You need to populate and map all these data yourself...
danny_englander [6 days ago] yes!
danny_englander [6 days ago] that's it
trzalica [6 days ago] And if you have responsive image in, for example,
trzalica [6 days ago] but that's another story 🙂
danny_englander [6 days ago] It's not there yet but it will be Screen Shot 2018-10-05 at 7.04.26 AM.png
danny_englander [6 days ago] I'm starting to figure this out a bit more,. wow
trzalica [6 days ago] Yup, that's it! 👍🙂🤘
danny_englander [6 days ago] Thanks again. Now I need to do sizes and all that jazz
danny_englander [6 days ago] and that will be yml
danny_englander [6 days ago] and vars in PL
trzalica [6 days ago] that's a piece of cake or better to say child's play 😉
danny_englander [6 days ago] Indeed
trzalica [6 days ago] ughh 😕
danny_englander [6 days ago] ok very cool
danny_englander [6 days ago] well anyway I thank you again (edited)
trzalica [6 days ago] You're welcome! 🙂
trzalica [6 days ago] @danny_englander If you want, feel free to share a link to the article on twitter or somewhere. Maybe it'll be helpful for others too (like your articles which were helpful when I was starting with D8 😉 )... (edited)
danny_englander [6 days ago] @trzalica sure, that sounds good
danny_englander [8:42 PM] whelp, for anyone wanting to know, it ended up being trivial (oh right I pulled a lot of my hair out over the past many weeks) to render a referenced responsive media image entity from paragraphs in Emulsify mapped to pattern lab. hallelujah. Thanks in part to @trzalica for cluing me in to using block embed. It turns out that when in drupal using that function, it can render an entire entity with a simple short bit of code. Thus, on the Drupal side I have
{% block hero_img %}
{{ content.field_media_image }}
{% endblock %}
and that pretty much does it. Now there are all kinds of template suggestions and what not that I did not have before to even fine tune it more. I will write something up on my blog.
danny_englander [8:44 PM] This was the post that solidified it for me: https://drupal.stackexchange.com/a/258422/697 "Notice that I only need to write {{ content.FIELDNAME }}, if I wrap everything in a {% block content %}" (edited)
