How do I insert variables within html in a php array?

Question

EDIT: I've updated this question with the working code, but I've left the content of the text alone so you can see what I was trying to do in the future and also because there were a few other things I wanted to do aside of the initial question.

I have an array that has an html list in it, the php is shuffling the list to echo a random order. Within the list items in the array, I want to include a php variable, right now this is what I have:

<?php include('includes/header_topright_content.php'); ?>
<ul data-options="animation:fade; slide_number:false; pause_on_hover:false; timer_speed:5500; navigation_arrows:false; next_on_click:true; timer:true; bullets:false;" data-orbit>

<?php
    $links = array(
        '<li data-orbit-slide="headline-1"><img /><div>'.$Slide1.'</div></li>',
        '<li data-orbit-slide="headline-2"><img /><div>'.$Slide2.'</div></li>',
        '<li data-orbit-slide="headline-3"><img /><div>'.$Slide3.'</div></li>',
    );
    shuffle($links);

    foreach ($links as $link) { echo $link; }
?>
</ul>

I could have up to 10 or even 20 of these slides. The information the variables are linking to would be from a separate .php page that I "included." The information on that page is:

<?php
$Slide1 = "<h5>Slide 1</h5><h6>This is the content for slide 1!</h6>";
$Slide2 = "<h5>Slide 2</h5><h6>This is the content for slide 2!</h6>";
$Slide3 = "<h5>Slide 3</h5><h6>This is the content for slide 3!</h6>";
?>

If I scrap the variable idea and insert the html directly into the list item it works perfectly. If I try to put the variables in there, the slide will just be blank. I'm stuck on where to go from here, I'm great with html and css, but not so good with php, so any help is appreciated! I'm also open to any formatting tips and best practices, the cleaner the better.

Thanks in advance!

MORE INFO: There's a few complications behind as to why I'm looking to do this. The orbit image slider doesn't support a random order, and I found it much easier to just use php to randomize the order of the list items. The reason I want to use variables in these list items is because I'm using a cms (CouchCMS) to make that content editable - a simple solution would be to insert editable tags around that content, but that would only make one page editable, and this content is going to be 'included' in the header of every page. So I'm trying to find a way to put those variables on a separate page (I know 'including' it doesn't do that - maybe I can link it to the page like a css or js file?) to make that editable. If anyone has any ideas for this I'm open!

Answer 1

With string concatenation, your also need to include the variables file before assigning them variables to the array. You also dont need to wrap PHP variables in quotes when echoing.

<?php include('includes/variables.php'); ?>

<ul data-options="[orbit options go here]" data-orbit>
<?php
    $links = array(
        '<li data-orbit-slide="headline-1"><img /><div>'.$Slide1.'</div></li>',
        '<li data-orbit-slide="headline-2"><img /><div>'.$Slide2.'</div></li>',
        '<li data-orbit-slide="headline-3"><img /><div>'.$Slide3.'</div></li>',
    );
    shuffle($links);

    foreach ($links as $link) { echo $link; } //<<< notice no quotes
?>
</ul>

Edit:

Can I make a suggestion to your code, by assigning to a slides array directly be it in an external file or not, you will be able to eventually dynamically or easily add new slides to the slider and not need to hard code into a second sub array before the loop. So something like. Also by changing to alternative syntax your keep a nice HTML structure.

<?php
$slide[] = "<h5>Slide 1</h5><h6>This is the content for slide 1!</h6>";
$slide[] = "<h5>Slide 2</h5><h6>This is the content for slide 2!</h6>";
$slide[] = "<h5>Slide 3</h5><h6>This is the content for slide 3!</h6>";

shuffle($slide);
?>

<ul data-options="animation:fade; slide_number:false; pause_on_hover:false; timer_speed:5500; navigation_arrows:false; next_on_click:true; timer:true; bullets:false;" data-orbit>
<?php foreach ($slide as $key=>$value):?>
    <li data-orbit-slide="headline-<?php echo $key?>"><img /><div><?php echo $value; ?></div></li>
<?php endforeach;?>
</ul>