|
|
@@ -1,58 +1,79 @@
|
|
|
<style>
|
|
|
- .fancyEditorWrapper figure {
|
|
|
+ .fancy-editor-wrapper figure {
|
|
|
padding: 20px;
|
|
|
}
|
|
|
-
|
|
|
</style>
|
|
|
|
|
|
<div id="editor">
|
|
|
- <figure class="image image-style-side" style="width: 240px">
|
|
|
+ <h2>Image (width: 40%)</h2>
|
|
|
+
|
|
|
+ <figure class="image image-style-side" style="width: 40%">
|
|
|
<img src="sample.jpg" alt="" />
|
|
|
</figure>
|
|
|
|
|
|
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus
|
|
|
- et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis
|
|
|
- leo interdum. </p>
|
|
|
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
|
|
|
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
|
|
|
+
|
|
|
+ <h2>Image (width: not set)</h2>
|
|
|
|
|
|
<figure class="image">
|
|
|
<img src="sample.jpg" alt="" />
|
|
|
</figure>
|
|
|
|
|
|
- <p>Responisve image below:</p>
|
|
|
+ <h2>Responsive image (width style: not set, width attribute present on the image)</h2>
|
|
|
|
|
|
<figure class="image">
|
|
|
- <img src="https://33333.cdn.cke-cs.com/rc1DFuFpHqcR3Mah6y0e/images/975eb604695aced27171b01b318281ee640d5f11d8fc828b.png" srcset="https://33333.cdn.cke-cs.com/rc1DFuFpHqcR3Mah6y0e/images/975eb604695aced27171b01b318281ee640d5f11d8fc828b.png/w_110 110w, https://33333.cdn.cke-cs.com/rc1DFuFpHqcR3Mah6y0e/images/975eb604695aced27171b01b318281ee640d5f11d8fc828b.png/w_220 220w, https://33333.cdn.cke-cs.com/rc1DFuFpHqcR3Mah6y0e/images/975eb604695aced27171b01b318281ee640d5f11d8fc828b.png/w_330 330w, https://33333.cdn.cke-cs.com/rc1DFuFpHqcR3Mah6y0e/images/975eb604695aced27171b01b318281ee640d5f11d8fc828b.png/w_440 440w, https://33333.cdn.cke-cs.com/rc1DFuFpHqcR3Mah6y0e/images/975eb604695aced27171b01b318281ee640d5f11d8fc828b.png/w_550 550w, https://33333.cdn.cke-cs.com/rc1DFuFpHqcR3Mah6y0e/images/975eb604695aced27171b01b318281ee640d5f11d8fc828b.png/w_660 660w, https://33333.cdn.cke-cs.com/rc1DFuFpHqcR3Mah6y0e/images/975eb604695aced27171b01b318281ee640d5f11d8fc828b.png/w_770 770w, https://33333.cdn.cke-cs.com/rc1DFuFpHqcR3Mah6y0e/images/975eb604695aced27171b01b318281ee640d5f11d8fc828b.png/w_880 880w, https://33333.cdn.cke-cs.com/rc1DFuFpHqcR3Mah6y0e/images/975eb604695aced27171b01b318281ee640d5f11d8fc828b.png/w_990 990w, https://33333.cdn.cke-cs.com/rc1DFuFpHqcR3Mah6y0e/images/975eb604695aced27171b01b318281ee640d5f11d8fc828b.png/w_1025 1025w"
|
|
|
- sizes="100vw" width="1024">
|
|
|
+ <img alt="Picture of the Warsaw Old Town." width="4288" srcset="https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_430 430w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_860 860w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_1290 1290w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_1720 1720w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_2150 2150w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_2580 2580w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3010 3010w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3440 3440w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3870 3870w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_4288 4288w" sizes="100vw" src="https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg">
|
|
|
</figure>
|
|
|
|
|
|
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus
|
|
|
- et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis
|
|
|
- leo interdum. </p>
|
|
|
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id telluset mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortisleo interdum. </p>
|
|
|
</div>
|
|
|
|
|
|
-<div class="fancyEditorWrapper">
|
|
|
- <h2>Fancy editor</h2>
|
|
|
+<h1>Fancy editor (padding inside figure)</h1>
|
|
|
|
|
|
- <p>This is editor with fancier image styling. Images have some internal padding.</p>
|
|
|
+<div class="fancy-editor-wrapper">
|
|
|
+ <div id="fancy-editor">
|
|
|
+ <h2>Image (width: 40%)</h2>
|
|
|
|
|
|
- <div id="fancyEditor">
|
|
|
- <figure class="image image-style-side" style="width: 240px">
|
|
|
+ <figure class="image image-style-side" style="width: 40%">
|
|
|
<img src="sample.jpg" alt="" />
|
|
|
</figure>
|
|
|
|
|
|
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id
|
|
|
- tellus
|
|
|
- et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non
|
|
|
- lobortis
|
|
|
- leo interdum. </p>
|
|
|
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
|
|
|
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
|
|
|
+
|
|
|
+ <h2>Image (width: not set)</h2>
|
|
|
+
|
|
|
<figure class="image">
|
|
|
<img src="sample.jpg" alt="" />
|
|
|
</figure>
|
|
|
|
|
|
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id
|
|
|
- tellus
|
|
|
- et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non
|
|
|
- lobortis
|
|
|
- leo interdum. </p>
|
|
|
+ <h2>Responsive image (width style: not set, width attribute present on the image)</h2>
|
|
|
+
|
|
|
+ <figure class="image">
|
|
|
+ <img alt="Picture of the Warsaw Old Town." width="4288" srcset="https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_430 430w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_860 860w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_1290 1290w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_1720 1720w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_2150 2150w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_2580 2580w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3010 3010w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3440 3440w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3870 3870w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_4288 4288w" sizes="100vw" src="https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg">
|
|
|
+ </figure>
|
|
|
+
|
|
|
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id telluset mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortisleo interdum. </p>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+<h1>Images with widths defined with other units</h1>
|
|
|
+
|
|
|
+<div id="editor-other-units">
|
|
|
+ <h2>Image (width: 200px)</h2>
|
|
|
+
|
|
|
+ <figure class="image" style="width: 200px">
|
|
|
+ <img src="sample.jpg" alt="" />
|
|
|
+ </figure>
|
|
|
+
|
|
|
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
|
|
|
+
|
|
|
+ <h2>Image (width: 10em)</h2>
|
|
|
+
|
|
|
+ <figure class="image" style="width: 10em">
|
|
|
+ <img src="sample.jpg" alt="" />
|
|
|
+ </figure>
|
|
|
+
|
|
|
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
|
|
|
+</div>
|