More clarity on image directory usage, please.

[mel-miller]

After looking at the changes in #230, i'm still unclear about a few things:

1. Since I am primarily using this as a D8 theme, I have been putting my images in the /images directory and pulling them into my template via {{ base_path ~ directory }}. This works fine for the Drupal theme and my local instance of PL. But I'm now beginning to publish a remote instance of PL and I can't figure out how to get my image paths correct there. I have a few potential hacky ways to get around this, but i'd really like to understand the correct way to accomplish this.

2. One of the suggestions in the updated images readme files was to store images in a "relevant component directory", which i think may help solve my first issue, and I like the cleanliness of it as an organizational technique, but I can't figure out how to pull those into my twig template.

Thanks in advance.

[evanmwillhite]

@miller2676 good questions. I think image usage is a place where we need to beef up our documentation.

When you mention in your first question that you pull them into Drupal templates, how are you using them there? I don't know that I've referenced an image file from a Drupal template, but rather I either pass in image objects from Drupal or reference those images in component files (<img> in a component Twig file) or as background images in CSS.

Thanks!

[mel-miller]

@evanmwillhite -- Sorry for the confusion. I should probably reserve the term "template" for drupal templates only. I was actually referring to the pattern's twig file. I am referencing back to the theme root's images directory in that file.

For example when pulling the wordmark file into the address block pattern's twig file, I was using this:

  <div id="site-wordmark">
    <a href="http://osu.edu" target="_blank"><img src="{{ base_path ~ directory }}/images/osu-logos/wordmark/osu-footer-wordmark-{{ footer_color }}.svg" alt="The Ohio State University" /></a>
  </div>

This works for the local pattern lab (somehow) and the drupal site, but not the GitHub hosted pattern lab. My temporary workaround was to add this code to my pattern's twig file which affects both the local and hosted pattern lab.

{% if base_path|length == 0 %}
  {% set base_path = "https://it-osu-web.github.io/wcm8_emulsify/pattern-lab/public" %}
{% endif %}

While this works and is addressing an immediate need, It doesn't seem like the right way to accomplish it. Which is why I'm trying to figure out the bast way to go about this. And the idea of storing images with its component also sounds interesting.

[evanmwillhite]

I agree, and I've created an issue over here to see if we can fix this in the deploy script.

[evanmwillhite]

I looked into this and did a deploy on our emulsify repo and a change we made recently to a path fixed the broken link: https://fourkitchens.github.io/emulsify/pattern-lab/public/?p=atoms-icons

Here is the approach we took with the link. Tl;dr is that we added a line in this data file which only applies in Pattern Lab (not Drupal). I think you could play around with this for your base_url.