Images display: inline in composer but become display: block on page


(Pekka Gaiser) #1

To reproduce:

  • Set max_image_width to something like 100px
  • Upload two images that are larger than that, like 700px wide
  • See them next to each other in composer
  • Save
  • The Javascript renderer sometimes puts them next to each other
  • But reload the page - they are underneath each other.

Background:

I have a forum where I show design sketches to colleagues. Embedding them all in full size is proving detrimental to the reading experience as they take up so much space. I resorted to setting max_image_width to something insanely small (like 100px). This has the desired effect: I now have small thumbnails which can be enlarged on click through the Lightbox.

However, when I try to put them next to each other, it works in the composer, but not in the actual view, where they are always display: block. This is because the actual view has a <div> around the image.

I can fix this for myself using CSS, but generally, the discrepancy should be removed either by making the <div> display: inline-block or something, or making the images in the composer view display: block by default (which would suck though IMHO).


(Jeff Atwood) #2

@zogstrip can you make sure the CSS is consistent here? We should have the preview match the final output as closely as we can.


(Régis Hanol) #3

Image display is now consistent :sunny:

https://github.com/discourse/discourse/commit/dd9340778916b3ee200a8cffefcc3e9708dbdc8e


(Régis Hanol) #4

This topic was automatically closed after 12 hours. New replies are no longer allowed.