CSS Background image with PHP

Hi Anton,

You're on the right track building the array and then outputting the data with a concatenated string. To output all the different background images, you'll need to write a loop that goes through each element in the array.

I used to do this using the array_walk() function a few years ago, but I'm not sure if that's still standard practice. Randy Hoyt should be able to tell you what's up. :) He's our PHP teacher.

Nick Pettit Yeah, I used a foreach loop before, but it printed out several lines of "background-image" in the CSS, so they were all overridden by the last one and therefore only showing my last array's logo.

Hopefully Randy Hoyt can help me.

Thanks Nick!

Hi Anton Moritz,

I should have added, Randy Hoyt is out of the office until Monday, so it might be a little while until he can get to this post. I think Andrew Chalkley and Jim Hoskins have some PHP experience, so they might be able to help out in the meantime.

Instead of for each try just a for:

for ($i = 0; $i < count($projects); $i++) { 
    #Use $i as your index and place your code in here.
}

You have to think about what you want the final CSS to be and then work backwards to figure out what PHP you want to generate that. (I think by trying to think about the CSS and the PHP at the same time, you've actually gotten confused about the CSS, not the PHP!) You have some CSS that you want to apply to all the project links, and you have other CSS that you want to apply only to links with a specific ID. I think this is what you are trying to generate:

<style>
.projects a {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;   
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
.projects a#troy {
    background-image: url('http://antonmoritz.com/img/projects/logo-troy.png');
}
.projects a#venn {
    background-image: url('http://antonmoritz.com/img/projects/logo-venn.png');
}
...
etc.
</style>

Does that look right? I think you might be able to figure it out from there, but I'll carry on just in case.

How many times do you need the first .projects a rule? Only once. Even if you add 100 more projects, you only need that rule one time.

How many times do you need a rule like .projects a#ID? You need one of those for each project. If you add a new project to the array, you want to generate one more rule like that, so that rule can go in a foreach loop.

<style>
.projects a {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;   
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
<?php foreach ($projects as $project) { ?>
.projects a#<?php echo $project["id"]; ?> {
    background-image: url('http://antonmoritz.com/img/projects/logo-<?php echo $project["id"]; ?>');
<?php } ?>
</style>

Does that help?

Andrew Chalkley ,

Thank you so much for your help. I almost got it to work with a for loop, but didn't completely.

Randy Hoyt ,

This is why you are the PHP boss! Thank you, thank you, thank you!!!!

I've been struggling with this problem for so long. I can't thank you enough.

You are right, I forgot about how to make the proper CSS for this to work. I focused on the PHP.

Thanks again.

Best regards, Anton Moritz