Slike float left- right

Orodje za slike v CKEditor-ju zapiše v source element <img>. Ko spreminjamo nastavitve na sliki - postavitev (break text/align left and wrap text/center and break text/align right and wrap text ...) program nastavitve zapiše v dataset atribute na elementu, nastavitve velikosti slike pa se zapišejo v atributa height in width. 

Takole je videti koda slike, ki je poravnana ob desni rob, velikosti 25% razpoložljivega prostora, če v CKEditorju preklopimo v način izvorne kode:

<img src="/sites/default/files/inline-images/IMG_2507.jpg" data-align="right" 
  data-entity-uuid="4c7d17ac-1a1f-431c-a812-100b92795c2a" data-entity-type="file" 
  alt="dubrovnik" width="25%" height="25%">

Takšna je koda v dev-tools brskalnika, če je CKEditor v wysiwyg načinu. <img> element je obdan s <figure> elementom, na <img> elementu atributa height in width vsebujeta vrednosti fizičnih dimenzij slike, v orodju nastavljeni vrednosti 25% pa sta bili premeščeni v style atribut na elementu <figure>.

<figure class="image ck-widget image-style-align-right image_resized 
  ck-widget_with-resizer" style="height:25%;width:25%;" contenteditable="false">
  <img src="/sites/default/files/inline-images/IMG_2507.jpg" 
  data-entity-uuid="4c7d17ac-1a1f-431c-a812-100b92795c2a" data-entity-type="file" alt="dubrovnik" 
  style="aspect-ratio:2592/3888;" width="2592" height="3888">
  
  <!-- Tukaj sta izpuščena še dva <div> elementa, ki vsebujeta gumbe orodij za slike 
    CKEditorja in nista relevantna za obravnavano težavo. 
  -->
  </figure>

Takole pa je videti izvorna koda istega elementa, ko je objavljena:

<img src="/sites/default/files/inline-images/IMG_2507.jpg" 
  data-entity-uuid="4c7d17ac-1a1f-431c-a812-100b92795c2a" 
  data-entity-type="file" alt="dubrovnik" width="25%" height="25%" 
  class="align-right">

Med postopkom shranjevanja/objave je bila koda preurejena, vendar je končni rezultat na objavljeni strani takšen, kot ga želimo.

Voluptates, suscipit officia repellat minus harum, eos soluta, nisi incidunt cumque magnam autem asperiores? Inventore sequi voluptate atque maiores delectus, eaque ipsam quae est adipisci quam dolorum aliquid ab repellat officia a iure itaque. Laudantium vel, sed dolorem exercitationem, similique accusantium temporibus voluptatibus in, eveniet adipisci consequuntur quas dolore est dolor voluptate expedita iusto ut. Ipsa eius tempora, odio temporibus minima reprehenderit nulla quam non expedita maxime nemo, mollitia quidem amet totam. Similique porro perferendis quod nisi earum distinctio excepturi consequatur neque delectus debitis quisquam molestias dolores cupiditate fuga corrupti eos minima itaque non quidem eum consequuntur, ducimus error unde! Ipsam voluptatum nihil dolorum. Repellendus, ad aut eius eum perferendis quos consequatur.

Zapleti nastopijo, ko sliki dodamo napis (caption). Takšen je source v CKEditorju:

<img src="/sites/default/files/inline-images/IMG_2689.jpg" data-align="left" 
  data-entity-uuid="ae541316-d0d5-4ff5-be6e-a321fbe28ff8" data-entity-type="file" 
  alt="Kula" width="25%" height="25%" data-caption="Zidine Dubrovnika">

 Ko zapis enkrat objavimo, so modifikacije objavljene kode naslednje: 

<figure role="group" class="caption caption-img align-left">
  <img alt="Kula" data-entity-type="file" data-entity-uuid="ae541316-d0d5-4ff5-be6e-a321fbe28ff8" 
    height="25%" src="/sites/default/files/inline-images/IMG_2689.jpg" width="25%">
  <figcaption>Zidine Dubrovnika</figcaption>
</figure>

<img> element je obdan z elementom <figure> tudi na objavljeni strani. Pod <img> pravilno sledi še <figcaption>. Problematično pa je, kako so se umestili atributi, ki določajo velikost <figure> in <img> elementov. Širina in višina sta nastavljena na 25% na <img> elementu, "floatan" pa je element <figure>. 

Posledično imamo <figure> element, ki zavzame vso razpoložljivo širino nadrejenega <div> vsebnika, znotraj <figure> pa je slika, ki je velika 25% širine starševskega elementa <figure>. Odstavek, ki bi moral oblivati sliko, je namesto tega potisnjen pod le-to. 

Rem minus a dolor nulla quisquam maxime impedit atque neque, nihil illum laboriosam, dolores voluptates, amet quam vitae maiores est! Numquam, accusamus voluptate porro nam expedita cupiditate molestiae minima dolorem voluptates hic. Cupiditate iusto ducimus earum explicabo inventore sint debitis aspernatur temporibus nisi voluptates cumque, accusantium nesciunt deserunt dignissimos illum illo doloremque animi quidem perferendis voluptatibus aliquam id. Totam minima cumque repudiandae deleniti fugit consequuntur perferendis autem accusamus alias molestias consectetur quisquam amet dignissimos explicabo harum perspiciatis a exercitationem, adipisci repellendus officiis aspernatur voluptates hic maiores ad. Eum ullam molestiae, cupiditate repudiandae impedit necessitatibus fugiat enim sequi numquam perferendis maiores nobis, obcaecati recusandae ad totam similique aliquam ipsa minima qui harum quae!

Zaradi omenjenih dejavnikov zato razvrščanje slik levo in desno (float) v CKEditorju pravilno deluje, na objavljenih straneh pa je porušeno, če ima slika dodan opis (caption).