Tidy up if and elseif statement

Question

I've hacked together this code with various if and elseif statement's and just wondering if it could be tidied up (my syntax knowledge is rubbish!):

Rather than show ALL the html code again (because it's the same) is there a way I can combine all the elseif and if's into one?

if(in_array("Branding", get_field('categories')) && $grid_title == "Branding"){
     echo "
        <div class=\"grid-box\" onclick=\"location.href='" . get_page_link($post->ID) ."';\" style=\"cursor: pointer;\">
        <div class=\"phase-1\">
           <img class=\"grid-image\" src=\"" . $fields->thumb_image . "\" alt=\"" . $fields->company_name ."\" height=\"152\" width=\"210\" />
           <div class=\"grid-heading\">
                <h2>". $fields->company_name ."</h2>
                <h3>" . implode(', ',get_field('categories')) ."</h3>
            </div> 
        </div>
        <div class=\"phase-2\">
            <div class=\"grid-info\">
                <h4>". $fields->project_name ."</h4>
                <p>". $fields->description ."</p>
            </div>
            <div class=\"grid-heading-hover\">
                <h2>". $fields->company_name ."</h2>
                <h3>". implode(', ',get_field('categories')) ."</h3>
            </div> 
        </div>
    </div>
     ";
}
elseif(in_array("Web", get_field('categories')) && $grid_title == "Web"){
     echo "
        <div class=\"grid-box\" onclick=\"location.href='" . get_page_link($post->ID) ."';\" style=\"cursor: pointer;\">
        <div class=\"phase-1\">
           <img class=\"grid-image\" src=\"" . $fields->thumb_image . "\" alt=\"" . $fields->company_name ."\" height=\"152\" width=\"210\" />
           <div class=\"grid-heading\">
                <h2>". $fields->company_name ."</h2>
                <h3>" . implode(', ',get_field('categories')) ."</h3>
            </div> 
        </div>
        <div class=\"phase-2\">
            <div class=\"grid-info\">
                <h4>". $fields->project_name ."</h4>
                <p>". $fields->description ."</p>
            </div>
            <div class=\"grid-heading-hover\">
                <h2>". $fields->company_name ."</h2>
                <h3>". implode(', ',get_field('categories')) ."</h3>
            </div> 
        </div>
    </div>
     ";

}
else {
    echo "hello";
}

Answer 1

You should consider using PHP's Heredoc to delimit strings. That would help get rid of the echo and all the escape `\\' characters.

Use PHP's if/else/elseif/endif short-hand syntax. It makes it read easier:

if(condition) :
  //statments
elseif(condition) :
  //statments   
endif;

Answer 2

The elseif does the same as the first if. So move the condition to the first one with OR and remove elseif:

if((in_array("Branding", get_field('categories')) && $grid_title == "Branding") || (in_array("Web", get_field('categories')) && $grid_title == "Web")){
     echo "
        <div class=\"grid-box\" onclick=\"location.href='" . get_page_link($post->ID) ."';\" style=\"cursor: pointer;\">
        <div class=\"phase-1\">
           <img class=\"grid-image\" src=\"" . $fields->thumb_image . "\" alt=\"" . $fields->company_name ."\" height=\"152\" width=\"210\" />
           <div class=\"grid-heading\">
                <h2>". $fields->company_name ."</h2>
                <h3>" . implode(', ',get_field('categories')) ."</h3>
            </div> 
        </div>
        <div class=\"phase-2\">
            <div class=\"grid-info\">
                <h4>". $fields->project_name ."</h4>
                <p>". $fields->description ."</p>
            </div>
            <div class=\"grid-heading-hover\">
                <h2>". $fields->company_name ."</h2>
                <h3>". implode(', ',get_field('categories')) ."</h3>
            </div> 
        </div>
    </div>
     ";
}
else {
    echo "hello";
}

Answer 3

If I was you, I'd keep the HTML as plain text, not a PHP string :

<?php if(condition) : ?>
  // html
<?php elseif(condition) : ?>
  // html
<?php endif; ?>

It makes it way easier to read IMO.