Problem with quotation marks

[TonyR]

I am having a problem with my code and would be grateful if someone could point me in the right direction. Please see my code below:

<?php
	$dbcon = mysqli_connect('localhost','user','','videos');
	
	$sql='SELECT * FROM videos';
	$result = mysqli_query($dbcon, $sql);

	$row = mysqli_fetch_array($result);
		$image = $row['image'];
		$title = $row['title'];
		$description = $row['description'];

			echo '<a href="#">
				<div class="thumb" style="background-image: url("' . $image . '");"></div>
			      </a>
					</div>
					<div class="column-content">
						<p class="column-title">Latest Video</p>
						<p class="column-heading"><a href="#">' . $title . '</a></p>
							<div class="video-description">
								<p>' . $description . '</p>'

	mysqli_close($dbcon);
?>

Now the connection to the database works, also the title and description is fine too. The problem is with the image. I cannot get it to display and I'm sure it has something to do with the quotation marks but I don't know in what order they should be.

If I just use html the code for the image would be : <div class="thumb" style="background-image: url('image.jpg');"></div> with just a single quotation around the image url.

Any help would be much appreciated.

 

Tony

[cyberRobot]

Since the value for your style attribute is enclosed with double quotes, any double quotes that are used within the attributes' value need to be escaped. For example:

echo '<a href="#">
		<div class="thumb" style="background-image: url(\"' . $image . '\");"></div>
		...

Also note that you're missing a semi-colon after your echo statement.

[ginerjm]

It appears to me that you have an extra double quote here:

("' . $image . '");"

It also appears that you are closing a non-existent div here:

 </div>
 <div class="column-content">

and that you have a hanging div open here:

  <div class="video-description">
   <p>' . $description . '</p>'
as well as a missing semi as pointed out already.

 

[requinix]

22 minutes ago, cyberRobot said:

Since the value for your style attribute is enclosed with double quotes, any double quotes that are used within the attributes' value need to be escaped. For example:

echo '<a href="#">
		<div class="thumb" style="background-image: url(\"' . $image . '\");"></div>
		...

Also note that you're missing a semi-colon after your echo statement.

I'm not sure if that will work. HTML doesn't recognize backslashes as escaping characters. It should be

'<div class="thumb" style="background-image: url(&quot;' . $image . '&quot);"></div>'

or

'<div class="thumb" style="background-image: url(\'' . $image . '\');"></div>'

However url() doesn't need to use quotation marks, so if you're confident $image doesn't have any )s then you can omit the quotes entirely.

[TonyR]

22 minutes ago, cyberRobot said:

Since the value for your style attribute is enclosed with double quotes, any double quotes that are used within the attributes' value need to be escaped. For example:

echo '<a href="#">
		<div class="thumb" style="background-image: url(\"' . $image . '\");"></div>
		...

Also note that you're missing a semi-colon after your echo statement.

Thank you cyberRobot. I did what you mentioned and the output still did not show my image. The html read: <div class="thumb" style="background-image: url(\"image.jpg\");"></div>.

I have added the missing semi colon, thank you for that.

[benanamen]

If you simply switched the double and single quotes around you wouldn't have to go through all the error prone escaping gymnastics. Open and close the echo with double quotes, then single quotes in all your elements.

[TonyR]

11 minutes ago, requinix said:

I'm not sure if that will work. HTML doesn't recognize backslashes as escaping characters. It should be

'<div class="thumb" style="background-image: url(&quot;' . $image . '&quot);"></div>'

or

'<div class="thumb" style="background-image: url(\'' . $image . '\');"></div>'

However url() doesn't need to use quotation marks, so if you're confident $image doesn't have any )s then you can omit the quotes entirely.

Thank you requinix. This post completely fixed the problem and the image now displays perfectly.