Reading a CSV text-based database into HTML

Code Snippets
#1

Hi, newbie here,

Trying to reuse a free HTML template but I need to include a bit of source code and I have no clue how to do so. Can anyone help me?

Got an external CSV file (data.txt) as a database:
“img_01.jpg”, “Name of photo or title here”
“img_02.jpg”, “Name of photo or title here”
“img_03.jpg”, “Name of photo or title here”
etc.

and I need to create a recursive load in a HTML page repeating this piece of code as many times as rows there are in the above CSV file:

	  <div class="grid-item item animate-box" data-animate-effect="fadeIn">
	    <a href="images/img_XX.jpg" class="image-popup" title="Name of photo or title here">
				<div class="img-wrap">
					<img src="images/img_XX.jpg" alt="" class="img-responsive">
				</div>
				<div class="text-wrap">
					<div class="text-inner popup">
						<div>
							<h2>Name of photo or title here</h2>
						</div>
					</div>
				</div>
			</a>
	  </div>

I am thinking in some kind of PHP within the HTML (<?php.... ?>) that would read the length of the CSV file (number of rows) into a variable (number of iterations) and then a loop sequence (if, then, else style) copying the above HTML code so many times.

The problem is that last time I programmed was 20 years ago, and I have no clue of “modern” languages. I would think this should be a very straightforward coding that shouldn’t take anyone knowledgeable on PHP more than ten minutes, am I right? Can anyone spare those 10 minutes and help me out?

Thanks a lot.

#2

Take a look at this and see what you come up with.
https://thisinterestsme.com/reading-csv-file-with-php/

1 Like
#3

Almost (I guess)… :)… something wrong with the quotes I guess, can you spot it?

	echo '<div class="grid-item item animate-box" data-animate-effect="fadeIn">'
	echo '	<a href="single.html">'
	echo '		<div class="img-wrap">'
	echo '			<img src="images/'. $row[0] .'.jpg" alt="" class="img-responsive">'
	echo '		</div>'
	echo '		<div class="text-wrap">'
	echo '			<div class="text-inner">'
	echo '				<div>'
	echo '					<h2>' . $row[1] .'></h2>'
	echo '					<span>- -</span>'
	echo '							</div>'
	echo '						</div>'
	echo '					</div>'
	echo '				</a>'
	echo '		  </div>'
#4

Yes the quotes.

For starters, just use one echo for the block or use heredoc.

As for the quotes, use double quotes for the echo and single quotes everywhere else. There will be no need to escape the row data, just do like { $row[0] }.

#5

Thanks again. I believe I’m almost there but still I’m getting the text in $row[0] displayed, but what I need the image it represents to be displayed instead. In short, say $row[0] is image1.jpg, when executing I am seeing “image1.jpg” displayed instead of the image itself.

Any thoughts? Anything I should be aware of?

#6

Or just injecting the php as it was initially meant to do,

<?php your loop starts: ?>
<div class="grid-item item animate-box" data-animate-effect="fadeIn">
    <a href="single.html">
        <div class="img-wrap">
            <img src="images/<?php echo $row[0]; ?>.jpg" alt="" class="img-responsive">
        </div>
        <div class="text-wrap">
            <div class="text-inner">
                <div>
                    <h2><?php echo $row[1]; ?></h2>
                    <span>- -</span>
                </div>
            </div>
        </div>
    </a>
</div>
<?php your loop ends; ?>
Sponsor our Newsletter | Privacy Policy | Terms of Service