Add ability to build responsive image styles in style guide

[dipakmdhrm]

#981

Update:

• Add ability to build responsive image styles in style guide
  • Use breakpoints from server_theme

Mobile	Tablet	Desktop

[amitaibu]

• string should normally be replaced with an enum
• Can we call an actual responsive image, like used in the Themetrits / PEVB, instead of building one ourselves?

[dipakmdhrm]

string should normally be replaced with an enum

I've created enum for $id_type. $id and $alt can have any value, so keeping those as string.

• Can we call an actual responsive image, like used in the Themetrits / PEVB, instead of building one ourselves?

@amitaibu PEVB uses drupal media/image entity to build responsive images. But shouldn't we avoid Drupal entities in StyleGuideController (to avoid any database dependency and just using placeholder data)?

[amitaibu]

I'm assuming there's a low level method that recieves a file, and creates the image style from it. Can you check that please

[dipakmdhrm]

@amitaibu To create a responsive image we use:

[
      '#theme' => 'responsive_image',
      '#uri' => $file_uri,
]

The file uri needs to be from a file stream in Drupal's local filesystem i.e. either public:// or private://.

A file in modules is in neither such stream. We'll need to temporarily copy file directly to public:// to build it's image styles, which will copy a new file on every /style-guide page request (or we'll need to hardcode a filename for public://)

We do have an alternative. We can create a custom stream wrapper for style guide module server_style_guide:// which can process files from web/modules/custom/server_style_guide/images/ to create responsive image styles.
I'd recommend this option as we have responsive images in most of our components and currently style guide displays static images for all of them.

[dipakmdhrm]

Update:

• Add a new server-style-guide:// stream wrapper.
• Use '#theme' => 'responsive_image' to render responsive images in style guide.