I'm a total newbie. I'm building a site which includes images, such as photographs, with text captions under them.

Recently (?!), some of these text captions have broken and slipped, with the first words appearing to the left of the image and the rest still below it where they should be. I've tried monkeying with the margin width, but that doesn't seem to be the problem.

Any clues?

  • Hello, welcome to Drupal Answers! Please don't include links to your site/product. Please try to explain what you want as detailed as possible with the help of code snippets and/or screenshots. – leymannx Aug 10 '18 at 13:26
  • I had a similar problem recently and setting the figure to display: table; and the figcaption to display: table-caption; worked for me. Here is a link to see other ways of styling images and captions: w3.org/Style/Examples/007/figures.en.html – B. Schroeder Aug 10 '18 at 17:36

There are many possible reasons how the code wound up being like that. If you could remove the inline styles for margins, height and width and instead add the class "img-responsive" to the image it would render in a more "standard" and expected way on the page. Alternatively you could add

width: 100%; height: auto;

to the inline style, but that would only be a "emergency" solution and not be considered good practice.

However it would probably be best to cleanup the markup so that the caption lives in a div or span with a class name of caption. Why are you not making use of the default caption option in Drupal? If you look at or install a "clean" version of Drupal 8 and create an article and add an image you can see how the caption works. It generates this markup:

<figure role="group" class="caption caption-img"><img alt="Dog" data-entity-type="file" data-entity-uuid="c8b30e3b-8346-4d2b-8df3-86dcff35d274" src="/sites/default/files/inline-images/images.jpeg"><figcaption>This is my nice caption</figcaption></figure>
  • Please don't include links to target an issue. What value does this link have now that the issue gets fixed? Zero! – leymannx Aug 10 '18 at 13:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.