Creating an array of attributes

We want to do a little extra in the content-gallery.php file. We will add a class to the images so that we can do the animation and stuff like that. For this, we will create an array of attributes. In the div, let's add the following code:

<div class="post-thumbnail">
<?php
$attr = array(

);
?>
</div>

Next, in the array, we will put in class and we want that to be w3-animate-opacity class. Then, we also want a hover effect for which we can use w3-hover-opacity:

<div class="post-thumbnail">
<?php
$attr = array(
'class' => 'w3-animate-opacity w3-hover-opacity'
);
?>
</div>

Now, each image is going to have a link around it. So, after the array of attribute, we will add <a href="php echo the_permalink()"></a>:

  <a href="<?php echo the_permalink(); ?>">
</a>
</div>

This link will take us to the single post. Then to show the thumbnail we will add <?php echo get_the_post_thumbnail(); ?> in the anchor tag as shown here:

<a href="<?php echo the_permalink(); ?>">
<?php echo get_the_post_thumbnail(); ?>
</a>

In the get_the_post_thumbnail() function, we will pass in ID, the size which will be large, and then the attributes as shown here:

<a href="<?php echo the_permalink(); ?>">
<?php echo get_the_post_thumbnail($id, 'large', $attr); ?>
</a>

Next, underneath the endif statement, we will put the content:

  <?php endif; ?>
<?php the_content(); ?>
</div>

Now save the code and reload the home page. We will not see anything because we didn't actually add any content to that photo post:

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.12.232