Contenu média

Documentation du tag

Returns a media content item. Takes a dict as parameter, with the following structure:

data_dict = {
    "image_url": "URL of the image file (use either image_url, svg or iframe_url parameter)",
    "svg": "the full content of a SVG file (use either image_url, svg or iframe_url parameter)",
    "iframe": "dictionary with data for an iframe, see below (use either image_url, svg or iframe_url parameter)",
    "caption": "(optional) Caption of the media. Can contain HTML",
    "alt_text": "(optional) Alternative text of the media"
    "extra_classes": "(Optional) string with names of extra classes for the whole component",
    "ratio_class": "(Optional) string with the name of a ratio class",
    "transcription": "(Optional) A transcription item dictionary, see [component documentation](/django-dsfr/components/transcription/)",
}

All of the keys of the dict can be passed directly as named parameters of the tag.

Structure of the iframe dict:

{
    "title": "The title of the iframe",
    "url": "The URL of the iframe"
    "width": "(optional) The width of the iframe",
    "height": "(optional) The height of the iframe",
    "sandbox": "(optional) a string with the sandbox attribute of the iframe",
    "allow": "(optional) a string with the allow attribute of the iframe",
}

Relevant extra classes:

  • fr-content-media--lg: media is 125% of the main text width.
  • fr-content-media--sm: media is 75% of the the main text width.

Relevant ratio classes for images:

  • fr-ratio-32x9
  • fr-ratio-16x9
  • fr-ratio-3x2
  • fr-ratio-4x3
  • fr-ratio-1x1
  • fr-ratio-3x4
  • fr-ratio-2x3

Relevant ratio classes for videos:

  • fr-ratio-16x9
  • fr-ratio-4x3
  • fr-ratio-1x1

Constants are provided for these classes in dsfr/constants.py: IMAGE_RATIOS and VIDEO_RATIOS

Tag name: dsfr_content

Usage: {% dsfr_content data_dict %}

Exemples

Exemple 1 

{'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux '
             'montagnes.',
 'caption': 'Image en largeur normale et en 16x9',
 'image_url': '/django-dsfr/static/img/placeholder.16x9.svg',
 'ratio_class': 'fr-ratio-16x9'}
Silhouette stylisée représentant le soleil au-dessus de deux montagnes.
Image en largeur normale et en 16x9

Exemple 2 

{'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux '
             'montagnes.',
 'caption': 'Image en largeur normale et en 4x3',
 'image_url': '/django-dsfr/static/img/placeholder.16x9.svg',
 'ratio_class': 'fr-ratio-4x3'}
Silhouette stylisée représentant le soleil au-dessus de deux montagnes.
Image en largeur normale et en 4x3

Exemple 3 

{'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux '
             'montagnes.',
 'caption': 'Image plus large que la colonne de contenu',
 'extra_classes': 'fr-content-media--lg',
 'image_url': '/django-dsfr/static/img/placeholder.16x9.svg'}
Silhouette stylisée représentant le soleil au-dessus de deux montagnes.
Image plus large que la colonne de contenu

Exemple 4 

{'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux '
             'montagnes.',
 'caption': 'Image SVG avec un lien dans la légende.\n'
            '                                Source.',
 'svg': '\n'
        '  \n'
        '  \n'
        '  \n'
        '    \n'
        '      \n'
        '        \n'
        '        \n'
        '        \n'
        '        \n'
        '        \n'
        '        \n'
        '        \n'
        '        \n'
        '        \n'
        '        \n'
        '        \n'
        '        \n'
        '      \n'
        '    \n'
        '    \n'
        '      \n'
        '      \n'
        '      \n'
        '      \n'
        '      \n'
        '      \n'
        '      \n'
        '      \n'
        '    \n'
        '  \n'
        '\n'}
Image SVG avec un lien dans la légende. Source.

Exemple 5 

{'alt_text': '',
 'caption': 'Vidéo avec transcription',
 'iframe': {'height': '450',
            'sandbox': 'allow-same-origin allow-scripts allow-popups',
            'title': 'Présentation du portail tubes',
            'url': 'https://tube-numerique-educatif.apps.education.fr/videos/embed/9d0b132d-f836-459a-9b9b-97b1a647232d',
            'width': '894'},
 'ratio_class': 'fr-ratio-4x3',
 'transcription': {'content': '
\n'
                              '
\n'
                              '    Lorem ipsum dolor sit amet, consectetur '
                              'adipiscing elit, sed do eiusmod tempor '
                              'incididunt ut\n'
                              '    labore et dolore magna aliqua. At quis '
                              'risus sed vulputate odio ut enim. At risus '
                              'viverra\n'
                              '    adipiscing at in tellus integer feugiat. '
                              'Aliquam purus sit amet luctus venenatis '
                              'lectus.\n'
                              '    Pellentesque id nibh tortor id aliquet '
                              'lectus proin. Ultricies leo integer malesuada '
                              'nunc vel\n'
                              '    risus. Euismod elementum nisi quis eleifend '
                              'quam adipiscing vitae proin. Iaculis eu non '
                              'diam\n'
                              '    phasellus vestibulum lorem sed risus '
                              'ultricies. Quis varius quam quisque id diam. '
                              'Vehicula\n'
                              '    ipsum a arcu cursus vitae congue mauris '
                              'rhoncus. Sed id semper risus in hendrerit '
                              'gravida.\n'
                              '
\n'
                              '\n'
                              '
\n'
                              '    Suspendisse potenti nullam ac tortor vitae '
                              'purus faucibus. Condimentum lacinia quis vel '
                              'eros.\n'
                              '    Pellentesque sit amet porttitor eget dolor. '
                              'Varius duis at consectetur lorem donec massa '
                              'sapien\n'
                              '    faucibus. Egestas pretium aenean pharetra '
                              'magna ac placerat vestibulum lectus. Tristique '
                              'magna\n'
                              '    sit amet purus gravida. Nec ullamcorper sit '
                              'amet risus nullam eget felis eget nunc. Aenean '
                              'vel\n'
                              '    elit scelerisque mauris pellentesque '
                              'pulvinar. Vitae proin sagittis nisl rhoncus '
                              'mattis rhoncus\n'
                              '    urna neque viverra. Quam viverra orci '
                              'sagittis eu volutpat odio. Sapien faucibus et '
                              'molestie\n'
                              '    ac. Rhoncus aenean vel elit scelerisque '
                              'mauris pellentesque pulvinar pellentesque. Nunc '
                              'sed\n'
                              '    velit dignissim sodales ut eu sem integer.\n'
                              '
\n'
                              '\n'
                              '
\n'
                              '    Diam maecenas ultricies mi eget mauris '
                              'pharetra et ultrices. Justo nec ultrices dui '
                              'sapien eget\n'
                              '    mi proin. Viverra mauris in aliquam sem '
                              'fringilla ut. Pretium lectus quam id leo in '
                              'vitae\n'
                              '    turpis massa. Ultricies integer quis auctor '
                              'elit sed vulputate mi sit amet. Non quam lacus\n'
                              '    suspendisse faucibus interdum posuere '
                              'lorem. Feugiat in fermentum posuere urna nec. '
                              'Bibendum\n'
                              '    enim facilisis gravida neque. Vitae aliquet '
                              'nec ullamcorper sit amet risus. Et netus et\n'
                              '    malesuada fames ac turpis. Ut eu sem '
                              'integer vitae. Aliquam eleifend mi in nulla '
                              'posuere\n'
                              '    sollicitudin aliquam ultrices sagittis. '
                              'Eget sit amet tellus cras adipiscing enim. '
                              'Massa eget\n'
                              '    egestas purus viverra accumsan. Urna neque '
                              'viverra justo nec. Bibendum est ultricies '
                              'integer\n'
                              '    quis auctor elit. Sagittis vitae et leo '
                              'duis ut diam.\n'
                              '
\n'
                              '\n'
                              '
\n'
                              '    Urna porttitor rhoncus dolor purus. Enim eu '
                              'turpis egestas pretium. Risus ultricies '
                              'tristique\n'
                              '    nulla aliquet enim tortor at auctor urna. '
                              'Etiam non quam lacus suspendisse faucibus '
                              'interdum\n'
                              '    posuere lorem. Ut enim blandit volutpat '
                              'maecenas volutpat blandit aliquam etiam. Ac '
                              'tortor\n'
                              '    vitae purus faucibus ornare suspendisse sed '
                              'nisi lacus. Accumsan lacus vel facilisis '
                              'volutpat\n'
                              '    est velit egestas dui. Enim eu turpis '
                              'egestas pretium aenean pharetra. Arcu cursus '
                              'vitae congue\n'
                              '    mauris rhoncus. A cras semper auctor neque '
                              'vitae tempus. Viverra ipsum nunc aliquet '
                              'bibendum\n'
                              '    enim facilisis gravida neque convallis. Ac '
                              'tortor dignissim convallis aenean et tortor. '
                              'Sed id\n'
                              '    semper risus in hendrerit gravida rutrum. '
                              'Tempus iaculis urna id volutpat lacus laoreet.\n'
                              '
\n'
                              '\n'
                              '
\n'
                              '    Massa tempor nec feugiat nisl pretium '
                              'fusce. Urna porttitor rhoncus dolor purus non '
                              'enim\n'
                              '    praesent. Suspendisse ultrices gravida '
                              'dictum fusce. Habitant morbi tristique senectus '
                              'et netus.\n'
                              '    Adipiscing vitae proin sagittis nisl. '
                              'Bibendum ut tristique et egestas quis. Dictum '
                              'non\n'
                              '    consectetur a erat nam at lectus. Vulputate '
                              'dignissim suspendisse in est ante in nibh '
                              'mauris\n'
                              '    cursus. Faucibus turpis in eu mi bibendum '
                              'neque egestas congue quisque. Neque laoreet\n'
                              '    suspendisse interdum consectetur libero id '
                              'faucibus. Gravida rutrum quisque non tellus '
                              'orci ac\n'
                              '    auctor augue mauris. Turpis nunc eget lorem '
                              'dolor sed viverra ipsum nunc. Quam viverra '
                              'orci\n'
                              '    sagittis eu volutpat odio. Id interdum '
                              'velit laoreet id donec ultrices tincidunt arcu '
                              'non.\n'
                              '    Viverra nibh cras pulvinar mattis nunc sed. '
                              'Risus sed vulputate odio ut enim blandit '
                              'volutpat\n'
                              '    maecenas volutpat. Augue neque gravida in '
                              'fermentum et sollicitudin ac orci. Commodo '
                              'odio\n'
                              '    aenean sed adipiscing diam.\n'
                              '
\n'
                              '
'}}
Vidéo avec transcription

Transcription

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At quis risus sed vulputate odio ut enim. At risus viverra adipiscing at in tellus integer feugiat. Aliquam purus sit amet luctus venenatis lectus. Pellentesque id nibh tortor id aliquet lectus proin. Ultricies leo integer malesuada nunc vel risus. Euismod elementum nisi quis eleifend quam adipiscing vitae proin. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Quis varius quam quisque id diam. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Sed id semper risus in hendrerit gravida.

Suspendisse potenti nullam ac tortor vitae purus faucibus. Condimentum lacinia quis vel eros. Pellentesque sit amet porttitor eget dolor. Varius duis at consectetur lorem donec massa sapien faucibus. Egestas pretium aenean pharetra magna ac placerat vestibulum lectus. Tristique magna sit amet purus gravida. Nec ullamcorper sit amet risus nullam eget felis eget nunc. Aenean vel elit scelerisque mauris pellentesque pulvinar. Vitae proin sagittis nisl rhoncus mattis rhoncus urna neque viverra. Quam viverra orci sagittis eu volutpat odio. Sapien faucibus et molestie ac. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Nunc sed velit dignissim sodales ut eu sem integer.

Diam maecenas ultricies mi eget mauris pharetra et ultrices. Justo nec ultrices dui sapien eget mi proin. Viverra mauris in aliquam sem fringilla ut. Pretium lectus quam id leo in vitae turpis massa. Ultricies integer quis auctor elit sed vulputate mi sit amet. Non quam lacus suspendisse faucibus interdum posuere lorem. Feugiat in fermentum posuere urna nec. Bibendum enim facilisis gravida neque. Vitae aliquet nec ullamcorper sit amet risus. Et netus et malesuada fames ac turpis. Ut eu sem integer vitae. Aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Eget sit amet tellus cras adipiscing enim. Massa eget egestas purus viverra accumsan. Urna neque viverra justo nec. Bibendum est ultricies integer quis auctor elit. Sagittis vitae et leo duis ut diam.

Urna porttitor rhoncus dolor purus. Enim eu turpis egestas pretium. Risus ultricies tristique nulla aliquet enim tortor at auctor urna. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Accumsan lacus vel facilisis volutpat est velit egestas dui. Enim eu turpis egestas pretium aenean pharetra. Arcu cursus vitae congue mauris rhoncus. A cras semper auctor neque vitae tempus. Viverra ipsum nunc aliquet bibendum enim facilisis gravida neque convallis. Ac tortor dignissim convallis aenean et tortor. Sed id semper risus in hendrerit gravida rutrum. Tempus iaculis urna id volutpat lacus laoreet.

Massa tempor nec feugiat nisl pretium fusce. Urna porttitor rhoncus dolor purus non enim praesent. Suspendisse ultrices gravida dictum fusce. Habitant morbi tristique senectus et netus. Adipiscing vitae proin sagittis nisl. Bibendum ut tristique et egestas quis. Dictum non consectetur a erat nam at lectus. Vulputate dignissim suspendisse in est ante in nibh mauris cursus. Faucibus turpis in eu mi bibendum neque egestas congue quisque. Neque laoreet suspendisse interdum consectetur libero id faucibus. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Turpis nunc eget lorem dolor sed viverra ipsum nunc. Quam viverra orci sagittis eu volutpat odio. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Viverra nibh cras pulvinar mattis nunc sed. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Augue neque gravida in fermentum et sollicitudin ac orci. Commodo odio aenean sed adipiscing diam.