Known Participant

Question

Methods for placing image+caption

Forum|Forum|21 days ago
February 3, 2026
3 replies
188 views

Methods for placing image+caption Feb 3

This website, largely targeting innovative bamboo construction methods, should work like a newspaper blog:

1 Often, only one image with just one caption – Image size can vary a lot! Caption and image stay together over different screen sizes. The <figure>-<img>-<figcaption> method should work if the total figure width can be controlled, say 150px? Caption will follow image if screen size changes.

2 Sometimes, 2-3 explanatory images in a row with text content connected as in a user manual - Image size could mostly be the same. Occasionally though, one image merits a larger height or width than the others in the row. Should be possible with Flex and .figure-gallery.width {max-width:200px;…} or 30% for example. Two row grids are less relevant here.

3 Sometimes only text chunks like in an article. Normal <p> should do with random words in bold or italic. <span>, in-line. These text portions should also wrap around floated images like in Word.

Grateful for comments!

Ingemar

Nancy OShea

Community Expert

Whereas in Real-Time Preview not!!

@ingo9,

Real-Time Preview is a dud. Adobe may have disabled it. Just use ordinary Preview in Browser, File ⇒ Open in Browser.

Change Preferences as shown below.

Nancy O'Shea— Product User & Community Expert

BenPleysier

Community Expert

In my experience, Dreamweaver users tend to think in terms of floats, Bootstrap, manual CSS etc. But modern browsers support Custom Elements, Shadow DOM and Encapsulated CSS.

Try the following option:

Create a file in the JS folder called ingo-figure.js (eg. /js/ingo-figure.js) and paste the following code into it:

<script>
class IngoFigure extends HTMLElement {
  static get observedAttributes() {
    return ["src", "caption", "align", "width"];
  }

  constructor() {
    super();
    this.container = document.createElement("figure");
    this.img = document.createElement("img");
    this.captionEl = document.createElement("figcaption");

    this.container.appendChild(this.img);
    this.container.appendChild(this.captionEl);
  }

  connectedCallback() {
    this.applyAttributes();
    this.applyStyles();

    // If user places <img> tags inside, treat it as a gallery
    if (this.querySelectorAll("img").length > 0) {
      this.renderGallery();
    } else {
      this.appendChild(this.container);
    }
  }

  attributeChangedCallback() {
    this.applyAttributes();
  }

  applyAttributes() {
    if (this.hasAttribute("src")) {
      this.img.src = this.getAttribute("src");
    }

    if (this.hasAttribute("caption")) {
      this.captionEl.textContent = this.getAttribute("caption");
    }

    if (this.hasAttribute("width")) {
      this.container.style.width = this.getAttribute("width");
    }

    const align = this.getAttribute("align");
    if (align === "left") {
      this.container.style.float = "left";
      this.container.style.margin = "0 1rem 1rem 0";
    } else if (align === "right") {
      this.container.style.float = "right";
      this.container.style.margin = "0 0 1rem 1rem";
    } else {
      this.container.style.float = "none";
      this.container.style.margin = "1rem auto";
    }
  }

  applyStyles() {
    this.container.style.display = "inline-block";
    this.container.style.textAlign = "center";
    this.container.style.maxWidth = "100%";

    this.img.style.maxWidth = "100%";
    this.img.style.height = "auto";

    this.captionEl.style.fontSize = "0.9rem";
    this.captionEl.style.color = "#555";
    this.captionEl.style.marginTop = "0.4rem";
  }

  renderGallery() {
    const gallery = document.createElement("div");
    gallery.style.display = "flex";
    gallery.style.gap = "1rem";
    gallery.style.flexWrap = "wrap";

    const images = this.querySelectorAll("img");
    images.forEach(img => {
      img.style.maxWidth = "100%";
      img.style.height = "auto";
      img.style.flex = "1 1 calc(33% - 1rem)";
      gallery.appendChild(img);
    });

    this.innerHTML = "";
    this.container.innerHTML = "";
    this.container.appendChild(gallery);
    this.container.appendChild(this.captionEl);
    this.appendChild(this.container);
  }
}

customElements.define("ingo-figure", IngoFigure);
</script>

Make sure to link the JS file in your document (/js/ingo-figure.js)

Then, if you want a single image + caption use:

<ingo-figure
  src="images/bamboo.jpg"
  caption="Joint detail of the bamboo frame"
  width="300px"
  align="left">
</ingo-figure>

Centered Image

<ingo-figure
  src="images/roof.jpg"
  caption="Roof structure overview"
  width="60%"
  align="center">
</ingo-figure>

Small gallery (2-3 images)

<ingo-figure caption="Construction sequence">
  <img src="images/step1.jpg">
  <img src="images/step2.jpg">
  <img src="images/step3.jpg">
</ingo-figure>

This component directly solves the issues that you raised:

Keeps image + caption together
Handles left/right text wrapping cleanly
Provides gallery layout without floats
Ensures consistent spacing
Removes repetitive markup
Works in Dreamweaver Design View
Requires no frameworks

This gives you a new HTML tag that behaves exactly the way you want.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

I

ingo9Author

Known Participant

Hi Ben Pleyser

Thanks for the interesting js-code! Since I’m a total JavaScript newbie I need some more instructions on how to make it work. I have created the ingo-figure.js , pasted your code in it, placed it the same folder as index and linked it to the index.html. So far there is now CSS file involved. Now, how to bring in the images and captions?

Should I organize the index.html with place-holders carrying the names “img”, “figcaption” like the previously discussed “figure” method and insert the content there?

Ingemar

My html code so far:

<!doctype html>

<html>

<head>

<title>Ben Pleyser</title>

</head>

<body>

<h2>Hello</h2>

</body>

</html>

O

osgood_

Legend

Hi Ben Pleyser

Thanks for the interesting js-code! Since I’m a total JavaScript newbie I need some more instructions on how to make it work. I have created the ingo-figure.js , pasted your code in it, placed it the same folder as index and linked it to the index.html. So far there is now CSS file involved. Now, how to bring in the images and captions?

Should I organize the index.html with place-holders carrying the names “img”, “figcaption” like the previously discussed “figure” method and insert the content there?

Ingemar

My html code so far:

<!doctype html>

<html>

<head>

<title>Ben Pleyser</title>

</head>

<body>

<h2>Hello</h2>

</body>

</html>

You just use the custom html tag <ingo-figure></ingo-figure> inserted inside your body tag as the examples provided show, just add your own caption and the src path to your images. Does it work, l don't know, as l haven't tested it but it's a bit OTT in my opinion for what you require. Just a simple js script and html tags in the code is really all you require much like the script Lena provided at the very outset of this discussion.

Nancy OShea

Community Expert

Stop trying to make web pages behave like a printed user manual. It’s never going to work for every user on every device. That’s not how the web works.

If layout is of primary importance to you, I suggest you switch to InDesign & export your manual to Adobe PDF which users can download & view from your site.

https://www.adobe.com/products/indesign.html

https://helpx.adobe.com/indesign/using/exporting-publishing-pdf.html

Just my 5 cents.

Nancy O'Shea— Product User & Community Expert

I

ingo9Author

Known Participant

The term ”user manual” was just to describe the need to have a few images related to a common topic with an accompanying caption that stays with the images to make sense. Actually, it has already been proved to work thanks to support in this forum. See point 2 in the “Methods…” beginning this thread.

Downloadable PDFs are great as links on this website and already used since a long time. Thanks anyway for the suggestion.

K

Kajrov

Inspiring

First of all I havn’t find any app jet how can replace Dreamwear, but I was also a user of Homsite and Macromedia Dreamwear and so the UI for Dreamweaver is not new for me, and then they atlas update PHP and Bootstrap, well done.

Now to Images, I took litle thinking but you can place images relativt easy ther you will have theme I work on a travel journey and album just now. I use <figure><ficaption> with a travel class flotat: left; width:: 22% fore image adjust left and ajust right float:right; width: 20% for the journal

-----------------------------------------------------------------------------------------------
and for the album figure { flex: 25%; max-width: 25%;
padding: 0 4px;}
figure img { margin-top: 8px; vertical-align: middle; }

I also use media max-with 800px resp, 600px and here I use figure with a flex.and max-width 50 % resp 100%

with this can I, in place max 4 images small size, 2 and 3 medium size and 1 full size with row, break

all this inside a mother article with class I call .album with margin: auto; diplay: flex, flex-wrap: wrap; padding: 0 4px;

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded