尝试将fancybox中的数据标题设置为动态，但带有转义撇号的变量不会输出正确的标题格式

Question

I am attempting to display my image's information dynamically within the data-caption attribute for fancybox3. It is quite long and I am unsure how change it so its not hideous. The specific problem is that when it grabs the information from the mysql database that may contain special characters, like ' or " the data-caption thinks it is being closed off when that is not what I would like.

I have tried separating the very long echo statement into multiple ones but that did not change anything. I tried to append strings for data-caption as such, " .$var ." and that has not worked. I have tried using mysqli_real_escape() during variable declarations and it does not change the functionality when trying to output the database information.

<table style="margin:1em auto;">
        <?php
        //  require_once('DB_connection.php');

        $j = 0;

        while ($fetch_all_posts =  mysqli_fetch_assoc($all_posts)) {


            if ($j % 3 == 0) {
                echo "<tr>";
            }
            $getUser = $fetch_all_posts['userName'];
            $getPostID = $fetch_all_posts['postID'];
            $getDateUploaded = $fetch_all_posts['dateUploaded'];
            $getImg = $fetch_all_posts['img']; //dont really need
            $getLocation = mysqli_real_escape_string($connection,$fetch_all_posts['location']);
            $getCaption = mysqli_real_escape_string($connection,$fetch_all_posts['caption']);
            $getImageMetadata = mysqli_real_escape_string($connection,$fetch_all_posts['imageMetadata']);
            $getCameraGearPost = mysqli_real_escape_string($connection,$fetch_all_posts['cameraGearPost']);
            $getPhotoEdit = mysqli_real_escape_string($connection,$fetch_all_posts['photoEdit']);
            $getCopyright = mysqli_real_escape_string($connection,$fetch_all_posts['copyright']);


            //grab user profile pic from user table
            $sql_profilePic = "SELECT * FROM $dbtableUser WHERE userName = '$getUser' ";
            $all_users = mysqli_query($connection, $sql_profilePic);
            $fetch_all_users = mysqli_fetch_assoc($all_users);

            //change data caption's userName link   also incorrectly interprets '  " for datacaption
            echo "<td><br/><br/><br/><br/><a data-fancybox='images' data-caption= '<h1><a href=Profile.php><img id=profpic src=$fetch_all_users[profilePic] height=auto width=100px>   $getUser</a></h1> <br/> <h5>@$getLocation</h5>  <hr/> <br/> <h5>$getCaption</h5>   <br/> <h5>$getImageMetadata</h5> <br/> <h5>$getCameraGearPost</h5> <br/><h5>$getPhotoEdit<h5> <br/><br/><br/> <h6>PostID: $getPostID </h6> <br/>Copyrighted: $getCopyright <br/> $getDateUploaded <br/>'  href ='$getImg'>   <img id=postPics src='$getImg' alt='$getCaption'</a>  </td>";


            if ($j % 3 == 2) {
                echo "</tr>";
            }
            $j++;
        }
        ?>
    </table>

I am expecting upon click of the image that it displays the data-caption appropriately with the special characters.

this link, https://ibb.co/QK3Nkfw , shows what the page looks like currently, the first image is the problem and I want it to be like the rest. Upon image click it should show data like this: https://ibb.co/qnTJYf3

Answer 1

htmlspecialchars() is the answer https://www.php.net/manual/en/function.htmlspecialchars.php

Also, learn to debug your code - if you would have used developer tools to check generated html code, I can guarantee that you would have seen that your html is broken (due to unescaped characters)