vSlider is a very good and easy to use plugin. However I wanted a link in the description, which is not available in the options panel. Here is how I added a link to the description in vSlider.
It may not be the best solution, so you may use it at your own risk. For me it’s a temporary solution, because I expect this feature in the next verion (4.2). Updates will overwrite the changes below.
- Open vslider.php
- Go to line 999:
[code]
foreach( $randx as $x){ ?>
<a href="<?php echo $options['link'.$x.'']; ?>" style="background:#fff;" target="<?php echo $options['target']; ?>">
<?php
if($options['timthumb']){
$image = str_replace(get_bloginfo('siteurl'), '', $options['slide'.$x.'']);
$img_url =WP_CONTENT_URL.'/plugins/vslider/timthumb.php?src='.urlencode($image).'&w='.$options['width'].'&h='.$options['height'].'&zc=1&q='.$options['quality'];
}else{
$img_url=$options['slide'.$x.''];
}
?>
<img src="<?php echo $img_url; ?>" style="width:<?php echo $options['width']; ?>px;height:<?php echo $options['height']; ?>px;" alt="<?php echo $options['heading'.$x.'']; ?>" />
<?php if($options['heading'.$x.''] || $options['desc'.$x.'']) { ?>
<span><h4><?php echo $options['heading'.$x.'']; ?></h4><?php echo $options['desc'.$x.'']; ?></span>
<?php } ?>
</a>
[/code] - Normally the link starts, then the image, then the title, then the description. I wanted nothing but the ‘read more’ link, so cut the first part of the link:
[code]
<a style="background: #fff;" href="<?php echo $options['link'.$x.'']; ?>" target="<?php echo $options['target']; ?>">
[/code] - and paste it between [code]<?php echo $options['desc'.$x.'']; ?>[/code] and [code]</span>
<?php } ?>
</a>[/code] - It means the link now starts after the description. Because there is no text, there will be no link, so I added:
[code]
Lees verder > >
[/code] (Dutch for ‘Read more’) after the pasted part - That’s it, save vslider.php and upload it to your server.
Example can be found on the homepage of acupuncturist.nl
This is my version of the changed part of the code:
[code]
foreach( $randx as $x){ ?>
<?php
if($options['timthumb']){
$image = str_replace(get_bloginfo('siteurl'), '', $options['slide'.$x.'']);
$img_url =WP_CONTENT_URL.'/plugins/vslider/timthumb.php?src='.urlencode($image).'&w='.$options['width'].'&h='.$options['height'].'&zc=1&q='.$options['quality'];
}else{
$img_url=$options['slide'.$x.''];
}
?>
<img src="<?php echo $img_url; ?>" style="width:<?php echo $options['width']; ?>px;height:<?php echo $options['height']; ?>px;" alt="<?php echo $options['heading'.$x.'']; ?>" />
<?php if($options['heading'.$x.''] || $options['desc'.$x.'']) { ?>
<span><h4><?php echo $options['heading'.$x.'']; ?></h4><?php echo $options['desc'.$x.'']; ?> <a href="<?php echo $options['link'.$x.'']; ?>" style="background:#97141C; color:#fff !important;text-decoration:underline !important;font-weight:bold !important;" target="<?php echo $options['target']; ?>">Lees verder > ></span>
<?php } ?>
</a>
[/code]
Please leave a comment if you need help or have improvements.
Edit: How to link the title and description
- Cut:
[code][/code] - and paste it between:
[code]
<span>
[/code]
and
[code]
<h4>
[/code]
So the link no longer begins after the description, but before the title.
