I'm writing a filterable page to view pictures of my creations using HTML and PHP. I can't get the pictures to display initially

I have a couple Select forms that populate variables that then are used in a mysqli select statement. The default selection "Select" is set to "%" so it will return all rows if a variable isn't selected. On initial loading of the page, there are no pictures displayed. If you hit "submit" the variables are all set to "%" and all of the pictures are displayed. If I define the variables between the POST declarations and the query, the pictures will display initially, but then the variables are hard coded and user selections are ignored.

    <form action="/" method="post">

            Filter by Weave:
            <select name="weave">
              <option value="%">Select...</option>
              <option value="Byzantine">Byzantine</option>
              <option value="Box">Box</option>
            </select>

  Filter by Pattern: Select... 1 Cap 2 Cap Split Alt Alt Spiral
Filter by color: Select... Silver Black Black Ice Frosted Gold Champagne Bronze Pink Dark Rose Red Orange Yellow Lime Green Dark Teal Turquoise Seafoam Sky Blue Medium Blue Royal Blue Iris Purple Poison Electric Violet Midnight   Filter by Type: Select... Bracelet Necklace

    <?php
            include '/chain.holding/chain.conn.php';

            $weave = $_POST["weave"];
            $pattern = $_POST["pattern"];
            $color1 =  $_POST["color1"];
            $type = $_POST["type"];

            $query = mysqli_query($conn,"SELECT * FROM Chain.1614 Where weave LIKE '$weave' AND pattern LIKE '$pattern' AND (color1 LIKE '$color1' or color2 LIKE '$color1' OR color3 LIKE '$color1' OR color4 LIKE '$color1') AND type LIKE '$type'");

            $i=0;
            while($row = $query->fetch_assoc())
            {
                    echo "<figure class='item'>";
                        echo "<figcaption class='caption'><H1>$row[name]</H1></figcaption>";
                        echo "<a href='$row[image]'><img src='$row[image]'/><a>";
                        echo "<figcaption class='caption'>Weave: $row[weave] &emsp; Pattern: $row[pattern]</figcaption>";
                        echo "<figcaption class='caption'>Colors: $row[color1], $row[color2], $row[color3], $row[color4]</figcaption>";
                        echo "<figcaption class='caption'><br></figcaption>";
                        echo "<figcaption class='caption'>$row[description]</figcaption>";
                    echo "</figure>";



            }

            mysqli_close($con);

            unset($result);

    ?>

I've tried defining the variables in different parts of the page to get the pictures to display on initial loading, but they are either ignored or cause the variables to be hard coded.

You could define default values for your variables using the NULL coalesce operator, like this:

    $weave = $_POST["weave"] ?? '%';
    $pattern = $_POST["pattern"] ?? '%';
    $color1 =  $_POST["color1"] ?? '%';
    $type = $_POST["type"] ?? '%';