Get Image URL From Referenced Media Into View In Drupal 8

I have a view of all blog posts. Each blog post has an image which is a referenced Media. On the view of all the blog posts, I would like to use a Pattern Lab template. So, I need to pass an image URI to a Pattern Lab template. However, when I add the image to the Fields in the view, it outputs the image with no option of outputting the URI of the image.

I forget if there was a way to do this without a custom module in D7. D8 does offer a custom module to do this but come on! This is so simple! We shouldn’t have to have a custom module just to output the src of an image!

What I finally figured out how to do (after looking at a few forums) is to add a relationship to the media.

In the view, follow these steps:

  1. Expand Advanced on the right side.
  2. Click Add to the right of Relationships.
  3. Choose Media referenced from field_image (where field_image may be what the field is for your content type.)
    Screen shot of Media referenced from field_image
  4. Apply (to this display).
  5. Under Fields click Add.
  6. Search for image and select the Image with category Media.
    Screen shot of Image with Media category
  7. On the next screen for Formatter choose URL to image.

There you go! You should see the path to the image and NOT the stupid public:// path either!

Getting it from the twig template was difficult too but here’s how I got it:

{{ fields.field_media_image.content|striptags|trim }}

Why striptags and trim? Cause if you have suggestion comments on (like I do), it is outputting a field so you want to get rid of that and just have the string itself.

Now you can pass that pretty output into your pattern lab template or do whatever you want with it!

jQuery Is Not Defined In Pattern Lab

I’ve been tasked with something very tedious. I’m to migrate Drupal 7 to Drupal 8. However, for the theme in Drupal 8 it has been decided we are going to use Pattern Lab. Specifically, using the Emulsify theme as a start.

I got lots of JavaScript errors on the Pattern Lab site to start. I needed to uncomment and create syslinks. Basically, follow the instructions in the \web\themes\custom\acf_enterprise\components\_meta\_01-foot.twig file.

After I got all that working, I proceeded to add jQuery to my branding bar file (located at \web\themes\custom\acf_enterprise\components\_patterns\02-molecules\menus\branding-bar\branding-bar.js).

Per the instructions, I uncommented the JavaScript so that it’s using Drupal behaviors as well. Ex.

(function ($, Drupal) {

    Drupal.behaviors.branding_bar = {
        attach: function (context) {

})(jQuery, Drupal);

Also make sure to include jQuery in the library for your theme on the Drupal 8 side… For example, my branding bar library (\web\themes\custom\my_theme\my_theme.libraries.yml) looks like this:

    dist/02-molecules/menus/branding-bar/branding-bar.js: {}
    - core/drupal
    - core/jquery

It works in Drupal 8! However, it does not in Pattern Lab (i.e. on /themes/custom/my_theme/pattern-lab/public/?p=viewall-molecules-menus).

Soooo… that’s the jist. And I’m getting a jQuery not defined error.

Try googling this. NOTHING HELPFUL.

What they forget to mention is that you need to include jQuery in the footer of Pattern Lab. I.E in that \web\themes\custom\my_theme\components\_meta\_01-foot.twig file you have to muck around with to get other things to work.

My file now looks like this:

{{ patternLabFoot | raw }}

<!-- Drupal-specific usage -->
<!-- example using symlinking -->
<!-- cd web/themes/custom/emulsify/components/js -->
<!-- ln -s ../../../../../core/assets/vendor/domready/ready.min.js ./ -->
<!-- ln -s ../../../../../core/misc/drupal.js ./ -->

<!-- need to include jQuery!!! -->
<script src="../../js/jquery-2.0.0b2.js"></script>

<script src="../../js/ready.min.js"></script>
<script src="../../js/drupal.js"></script>
<script src="../../js/debounce.js"></script>

<script src="../../../../dist/scripts-styleguide.js"></script>

<!-- If using Drupal.behaviors, uncomment for them to work in Pattern Lab -->


Notice the include of jquery-2.0.0b2.js. They forgot to mention to put that in there. JQuery now works on it so I should be good to go for about twenty minutes until I run into the next problem.

Also to note that their version of JQuery may not be the same one you’re used to. You may need to include the REAL version of JQuery in this footer file.

… I feel like I’m going to be updating this blog a lot since this theme and the impossible task of Pattern Lab has fallen entirely on my plate.