Module Description
Overview GraphQL Responsive Image is an extension of the GraphQL module drupal/graphql 3.0 which adds the possibility to render responsive drupal images using GraphQL. This module provides a field plugin ResponsiveImage which contains the HTML markup of a rendered responsive image and a field plugin ResponsiveImageStructured that provides a structured response of image and srcsets. The responsive image style can be defined as an option in the GraphQL Query.
Usage Expand your Media Image in your GraphQL query with the field ResponsiveImage or ResponsiveImageStructured, under style select the desired responsive image style.
query ($node: String!) { nodeById(id: $node) { ... on NodeContentPage { fieldHero { entity { ... on MediaImage { fieldMediaImage { ResponsiveImageStructured(style: IMAGESTYLE) ResponsiveImage(style: IMAGESTYLE) } } } } } } } ResponsiveImageStructured(style: IMAGESTYLE) Gives you the Responsive Image as structured data back.
Usage (dumping the response object): {{ dump(graphql.nodeById.fieldYOURIMAGEFIELD.entity.fieldMediaImage.ResponsiveImageStructured) }}.
ResponsiveImage(style: IMAGESTYLE) Gives you the rendered entity of the Responsive Image back. If you are using Twig, you can render the responsive image like this
Usage: {{ graphql.nodeById.fieldYOURIMAGEFIELD.entity.fieldMediaImage.ResponsiveImage | raw }} Note: This renders the repsonsive image with the according Responsive Image Drupal Template. It will use the Template from the theme if you override the template in your frontend theme.
Usage Expand your Media Image in your GraphQL query with the field ResponsiveImage or ResponsiveImageStructured, under style select the desired responsive image style.
query ($node: String!) { nodeById(id: $node) { ... on NodeContentPage { fieldHero { entity { ... on MediaImage { fieldMediaImage { ResponsiveImageStructured(style: IMAGESTYLE) ResponsiveImage(style: IMAGESTYLE) } } } } } } } ResponsiveImageStructured(style: IMAGESTYLE) Gives you the Responsive Image as structured data back.
Usage (dumping the response object): {{ dump(graphql.nodeById.fieldYOURIMAGEFIELD.entity.fieldMediaImage.ResponsiveImageStructured) }}.
ResponsiveImage(style: IMAGESTYLE) Gives you the rendered entity of the Responsive Image back. If you are using Twig, you can render the responsive image like this
Usage: {{ graphql.nodeById.fieldYOURIMAGEFIELD.entity.fieldMediaImage.ResponsiveImage | raw }} Note: This renders the repsonsive image with the according Responsive Image Drupal Template. It will use the Template from the theme if you override the template in your frontend theme.
Module Link
Project Usage
80
Security Covered
Covered By Security Advisory
Version Available
Production
Module Summary
This module aims to solve the problem of rendering responsive Drupal images using GraphQL by providing field plugins for ResponsiveImage and ResponsiveImageStructured, allowing users to define the responsive image style in the GraphQL query.
Data Name
graphql_responsive_image
OPENAI CHATBOT
OPENAI CHATBOT
