use html for image

_projects/study_3_treeBiomass-from-allometry.md

@@ -9,12 +9,14 @@ related_publications: False
 redirect:
 ---
 
-![](/assets/img/proj_treeBiomassFromAllometry/proj_overivew.png)
+<div class="row">
+    <div class="col-sm mt-3 mt-md-0">
+        {% include figure.liquid loading="eager" path="assets/img/proj_treeBiomassFromAllometry/proj_overivew.png" title="example image" class="img-fluid rounded z-depth-1" %}
+    </div>
+</div>
 
 <br/>
 
-# Python programm: estimating tree biomass using allometry
-
 A python program was developed, which integrated a comprehensive set of allometric equations for above-ground biomass calculating at a single tree level. 
 
 The empirical allometric equations using DBH and H as predictors. There are totally 10 equations were integrated into the program, these are most frequently used equations in previous studies. 
@@ -38,7 +40,14 @@ The equations were compiled from previous studies which research empirical equat
 # Method
 The main idea of the program is to use provided information of tree diameter (DBH), tree height (H), and tree biomass (AGB) apply into predefined equations to generate a set of equation parameters that best fit the data. From determined parameters, the biomass value will be predicted. The predicted biomass and the actual biomass then will be compared by visualization and accuracy assessment.
 
-![](/assets/img/proj_treeBiomassFromAllometry/prog3_biomassProgram.png)
+<div class="row">
+    <div class="col-sm mt-3 mt-md-0">
+        {% include figure.liquid loading="eager" path="assets/img/proj_treeBiomassFromAllometry/prog3_biomassProgram.png" title="example image" class="img-fluid rounded z-depth-1" %}
+    </div>
+</div>
+<div class="caption">
+    Program algorithm as a flowchart
+</div>
 
 The main program is under a *while* loop which only will be executed in case the user input is **1** or **2**. The two options of input according to two options the program offers the users, which are processing the user’s data file or built-in data file, respectively. 
 
@@ -60,9 +69,19 @@ There are some requirements that data from users have to be fulfilled:
 ## Descriptive statistic
 After defining data will be used, the next process so-called “descriptive statistic”. The section implemented various processes including data preparation, displaying overview statistics of the data and visualizing data relationships.
 
-Correlation                |  Relationship
-:-------------------------:|:-------------------------:
-![](/assets/img/proj_treeBiomassFromAllometry/data_correlation.png)  |  ![](/assets/img/proj_treeBiomassFromAllometry/data_relationship.png)
+<div class="row justify-content-sm-center">
+  <div class="col-sm mt-3 mt-md-0">
+    {% include figure.liquid path="assets/img/proj_treeBiomassFromAllometry/data_correlation.png" title="data correlation" class="img-fluid rounded z-depth-1" %}
+  </div>
+  <div class="col-sm mt-3 mt-md-0">
+    {% include figure.liquid path="assets/img/proj_treeBiomassFromAllometry/data_relationship.png" title="data relationship" class="img-fluid rounded z-depth-1" %}
+  </div>
+</div>
+<div class="caption">
+    Example of data correlation and relationship visualization
+</div>
+
+
 
 ## Allometric equation
 Tree biomass will be estimated based on equations in previous studies, some of which consider exclusively diameter at breast height or tree height while others based on both parameters.
@@ -80,10 +99,17 @@ Tree biomass will be estimated based on equations in previous studies, some of w
 
 Where: W- dry biomass, DBH - diameter at breast height, H - height, and a, b, c - model parameters.
 
-equation 3                |  equation 10
-:-------------------------:|:-------------------------:
-![](/assets/img/proj_treeBiomassFromAllometry/equation_3.png)  |  ![](/assets/img/proj_treeBiomassFromAllometry/equation_10.png)
-
+<div class="row justify-content-sm-center">
+  <div class="col-sm-8 mt-3 mt-md-0">
+    {% include figure.liquid path="assets/img/proj_treeBiomassFromAllometry/equation_3.png" title="equation 3" class="img-fluid rounded z-depth-1" %}
+  </div>
+  <div class="col-sm-4 mt-3 mt-md-0">
+    {% include figure.liquid path="assets/img/proj_treeBiomassFromAllometry/equation_10.png" title="equation 10" class="img-fluid rounded z-depth-1" %}
+  </div>
+</div>
+<div class="caption">
+    Example from equation 3 and 10
+</div>
 
 ## Accuracy 
 All models will be fit to data and the following goodness-of-fit measures will be provided for user’s assessment: coefficient of determination (R2), Mean Absolute Error (MAE), Mean Squared Error (MSE), and Root mean squared error (RMSE).