Specify the image location gracefully.

Author: cotes2020

_posts/2019-08-08-text-and-typography.md

@@ -8,7 +8,7 @@ math: true
 image: /assets/img/sample/devices-mockup.png
 ---
 
-This Jekyll template totally compatible with Markdown syntax. Now, let's have a look at the text and typography.
+This article is to show markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography.
 
 
 ## Titles
@@ -89,11 +89,17 @@ You can change the size of the picture:
 ![Desktop View](/assets/img/sample/mockup.png){: width="400"}
 _400px image width_
 
-In addition, you can use custom styles to change the image position (do not use caption in this case):
+In addition, you can use class `left` or `right` to specify the image position (but in this case, the image caption is prohibited), for example:
 
-![Desktop View](/assets/img/sample/mockup.png){: width="200" style="float: left; margin: .75rem 1rem 1rem 0"}
-_A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space._
+- To the left
 
+  ![Desktop View](/assets/img/sample/mockup.png){: width="240" class="left"}
+  "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
+
+- To the right
+
+  ![Desktop View](/assets/img/sample/mockup.png){: width="240" class="right"}
+  "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
 
 ## Inline code
 

assets/css/_addon/main.scss

@@ -817,12 +817,24 @@ div.post-content .table-wrapper {
   overflow-wrap: break-word;
   word-wrap: break-word;
 
-  @mixin img {
+  @mixin img($caption: false) {
     > img {
       &:not([style]) {
-        margin: .5rem 0;
-        @include align-center;
-        @include img-caption;
+        &:not(.left):not(.right) {
+          margin: .5rem 0;
+          @include align-center;
+          @if $caption {
+            @include img-caption;
+          }
+        }
+        &.left {
+          float: left;
+          margin: .75rem 1rem 1rem 0;
+        }
+        &.right {
+          float: right;
+          margin: .75rem 0 1rem 1rem;
+        }
       }
     }
   }
@@ -854,7 +866,7 @@ div.post-content .table-wrapper {
 
   p {
     font-size: 1.08rem;
-    @include img;
+    @include img(true);
   }// p
 }