Image in new markdown component

Elements
1

Hello,

Is it possible to float an image left/right in the new markdown component? I tried suggestions from the elements bot, but this resulted a break in the typography.

Cheers Jos

3

I will probably not use the markdown component not interested

try this not sure it will work you will have to set the image

<article class="flow-root mb-6">
  <img src="/resources/aqua.jpg" class="float-left mr-4 mb-2 w-36 h-auto">
  
  <p class="text-justify ">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</article>


 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
1 Like
4

Hello Steve,

Thank you for your help. I tried code and it worked.

I am converting a family website with a lot of text (biographies etc) from RW Classic to Elements and the markdown component with typography will save a lot of time by converting individual markdown components to globals eg md-picture-left, md-picture-right etc.

I have never used …. before, so another study object.

Cheers Jos

5

dont think this will work in a global markdown component, might be wrong

slight tweak to code, whether you use ml or pl or mb or pb

check this out

https://tailwindcss.com/docs/float

right

<article class="flow-root mb-6">
 <img class="float-right pl-6  w-48 aspect-[16/9] pb-2" src="/resources/aqua.jpg">

  <p class="text-justify ">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</article>

left

<article class="flow-root mb-6">
 <img class="float-left pr-6  w-48 aspect-[16/9] pb-2" src="/resources/aqua.jpg">

  <p class="text-justify ">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</article>