Drupal Front Page Markup

Question

I'm trying to change the markup around articles being displayed on the front page of a drupal site so I can integrate them into a slideshow. (I can't use a slideshow module). I have a page--front.tpl.php file, but I need to add more specific markup than I can do here.

How do you go about changing the markup for just a specific area of the front page?

I believe I need to write a preprocess hook, but I'm not sure how to target just the articles node on the front page. This is the markup I would like to have generated:

<div class="slidewrap" data-autorotate="5000">
    <ul class="slidecontrols">
        <li><a href="#sliderName" class="next">Next</a></li>
        <li><a href="#sliderName" class="prev">Prev</a></li>
    </ul>
    <ul class="slider" id="sliderName">
        <li class="slide">  
            <h2 class="slidehed">First Slide</h2>
            <img src="1.jpg" />
            <p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero.</p>
        </li>
        <li class="slide">  
            <h2 class="slidehed"><a href="#">Second Slide</a></h2>
            <img src="2.jpg" />
            <p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
        </li>
        <li class="slide">  
            <h2 class="slidehed">Third Slide</h2>
            <img src="3.jpg" />
            <p>Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget.</p>
        </li>
        <li class="slide">  
            <h2 class="slidehed"><a href="#">Fourth Slide</a></h2>
            <p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio.</p>
        </li>
        <li class="slide">  
            <h2 class="slidehed">Fif' Slide</h2>
            <p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
        </li>
    </ul>
</div>

I've been trying to do this using the views module. However, when I create a new template I get this error message: Warning: Invalid argument supplied for foreach() in include() (line 12 of /d7install/path_to_theme/views-view--featured--block.tpl.php).

Here is the template file that I copied via the Theme Information:

<?php if (!empty($title)): ?>
<h3><?php print $title; ?></h3>
<?php endif; ?>
<?php foreach ($rows as $id => $row): ?>
<div class="<?php print $classes_array[$id]; ?>">
<?php print $row; ?>
</div>
<?php endforeach; ?>

Answer 1

there is a simple solution. Add a new template for article content types. node-article.tpl.php. And then add an if statement to that, if the article is on the front page, show markup A, else show markup B. Like:

if (drupal_is_front_page()) {
    <article class='front-page'>Article</article>
}
else
{
    <article class='other-page'>Article</article>
}

Answer 2

This can all be achieved by the views module: http://drupal.org/project/views

Create a block display and have it show only on the home page. There should be no need for a custom views template.

You can add the .slidercontrols UL to the header of the view. Also if you need the attribute on the outer div just add it via jQuery with something like this.

$('.slidewrap').attr('data-autorotate', 5000);