Jak wyświetlić zdjęcie i post w html ?

Cześć! Chcę wyświetlić posty i zdjęcia osób będacych moimi znajomymi. Stowrzyłem zapytanie z UNION ALL, i teraz chcę to wyświetlić w html. Problem jest taki że zdjęcia chcę ostylować inczej a posty inaczej i nie wiem jak to zrobić. Zamieszczam poniższy kod html który wyświetla zdjęcia, oraz posty, tylko przy postach wyśwetla miniaturkę zdjęcia takiego gdy się nie załaduje. Macie może pomysł jak to zrobić, bo zdjęcie musze wyswietlic używając img, a do treści posta nie mogę tego używać i tutaj lezy problem.

 public function pokaz()
    {
        $session = $_SESSION['id'];

        $query = $this->database->connect()->prepare("SELECT photo.id, photo, CONCAT(first_name,' ', last_name)
AS autor, photo.date_to_add FROM `photo` join user on photo.user_id = user.id join friend on user.id = friend.request_from_id where request_to_id = :id and status = 'znajomy'
UNION ALL
SELECT post.id, comment, CONCAT(first_name,' ', last_name) AS author, post.date_to_add 
FROM `post` join user on post.user_id = user.id join friend on user.id = friend.request_from_id where request_to_id = :id and status = 'znajomy'ORDER BY date_to_add DESC");
        $query->bindParam(':id',$session, PDO::PARAM_INT);
        $query->execute();


        if($query->rowCount())
        {
            $this->userData = [];

            while ($row = $query->fetch())
            {
                $this->userData[] = $row;
            }
        }


    }

<div class="row  d-flex justify-content-center" >
    <?php foreach ($udostepnij->userData as $user) { ?>
            <div class='col-xl-8'>
                <div class='row' id='time'>
                    <div class='btn-block d-flex justify-content-between'>
                        <div class='imie'>
                           <?php  echo $user['autor']   ?>
                            </div>
                        <div class='czas'>
                           <?php echo $user['date_to_add'] ?>
                            </div>
                        </div>
                    </div>
                <img src="<?php echo $user['photo'] ?>" style='height:300px;' style="width: 500px;">
                <?php echo $user['photo'] ?>
                <form action='' method='post'>
                    <div class='row'>
                        <div class='col-12 col-xl-12 d-flex justify-content-between' >
                            <button  name='dodaj_like'><i class='fas fa-heart'></i><input type='hidden' name='like' value="<?php echo $user['id']?>" />Cool</button>
                            <button name='dodaj_like'><i class='fas fa-heart-broken'></i><input type='hidden' name='dislike' value="<?php echo $user['id']?>"/>Awful</button>
                            <button name='dodaj_like'><i class='far fa-comment-dots'></i><input type='hidden' name='comment' value="<?php echo $user['id']?>"/>Comment</button>
                            <button name='dodaj_like'><i class='far fa-share-square'></i><input type='hidden' name='share' value="<?php echo $user['id']?>"/>Share</button>
                            </div>
                        </div>
                    </form>
                </div>
<?php } ?>

Po co masz ten union?
Zrób

// reszta kodu
if($query->rowCount())
        {
            $this->userData = [];

            while ($row = $query->fetch())
            {
                $this->userData[] = $row;
            }
        }
 var_dump($this->userData);
die();

i zobacz jakie masz klucze w tablicy i wartości.
Przykład samego zapytania z użyciem union dla różnych nazw kolumn:
https://www.w3schools.com/sql/trysql.asp?filename=trysql_select_union3

@jurek1980: Pokazuje teraz błąd Fatal error: Cannot use [] for reading in C:\xampp8.0\htdocs\project\klasy\friend_activity.php on line 36 Mam union aby połaczyć 2 zapytania, jak mam wyswietlić posty i zdjęcia nie uzywając union ?

Po kopiowaniu nie wykasowałem nawiasów kwadratowych. Wykasuj je. Poprawiłem kod.

@jurek1980: Wyświetla dane teraz podwójnie.

Co to znaczy podwójnie?
Jakie masz klucze w tablicy? Masz klucz ['photo'] ? Czy w pod tym kluczem nie masz również wartości z 'comment'?

@jurek1980: Pzykład array(5) { [0]=> array(8) { ["id"]=> string(2) "12" [0]=> string(2) "12" ["photo"]=> string(8) "zdjecie.jpg" [1]=> string(8) "zdjecie.jpg" ["autor"]=> string(10) "Anna Smith" [2]=> string(10) "Anna Smith" ["date_to_add"]=> string(10) "2021-04-24" [3]=> string(10) "2021-04-24" }

Jeśli w tym zapytaniu masz wartości w kolumnie comment to będą one wpisane do photo.
Czyli będziesz miał np.
[1]["photo"]=>"zdjecie1.jpg"
.
.
[12]["photo"] => 'ten post jest kiepski'

Popatrz na pierwszy i ostatni wiesz z otrzymanej tablicy.
Albo ja żle patrzę:) Potem jak komentarze wpakujesz w tagi <img> to się wszystko rozjedzie.

@jurek1980: Ale jak mam to wyświetlić w html , do zdjęcie muszę użyć tagu a do postu nie ?

Wygląda na to, że od momentu kiedy w zapytaniu wchodzą pod klucz ['photo]' treści komentarzy, do tagu <img> wkładasz treść komentarzy. Albo już przemęczony jestem.