Montage d'images responsive

Bonjour à tous
Mon objectif est de créer des montages d'images pour obtenir par exemple ceci:

sous la forme

<figure class="montage"> <!-- la totalité du montage -->
  <figure>  <!-- partie gauche -->
    <figcaption>Situation des scènes dans la chapelle</figcaption>
	<img src="..."...>
  </figure>
  <figure class="montage">  <!-- partie droite -->
	<figcaption>Salles transversale et longitudinale</figcaption>
	<figure> <!-- partie droite haut -->
		<img src="...">
		<figcaption>Transverse sud</figcaption>
	</figure>
	<figure> <!-- partie droite milieu -->
		<img src="...">
		<figcaption>Salle longue</figcaption>
	</figure>
	<figure> <!-- partie droite bas -->
		<img src="...">
		<figcaption>Transverse nord</figcaption>
	</figure>
  </figure>
</figure>

Avec un CSS bien fait,on peut rendre ce code responsive sans trop de difficulté.

Ma question: connaissez vous un produit qui permette simplement ?
Je cherche quelque chose où on puisse créer un modèle de grille et y déplacer des images.
Tout ce que j'ai pu trouver produit du pdf ou des images, mais je n'en ai trouvé aucun qui produise du HTML.

Bonjour,

la source est-ce déjà ce code HTML auquel il manque les CSS de mise en page ou bien faut-il déjà générer un code HTML en indiquant soit sous forme de code soit par glisser-déplacer WYSIWYG,etc ?

Je ne connais pas autre chose que Webflow (super interface mais pour euh être hébergé chez eux je crois, c'est un service) ou dans les CMS (WP et son Gutenberg,etc) mais c'est parce que je ne cherche pas ce genre d'outil
NVu vient de sortir une nouvelle version mais c'est du page par page je pense, pas sûr que ça corresponde à votre besoin (en tout cas ce qu'il fait est propre, vu le CV de l'auteur j'ai 0 doute).

Est-ce qu'une grille CSS moderne ferait l'affaire (à appliquer sur du HTML déjà existant) ?
Ça se résume au principe d'ajouter une classe parente .grid et ici 2 classes .col-8 et .col-4 sur les 2 enfants à la Bootstrap (et ses 12 colonnes).
Ou .grid-6 / .col-4 et .col-2 avec notre grillade. grillade est indépendant de KNACSS, un c/c de sa CSS et c'est parti
Si ajouter des classes sur parent/enfant est un principe qui vous convient et qu'il vous faut une grille bien précise (surtout le comportement qui diffère entre mobile, tablette et desktop ou parfois besoin de plus de points de rupture), je peux la générer assez facilement.
On n'est même plus forcé de "penser en 12 colonnes" si on combine avec les "variables CSS" et la même grille fonctionne avec 2 à 5000 colonnes si ça nous chante
Modifié par Felipe (17 Oct 2019 - 19:30)

Merci de ta réponse.

Je crois que je me suis (très) mal expliqué.

Le HTML ci-dessus est une simplification du HTML que génère un script (assez complexe) qui permet au propriétaire du site de définir simplement ce qu'il veut obtenir.
L'intérêt de ce script est que l'utilisateur ne donne que les images et les textes, le script, assurant une présentation acceptable et responsive, sans que l'utilisateur ait à donner des informations détaillées sur leur positionnement.

Mais si on veut faire des présentations un peu plus complexes, il est nécessaire de donner plus d'information, sur le positionnement.
Je cherche donc un outil qui permette de définir une présentation responsive d'un montage d'images, mon idée étant de compléter cet outil par le CSS et je JS qui assure la cohérence avec l'existant.

Pour l'instant, quand il veut un montage d'image un peu plus recherché que ce que fait mon script, l'utilisateur le fait eh Photoshop ce qui produit une image jpg,, responsive aisément par du CSS basique, mais ce n'est pas très satisfaisant.

Les produits que j'ai trouvés sur internet en cherchant "montage photo online" offrent des modèles tout prêts dans lesquels mettre les image et génèrent du pdf ou du jpg.

Ce que j'aimerais avoir, c'est un outil qui
1) permette de définir soi-même le gabarit dans lequel mettre les images
2) génère du HTML en sortie
Avec un peu d'huile de coude, adapter un HTML produit par un tel outil au contexte du site ne doit pas être une tâche insurmontable...
L'alternative serait de développer moi-même un tel outil, mais je n'ai aucune expérience dans l'utilisation des <canvas> et j'aimerais ne pas avoir à apprendre un nouvelle techno, ce qui prend toujours du temps, surtout à mon âge...

@gcyrillus Merci, c'est le genre de chose que je recherche, je vais me plonger dans la doc.

Je dois être complètement à la masse, je ne comprends rien du tout à ckeditor, à la façon dont ça s'utilise, s'il faut le charger sur son PC ou si on peut l'utiliser en ligne, comment on récupère le résultat, etc.
Peux tu me donner un pointeur sur une page où tout cela est décrit?