Pasar al contenido principal
Penyaskito Blog

Main navigation

  • Home
Language switcher
  • English
  • Español
User account menu
  • Iniciar sesión

Ruta de navegación

  1. Inicio

Canvas Tips&Tricks: Declaring images in SDCs

Por penyaskito , 18 Julio, 2026

I've read recently about making SDCs dependent on Drupal Canvas because of needing to reference Canvas in the definition of your prop, so the right media widget is used inside Canvas:

image:
  $ref: json-schema-definitions://canvas.module/image
  type: object
  title: Image
  description: >
    Image of the singer
  examples:
    - src: 'micro.webp'
      alt: 'Nice picture of the singer'
      width: 200
      height: 300

That was the case during the alphas. But was fixed long ago, even before the 1.0.0 release. See canvas#3515074.

image:
  type: object
  title: Image
  required: [src]
  properties:
    src:
      type: string
      format: uri-reference
      contentMediaType: "image/*"
      x-allowed-schemes: [http, https]   # this is image-uri, itself a nested $ref
    alt:    { type: string }
    width:  { type: integer }
    height: { type: integer }
  description: >
    Image of the singer
  examples:
    - src: 'micro.webp'
      alt: 'Nice picture of the singer'
      width: 200
      height: 300

That's more verbose, but would make your SDC Canvas-independent and re-usable, and it's 100% equivalent. 

If we missed updating some docs, please create an issue on the Canvas issue queue.

Tags

  • Drupal
  • Drupal Canvas
  • Drupal Canvas Tips&Tricks
  • Single-Directory Components
  • Drupal planet

Comments

El contenido de este campo se mantiene privado y no se mostrará públicamente.

Texto sin formato

  • No se permiten etiquetas HTML.
  • Las direcciones de correos electrónicos y páginas web se convierten en enlaces automáticamente.
  • Saltos automáticos de líneas y de párrafos.

Archivo mensual

  • Abril 2025 (1)
  • Enero 2022 (1)
  • Mayo 2021 (2)
  • Abril 2021 (1)
  • Noviembre 2012 (1)
  • Septiembre 2012 (3)
  • Agosto 2012 (3)
  • Junio 2012 (6)

Contenido reciente

Optimizando PhpStorm cuando va lento o se cuelga
1 año 3 meses ago
Reescribiendo el historial de commits de git para editar el autor y el email de commits pasados
4 años 6 meses ago
Drupal JavaScript behavior para destacar líneas de pedido editadas en el carrito de Drupal Commerce
5 años 1 mes ago

Comentarios recientes

That's a great idea! I would…
3 meses ago
D.org integration
3 meses ago
Can't blame you 😜For me…
3 meses ago

Blogs que sigo

  • Mateu Aguiló "e0ipso"
  • Gábor Hojtsy
  • Pedro Cambra
  • The Russian Lullaby, davidjguru
  • Can It Be All So Simple
  • Maria Arias de Reyna "Délawen"
  • Matt Glaman
  • Daniel Wehner
  • Jacob Rockowitz
  • Wim Leers
  • Dries Buytaert
  • arcturus
  • Drupal Core AI digest
  • Drupal CMS AI digest
  • Drupal Canvas AI digest
  • Drupal AI AI digest
  • Drupal Patterns AI digest
  • Trisha Gee
  • Très Bien Tech, by _nod
  • Moshe Weitzman
  • Drupal core change records
  • Ed Zitron's Where's Your Ed At
  • Sebastian Bergmann (phpunit.expert)
  • PHP Reads
  • mandclu
  • Marissa Epstein
  • WordPress Core
  • David Bushell
Syndicate

Pie de página

  • Drupal.org
  • LinkedIn
  • GitHub
  • Mastodon
  • Twitter
Funciona con Drupal

Free 🇵🇸