added image scaling script, updated static/img directory using scaling script, fixed 'About me' page responsive issue

all_paw_care/templates/pages/index.html

@@ -11,13 +11,13 @@
 
     {%  for row in page.get_content() %}
         <div class="row pb-3">
-            <div class="col-8 text-center {{ loop.cycle('order-first','order-last') }}">
+            <div class="col-sm-8 text-center {{ loop.cycle('order-first','order-last') }}">
                 <p class="text-secondary lead">
                     {{ page.get_content()[row]['content'] }}
                 </p>
             </div>
             
-            <div class="col-4 {{ loop.cycle('order-last','order-first') }}"> 
+            <div class="col-sm-4 {{ loop.cycle('order-last','order-first') }}"> 
                 <picture>
                     {% for img in page.get_content()[row]['images'] %}
                         {% if not loop.last %}

process_images.sh

@@ -0,0 +1,17 @@
+#!/usr/bin/env bash
+
+IMG_ORIGINALS="img_original"
+IMG_PUBLIC="all_paw_care/static/img"
+IMG_SIZES_NAME=("sm" "md" "lg" "xl" "xxl")
+IMG_SIZES=("576" "768" "992" "1200" "1400")
+
+for img in $(find $IMG_ORIGINALS -type f)
+do
+    for ((i=0;i<${#IMG_SIZES_NAME[@]};i++))
+    do
+        new_img_path=$(echo "$img" | sed -e "s,img_original\(.*\),$IMG_PUBLIC\1,g" \
+            -e "s,\.,_${IMG_SIZES_NAME[i]}\.,g")
+        magick "$img" -filter spline -resize ${IMG_SIZES[i]} "$new_img_path"
+    done
+done
+