Question

echo '<td width="11%" class="imagetd">';
if (empty($arrImageFile[$key])) {
    echo '&nbsp;';
} else {
    echo '<ul class="qandaul"><li>';
    echo htmlspecialchars(is_array($arrImageFile[$key]) ? implode("\n", $arrImageFile[$key]) : $arrImageFile[$key]);
    echo '</li></ul>';
}
echo '</td>';

In code above, I have a lit of image names, now each image name is seperated by line break, but the problem I am having is that it does not display a bullet point for each image file name inserted in the line break. It is only displaying one bullet point for the first image name and that is it. In example above how do I insert a bullet point for each image name?

UPDATE

Does CSS take effect below:

ul, ul li { margin: 0; padding: 0; }
ul { margin-left: 1.3em; }

Below refers to Juan’s answer which I want to make sure is correct as it did not work:

echo '<td width="11%" class="imagetd">';
if (is_array($arrImageFile[$key]) {
    foreach($arrImageFile[$key]  as $img)  {
        if (empty($arrImageFile[$key])) {
            echo '&nbsp;';
        } else {
            echo '<ul class="qandaul"><li>';
            echo '<li>' . htmlspecialchars($img) . '</li>'
        }
    }          
    echo '</li></ul>';
}
echo '</td>';

Answer 1

You are putting all your image files inside the <li>. Create a separate <li> for each image

echo '<ul class="qandaul>';
if (empty($arrImageFile[$key])) {
    echo '<li>&nbsp;</li>';
} else {
    if (is_array($arrImageFile[$key]) {
        foreach($arrImageFile[$key] as $img)  {
            echo '<li>' . htmlspecialchars($img) . '</li>';
        }
    } else {
        echo '<li>' . htmlspecialchars($arrImageFile[$key]) . '</li>';
    }
}
echo '</ul>';

or you can use the array implode trick others have suggested. I tend to think that is less readable.

echo implode("</li>\n<li>", array_map(function($item){
    return htmlspecialchars($item);
},  $arrImageFile[$key]));