This solution worked very well for myself. The intro text was still too long so I shortened it to 300 characters. See below. I added the main code in the first answer above right after the h3 tag and then just modified the intro text portion. I didn't use the category name. I added the link to the main article in the read more link and also for the ...
Here is the total code I used in Joomla 3.6, including the h3 tag...
<h3>
<a href="<?php echo JRoute::_(TagsHelperRoute::getItemRoute($item->content_item_id, $item->core_alias, $item->core_catid, $item->core_language, $item->type_alias, $item->router)); ?>">
<?php echo $this->escape($item->core_title); ?>
</a>
</h3>
<?php
//image
$images = json_decode($item->core_images);
echo '<p><img class="intro-image" src="'.$images->image_intro.'"></p>';
//introtext
$limit =300;
if (strlen($item->text) > $limit) {
echo (substr($item->text, 0, $limit)) ?> <a href="<?php echo JRoute::_(TagsHelperRoute::getItemRoute($item->content_item_id, $item->core_alias, $item->core_catid, $item->core_language, $item->type_alias, $item->router)); ?>">...</a>
<?php
}
else {
echo $item->text;
}
?>
<p>
<a class="read-more" href="<?php echo JRoute::_(TagsHelperRoute::getItemRoute($item->content_item_id, $item->core_alias, $item->core_catid, $item->core_language, $item->type_alias, $item->router)); ?>">Read more</a>
</p>