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...

je ne suis pas certains d'avoir tout a fait compris, mais il me semble que le système de grille est pas mal si tu souhaites créer des gabarits quasi prêt à l'emploi.

Par exemple , certains éditeurs permettent de créer des tableaux en indiquant le nombre de colonne et de ligne , je pense notamment a ckeditor (mais il y en a surement plein d'autre) , que l'on pouvait configurer et customiser , ainsi que d’insérer d'un click des gabarits( qu'il suffisait ensuite à l'utilisateur à remplir de texte et d'image sans se soucier du style , très utile pour éviter une soupe de balise et plein de couleur flashy partout. Pour les gabarits , tu est seul maitre (id, class, structure,data-attribute,etc...), il y aurait assez peu de fonctions à garder accessible à l'utilisateur (upload d'image, choix du gabarits) et de fonction à créer pour modifié par exemple le nombre colonnes/lignes d'un gabarit, du coup c'est un éditeur en ligne coté administration de ton site .

edit : une demo https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html

la partie ou tu peut insérer tes gabarits est la première liste (paragraph,heading ..) à cette endroit au lieu d’insérer une simple balise, cela peut-être un gabarit complet , je penses que tu trouveras rapidement comment faire si tu ne connais pas déjà cet éditeur.
Modifié par gcyrillus (18 Oct 2019 - 18:04)

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

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

Je suis ravi , laisse nous savoir, enfin je suis curieux .

Perso , la seule option du gabarit pour l'utilisateur fut, rigide bien sur, mais très efficace et a évité de longues heures de formation et de rattrapage de code dans un contexte familial et associatif .

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?

oups,

C'est du JavaScript, tu peut le télécharger et le conserver sur ton site ou faire un lien direct pour ensuite le lancer à partir d'une page .

un exemple dans codepen https://codepen.io/gc-nomade/pen/GRRNBEQ

pour les gabarits, il devraient se trouver dans un fichiers nommé fcktemplates.xml , tu peut le modifié à ta convenance. edit ça c'etait pour les vielles versions*, aujourd'hui c'est gerer à l'aide d'un plugin.

* il y a encore une vielle version de fckeditor 2.6.3 que l'on trouve encore en téléchargement. , mais pour quelque chose plus récent, tinymce peut - être plus simple a reprendre https://codepen.io/gc-nomade/pen/ZEEBmPQ
Modifié par gcyrillus (21 Oct 2019 - 10:45)