Drupal 7: Hard coding layout in Views - drupal

Question

In one of my D7 project, I used several tpl files for view templating. Please see below some of the tpl file codes. However, my client has been reviewed the codes and commented:
Hard coding layout in Views. Instead of creating blocks with different display layouts (same display layouts are the same in other places), there is a code with the layout on the Views result that it depends on the key of the result.
I cannot understand the points he saying. If you wish, I can share some additional coding / admin panel screen shots
Here are some tpl files:
1.
<div id="programmes" class="page-section">
<div class="container">
<h1 class="section-heading"><?php echo t('OUR');?> <?php echo count($rows); ?> <?php echo t('key Programmes');?></h1>
<h3><?php echo t('The XXX operate');?> <?php echo count($rows); ?> <?php echo t('key programmes to ensure the greatest global impact:');?></h3>
<div class="programblock" >
<?php
if($rows) {
$count = 1;
foreach($rows as $id => $row)
{
$title = $view->render_field('title', $id);
$description = $view->render_field('field_programme_description', $id);
$image = $view->render_field('field_programme_image', $id);
$icon = $view->render_field('field_programme_icon', $id);
$color = $view->render_field('field_programme_background_color', $id);
?>
<a href="#" class="programcard w-inline-block" style="background-color:<?php echo !empty($color) ? $color : '#FFFFFF' ?>"><img src="<?php echo $image; ?>" class="progimage">
<div class="programtext">
<div class="w-clearfix">
<div class="progtabicon smallpti"><?php echo $icon; ?><br></div>
</div>
<div>
<h2 class="progtitle"><?php echo $title; ?></h2>
<div><?php echo $description; ?></div>
<div class="readmorecard"><?php echo t('Read More...'); ?></div>
</div>
</div>
</a>
<?php
$count++;
}
}
?>
</div>
</div>
</div>
2.
<div id="s5" class="relevant-news">
<div class="container w-clearfix">
<h3 class="section-heading"><?php echo t('Related content'); ?></h3>
<?php
if ($rows) {
foreach ($rows as $id => $row) {
$image = $view->render_field('field_image', $id);
$body = $view->render_field('body', $id);
$title = $view->render_field('title', $id);
$date = $view->render_field('field_news_publist_date', $id);
$formatted_date = date('d F Y', strtotime($date));
$programme = $view->render_field('field_news_programme', $id);
$type = $view->render_field('field_tags', $id);
?>
<div class="_4-block nomar4">
<a href="#" class="nl2 w-inline-block">
<div class="tag" data-ix="tagtext"><span class="cblu"></span><span class="uhcgreen"> </span><span class="jyel"></span><br></div><img src="<?php echo $image; ?>" alt="image" class="cardimage">
<div class="card-text">
<div class="cardtitle"><?php echo $title; ?></div>
<div class="tagtext alt"><?php echo $formatted_date; ?></div>
<div><?php echo $body; ?></div>
<div class="tagtext alt"><?php echo $programme; ?></div>
</div>
<div class="pagetype news">
<div><span class="fa"></span> <?php echo $type; ?></div>
</div>
</a>
</div>
<?php
}
}
?>
</div>
<div class="container"><span class="fa"></span> <?php echo t('View all News & Media'); ?></div>
</div>
3.
<?php global $base_url;?>
<?php
if(!empty($rows)){
$articles = array();
$video = array();
$gallery = array();
$carousel = array();
foreach($rows as $article){
$nid = $article['nid'];
$node = node_load(trim($nid));
if($node->type == 'article'){
$articles[] = $nid;
}elseif($node->type == 'news_video'){
$video[] = $nid;
}elseif($node->type == 'news_gallery'){
$gallery[] = $nid;
}
$slider = 0;
if($node->type != 'article'){
$carousel[] = $nid;
}
}
$items = array();
$count = 0;
if(!empty($carousel)){
$slider = 0;
foreach($carousel as $nid){
$items[$slider][] = $nid;
$count++;
if(($count % 5) == 0) {
$slider++;
}
}
}
?>
<!--Show stiky images-->
<div class="container w-clearfix">
<?php
$i = 0;
for($i = 0; $i < count($articles); $i++){
$nid = (int) $articles[$i];
$node = node_load(trim($nid));
$title = $node->title;
$image = file_create_url($node->field_image[LANGUAGE_NONE][0]['uri']);
$news_type_id = $node->field_tags[LANGUAGE_NONE][0]['tid'];
$news_type = taxonomy_term_load($news_type_id);
$programmes = $node->field_news_programme[LANGUAGE_NONE];
$type_name = $news_type->name;
$type_icon = path_icon($news_type->field_news_icon[LANGUAGE_NONE][0]['icon']);
$description = !empty($node->field_short_description[LANGUAGE_NONE]) ? $node->field_short_description[LANGUAGE_NONE][0]['value'] : "";
$date = $node->field_news_publist_date[LANGUAGE_NONE][0]['value'];
$program_name = array();
$program_short_name = array();
$node_url = drupal_get_path_alias('node/' . $nid);
?>
<div class="_2block nomar special">
<a href="<?php print $node_url;?>" class="nl2 bgimage w-inline-block" style="background-image:linear-gradient(180deg, rgba(21, 36, 49, 0), #152431), url('<?php echo $image;?>');background-repeat:no-repeat;background-size:cover;">
<div class="pagetype">
<div><span class="fa fa-<?php print $type_icon;?>"></span> <?php echo $type_name;?></div>
</div>
<div class="card-text"></div>
<?php if(!empty($programmes)){ ?>
<div class="tag">
<?php foreach($programmes as $key2 => $pro){
$programme = taxonomy_term_load($pro['tid']);
$bundle = $programme->field_icon_programme[LANGUAGE_NONE][0]['bundle'];
$icon = path_icon($programme->field_icon_programme[LANGUAGE_NONE][0]);
$program_name[] = $programme->name;
$program_short_name[] = $programme->field_short_name[LANGUAGE_NONE][0]['value'];
?>
<i class="<?php echo $icon;?>"></i>
<?php } ?>
<br>
</div>
<?php } ?>
<div class="card-text forcedown">
<div class="cardtitle bigct"><?php echo $title;?></div>
<div class="tagtext alt"><?php echo date("d M Y", strtotime($date));?></div>
<div><?php echo $description;?></div>
<?php if(!empty($program_short_name)){?>
<div class="tagtext"><?php echo implode($program_short_name, ', ');?></div>
<?php }?>
</div>
</a>
</div>
<?php
if($i == 1) {
break;
}
}
?>
</div>

Answer 1

First thing , view provide several "Display" for one view created. It let you create some various display of this view to handle and manage data/display.
- You can create a display like a "Page" so your view will have own url.
- You can create another display like a "Block" , so it provide a block you can add to region
Small tutorial for view creation
Second thing is to understand templating hook override available , so you can change html and displaying for a view:
If my view is named "test" and my display is named "block" , i can override with file
views-view--test--block.tpl.php
How theming function work
Third thing , template must not contain functions calls , it can create some performance issues and it's not a good practice. Only $variables must be echo or printed.
You can take a look into views module , under "themes" folder to understand.
Finally , if you need to modify some data before rendering you have several hooks usable into custom modules or template.php which allow you to modify it
List of hooks available
Hope it helps you :)