Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP

Joshua Bowden
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Joshua Bowden
Full Stack JavaScript Techdegree Graduate 29,312 Points
Posted by Joshua Bowden
.a{fill-rule:evenodd;}techdegree seal-36
Joshua Bowden
Full Stack JavaScript Techdegree Graduate 29,312 Points

I am creating a custom_template_part() I am testing my php and its not working.

I am creating a custom template part that displays projects from my json file. They only display up to 6 projects at a time. For some reason the code is not displaying the css and the links arn't working. The image is in the right file structure I think.

Any ideas?

I have three files: projects.php -- as seen below

<?php

    $str = file_get_contents('projects-inc/projects.json'); // Get the content of the JSON file 
    $json = json_decode($str, true);  //Now decode the JSON 

    include 'projects-inc/projects.css';

?>

<h2>Projects</h2>

<div class="projects">

    <ul class="wptreehouse-badges">

        <?php for( $i = 0; $i < 6; $i++ ): ?>

            <a href="<?php echo $json->{'project'}[$i]->{'image'}; ?>">                     
                <figure background-image="<?php echo $json->{'project'}[$i]->{'name'}; ?>">
                    <figcaption><?php echo $json->{'project'}[$i]->{'name'}; ?></figcaption>
                </figure>
            </a>

        <?php endfor; ?>

    </ul>

</div>

projects.json -- as seen below

{
        "project": [
            {
                "name": "Project One",
                "image": "projects-inc/images/book.jpg",
                "url": "www.joshbowdenconcepts.com"
            },
            {
                "name": "Project Two",
                "image": "image/url.com",
                "url": "project/url.com"
            },
            {
                "name": "Project Three",
                "image": "image/url.com",
                "url": "project/url.com"
            },
            {
                "name": "Project Four",
                "image": "image/url.com",
                "url": "project/url.com"
            },
            {
                "name": "Project Five",
                "image": "image/url.com",
                "url": "project/url.com"
            },
            {
                "name": "Project Six",
                "image": "image/url.com",
                "url": "project/url.com"
            },
        ]
}

And projects.css -- as seen below

@charset "utf-8";
/* CSS Document */
.projects {
    height: auto;
    padding-top: 5vh;
    padding-bottom: 5vh;
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #2A2C39;
    text-align: center;
    color: red;
}
.projects h2 {
    color: #F4F4F4;
}
figure {
    height: 350px;
    width: 350px;
    max-width: 80vw;
    max-height: 80vw;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    margin: 3vmax;
    /* opacity: 0;  Can include if you have the projects jquery included */
    transition: 0.3s ease-in-out;
    transform: translateX(-20px);
    -webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    -moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    overflow: hidden;
    border-radius: 0.5vmin;
}
figcaption {
    position: absolute;
    bottom: 0px;
    background: rgba(225,225,225,0.6);
    color: black;
    padding: 2px, 8px;
    font-size: 1.5vmax;
    margin-bottom: 2vmin;
    font-family: Arial, "sans-serif";
    font-weight: 600;
    text-transform: uppercase;
    left: -100%;
    transition: all 0.2s ease-in-out;
}
/*-------------------------
        Animation Styles
-------------------------*/
/* Only if the projects jquery is loaded
.is-showing {
    opacity: 1;
    transform: translateX(0px);
}
*/
figure:hover figcaption{
    left: 0%;
}
figure:hover {
    transform: scale(1.2);
    cursor: pointer;
}