generate thumbnail for every image in folder

I am trying to write a bash script that generates small thumbnail versions for every image in a folder, so I can use it for more efficient image loading in react.

The selected answer from this question I have been trying to get working; Bash script to create customized thumbnails

By using this modified code:

#!/bin/bash
THUMBS_FOLDER=./aesthetic-images/thumbnails
for file in ./aesthetic-images/*
do
  # next line checks the mime-type of the file
  IMAGE_TYPE=`file --mime-type -b "$file" | awk -F'/' '{print $1}'`
  if [ x$IMAGE_TYPE = "ximage" ]; then
      IMAGE_SIZE=`file -b $file | sed 's/ //g' | sed 's/,/ /g' | awk  '{print $2}'`
      WIDTH=`echo $IMAGE_SIZE | sed 's/x/ /g' | awk '{print $1}'`
      HEIGHT=`echo $IMAGE_SIZE | sed 's/x/ /g' | awk '{print $2}'`           
      # If the image width is greater that 200 or the height is greater that 150 a thumb is created
     if [ $WIDTH -ge  201 ] || [ $HEIGHT -ge 151 ]; then
        #This line convert the image in a 200 x 150 thumb 
        filename=$(basename "$file")
        extension="${filename##*.}"
        filename="${filename%.*}"
        convert -sample 200x150 "$file" "${THUMBS_FOLDER}/${filename}_thumb.${extension}"   
     fi
  fi     
done

While my project layout looks like so, calling the bash .sh script inside the /src/ folder:

But running the script with bash generate-thumbnails.sh leads to errors in console:

$ ./generate-thumbnails.sh
./generate-thumbnails.sh: line 12: [: JFIFstandard1.01: integer expression expected
./generate-thumbnails.sh: line 12: [: -ge: unary operator expected
./generate-thumbnails.sh: line 12: [: JFIFstandard1.01: integer expression expected
./generate-thumbnails.sh: line 12: [: -ge: unary operator expected
./generate-thumbnails.sh: line 12: [: JFIFstandard1.01: integer expression expected
./generate-thumbnails.sh: line 12: [: -ge: unary operator expected
./generate-thumbnails.sh: line 12: [: progressive: integer expression expected
./generate-thumbnails.sh: line 12: [: -ge: unary operator expected
./generate-thumbnails.sh: line 12: [: JFIFstandard1.01: integer expression expected
./generate-thumbnails.sh: line 12: [: -ge: unary operator expected
./generate-thumbnails.sh: line 12: [: JFIFstandard1.01: integer expression expected
./generate-thumbnails.sh: line 12: [: -ge: unary operator expected
./generate-thumbnails.sh: line 17: convert: command not found
./generate-thumbnails.sh: line 12: [: JFIFstandard1.01: integer expression expected
./generate-thumbnails.sh: line 12: [: -ge: unary operator expected

Is it a problem with how I configured the bash script? Or my process in calling it?

• The usage of file command to determine image size is unreliable. The output format varies depending on the image format. Instead make use of identify, a ImageMagick suite command.
• It is not recommended to use uppercases for user variables. It may conflict with system variables.

Would you please try instead:

#!/bin/bash

thumbs_folder=./aesthetic-images/thumbnails
mkdir -p "$thumbs_folder"

for file in ./aesthetic-images/*; do
    # next line checks the mime-type of the file
    image_type=$(file --mime-type -b "$file")
    if [[ $image_type = image/* ]]; then
        image_size=$(identify -format "%[fx:w]x%[fx:h]" "$file")
        IFS=x read -r width height <<< "$image_size"
        # If the image width is greater that 200 or the height is greater that 150 a thumb is created
        if (( width > 200 || height > 150 )); then
            #This line convert the image in a 200 x 150 thumb 
            filename=$(basename "$file")
            extension="${filename##*.}"
            filename="${filename%.*}"
            convert -sample 200x150 "$file" "${thumbs_folder}/${filename}_thumb.${extension}"
        fi
    fi
done