Toggle: retrieve image path from database dynamically - php

Question

I have a toggle button next to each recipes on my website.
I have images in my database that I'd like to display. Each toggle button would display a different image.
How can i retrieve the image path dynamically ?
Should I had some php to my CSS or should I add something else to the Jquery code?
<div class="toggle" id="image<?php echo $recipe_id ?>"></div>
jQuery:
<script>
$(document).ready(function(){
var $content = $(".content").hide();
$(".toggle").on("click", function(e){
$(this).toggleClass("expanded");
$(this).siblings('.content').toggle();
});
});
</script>
CSS:
.toggle {
background:url(/images/muffin.png) }
Right now, all the toggle buttons display the same dummy image (muffin.png).

Answer 1

Well there are a few ways to do this. You could echo out the path to the image while the page is being parsed in PHP, or you could use Ajax to connect to PHP, figure and the path and spit it back o JavaScript, where you could append the image tag to the DOM.
I would recommend using the later method, as it is more correct in my opinion. I see you are echoing $image_id. Try to do
<img href="<?php echo $image_path; ?>">
and let me know if that works. If not, can you specify the table name and column name where the image path is stored? Also are you using any PHP frameworks?

Answer 2

To list the recipes from your database you probably have a query like this somewhere:
SELECT * FROM recipes
And after that your PHP script probably loops through the results of this query.
If this is the case, just make sure the query selects the path to the image, then do something like this:
<div class="toggle" id="image<?php echo $recipe_id ?>" style="background:url(<?php echo $query_result["image_path"] ?>)"></div>
If this is not the case, you can execute a query to get the image paths for each recipe individually:
SELECT image_path FROM recipes WHERE recipe_id=$recipe_id
Then use the result from this query.