Skip to content

Instantly share code, notes, and snippets.

@thamas
Last active October 11, 2018 08:54
Show Gist options
  • Save thamas/612df5513d83f0c0a15a5cb2a0c57b79 to your computer and use it in GitHub Desktop.
Save thamas/612df5513d83f0c0a15a5cb2a0c57b79 to your computer and use it in GitHub Desktop.

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 afterwards

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,

  • , you need to insert srcset and other variable values in every item/child

    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)

  • @thamas
    Copy link
    Author

    thamas commented Oct 11, 2018

    screen shot 2018-10-05 at 7 04 26 am

    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment