Add field for responsive image styles. (#350)

* #349 Added a field plugin and a test for the responsive image styles.

* #349 Added DependencySerializationTrait to ImageResponsive. Adjusted ImageFieldTest.

* #349 Addressed the code style change requests.

* #349 Added ResponsiveImageStyleId enum.

* #349 Only add the responsive field to iamges when the responsive_image module is enabled.

Author: blazeyo

modules/graphql_image/src/Plugin/Deriver/ImageResponsiveDeriver.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace Drupal\graphql_image\Plugin\Deriver;
+
+use Drupal\Component\Plugin\Derivative\DeriverBase;
+use Drupal\Core\Extension\ModuleHandlerInterface;
+use Drupal\Core\Plugin\Discovery\ContainerDeriverInterface;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+
+/**
+ * Only add the 'responsive' field if the responsive_image module is enabled.
+ */
+class ImageResponsiveDeriver extends DeriverBase implements ContainerDeriverInterface {
+
+  /**
+   * Entity type manager.
+   *
+   * @var \Drupal\Core\Extension\ModuleHandlerInterface
+   */
+  protected $moduleHandler;
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container, $basePluginId) {
+    return new static(
+      $container->get('module_handler')
+    );
+  }
+
+  /**
+   * EntityBundleDeriver constructor.
+   *
+   * @param \Drupal\Core\Extension\ModuleHandlerInterface $moduleHandler
+   *   The module handler service.
+   */
+  public function __construct(ModuleHandlerInterface $moduleHandler) {
+    $this->moduleHandler = $moduleHandler;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getDerivativeDefinitions($basePluginDefinition) {
+    if ($this->moduleHandler->moduleExists('responsive_image')) {
+      $this->derivatives['responsive_image'] = $basePluginDefinition;
+    }
+    return parent::getDerivativeDefinitions($basePluginDefinition);
+  }
+
+}

modules/graphql_image/src/Plugin/GraphQL/Enums/ResponsiveImageStyleId.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace Drupal\graphql_image\Plugin\GraphQL\Enums;
+
+use Drupal\graphql_core\GraphQL\EnumPluginBase;
+use Drupal\graphql_core\GraphQLSchemaManagerInterface;
+use Drupal\responsive_image\Entity\ResponsiveImageStyle;
+
+/**
+ * @GraphQLEnum(
+ *   id = "responsive_image_style_id",
+ *   name = "ResponsiveImageStyleId"
+ * )
+ */
+class ResponsiveImageStyleId extends EnumPluginBase {
+
+  public function buildValues(GraphQLSchemaManagerInterface $schemaManager) {
+    $items = [];
+    foreach (ResponsiveImageStyle::loadMultiple() as $responsiveImageStyle) {
+      $items[$responsiveImageStyle->id()] = [
+        'value' => $responsiveImageStyle->id(),
+        'name' => $responsiveImageStyle->id(),
+        'description' => $responsiveImageStyle->label()
+      ];
+    }
+    return $items;
+  }
+
+}

modules/graphql_image/src/Plugin/GraphQL/Fields/ImageResponsive.php

@@ -0,0 +1,83 @@
+<?php
+
+namespace Drupal\graphql_image\Plugin\GraphQL\Fields;
+
+use Drupal\Core\DependencyInjection\DependencySerializationTrait;
+use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
+use Drupal\Core\Render\RendererInterface;
+use Drupal\graphql_core\GraphQL\FieldPluginBase;
+use Drupal\image\Plugin\Field\FieldType\ImageItem;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+use Youshido\GraphQL\Execution\ResolveInfo;
+
+/**
+ * Retrieve the responsive image.
+ *
+ * @GraphQLField(
+ *   id = "image_responsive",
+ *   secure = true,
+ *   name = "responsive",
+ *   type = "String",
+ *   nullable = true,
+ *   types = {"Image"},
+ *   arguments = {
+ *     "style" = "ResponsiveImageStyleId"
+ *   },
+ *   deriver = "Drupal\graphql_image\Plugin\Deriver\ImageResponsiveDeriver"
+ * )
+ */
+class ImageResponsive extends FieldPluginBase implements ContainerFactoryPluginInterface {
+  use DependencySerializationTrait;
+
+  /**
+   * Renderer instance to render fields.
+   *
+   * @var \Drupal\Core\Render\RendererInterface
+   */
+  protected $renderer;
+
+  /**
+   * Constructs an ImageResponsive object.
+   *
+   * @param array $configuration
+   *   Plugin configuration.
+   * @param string $pluginId
+   *   Id of the plugin.
+   * @param array $pluginDefinition
+   *   Plugin definition array.
+   * @param \Drupal\Core\Render\RendererInterface $renderer
+   *   The renderer service.
+   */
+  public function __construct(array $configuration, $pluginId, $pluginDefinition, RendererInterface $renderer) {
+    $this->renderer = $renderer;
+    parent::__construct($configuration, $pluginId, $pluginDefinition);
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container, array $configuration, $pluginId, $pluginDefinition) {
+    return new static(
+      $configuration,
+      $pluginId,
+      $pluginDefinition,
+      $container->get('renderer')
+    );
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function resolveValues($value, array $args, ResolveInfo $info) {
+    if ($value instanceof ImageItem && $value->entity->access('view')) {
+      $variables = [
+        '#theme' => 'responsive_image',
+        '#responsive_image_style_id' => $args['style'],
+        '#uri' => $value->uri,
+      ];
+
+      yield $this->renderer->renderRoot($variables);
+    }
+  }
+
+}

modules/graphql_image/tests/queries/image.gql

@@ -9,6 +9,7 @@ query ($path: String!) {
         width
         height
         url
+        responsive(style: style_one)
         thumbnailImage: derivative(style: thumbnail) {
           width
           height

modules/graphql_image/tests/src/Kernel/ImageFieldTest.php

@@ -2,10 +2,12 @@
 
 namespace Drupal\Tests\graphql_image\Kernel;
 
+use Drupal\Core\DependencyInjection\DependencySerializationTrait;
 use Drupal\Core\Entity\Entity\EntityViewDisplay;
 use Drupal\Core\Entity\Entity\EntityViewMode;
 use Drupal\field\Entity\FieldConfig;
 use Drupal\field\Entity\FieldStorageConfig;
+use Drupal\responsive_image\Entity\ResponsiveImageStyle;
 use Drupal\simpletest\ContentTypeCreationTrait;
 use Drupal\simpletest\NodeCreationTrait;
 use Drupal\Tests\graphql_core\Kernel\GraphQLFileTestBase;
@@ -30,6 +32,8 @@ class ImageFieldTest extends GraphQLFileTestBase {
     'filter',
     'file',
     'image',
+    'breakpoint',
+    'responsive_image',
     'graphql_content',
     'graphql_file',
     'graphql_image',
@@ -92,6 +96,17 @@ protected function setUp() {
         ],
       ])
       ->save();
+
+    $responsiveImgStyle = ResponsiveImageStyle::create(array(
+      'id' => 'style_one',
+      'label' => 'Style One',
+      'breakpoint_group' => 'graphql_image',
+    ));
+    $responsiveImgStyle->addImageStyleMapping('graphql_image.mobile', '1x', array(
+      'image_mapping_type' => 'image_style',
+      'image_mapping' => 'thumbnail',
+    ));
+    $responsiveImgStyle->save();
   }
 
   /**
@@ -113,6 +128,7 @@ public function testImageField() {
     $this->assertEquals($a->image->alt, $image['alt'], 'Alt text correct.');
     $this->assertEquals($a->image->title, $image['title'], 'Title text correct.');
     $this->assertEquals($a->image->entity->url(), $image['url'], 'Retrieve correct image url.');
+    $this->assertNotEmpty(trim($image['responsive']), 'Responsive image returned.');
   }
 
 }