Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Jquery Image slider from Wordpress to Silverstripe

Go to End

2 Posts   2260 Views


Community Member, 36 Posts

15 July 2009 at 10:03pm

I am busy moving my site acros from wordpress to silverstripe and I am having a wee bit of a problem figuring out how to recreate my image rotator. You can veiw my wordpress example here

here is how it works in wordpress:

  <?php query_posts('tag=featured'); ?>
<?php while (have_posts()) : the_post(); ?>
    <a href="<?php the_permalink(); ?>"  target="_self"><img id="feature_image" src="<?php $values = get_post_custom_values("featured"); echo $values[0]; ?>" /></a>
    <?php endwhile; ?>

This basically just searches for posts I have created with the tag "featured" and then I have created a custom field with name featured this holds the image that will be displayed.
Then this jQuery script creates the slider.

jQuery(function() {
        prev:   '#prev',
        next:   '#next',
        timeout: 6000,
        after:   onAfter,

    onAfter.apply(jQuery('td a:first')[0]);

    function onAfter() {
    jQuery('#output').html("Current anchor: " + this.href);

which basicly just cycles through the images from the custom fields in posts with featured tag.

however like I said I want to do this in Silverstripe but I am having some problem figuring out how to do this exactly. I don't know how to make custom field ( if silverstirpe even uses them...I think it uses just fields. am I right?). I am wanting it to display my portfolio work(I'm not really a coder I'm a designer hence why I am finding this transition difficult) so if I created a new sub page for a new portfolio item how then could I add to that page (A) a tag like the "feature" tag in wordpress and (b) how can I make a field that would allow me to attach the image.

Any ideas? I would really appriciate any help.



Community Member, 36 Posts

16 July 2009 at 1:19am

Edited: 16/07/2009 2:10am

Ok so I have figured out how to do what I need to a certain point.
I can now make an image section with in the PortfolioPage which I can then call in the PortfolioHolder using "$FeatureWork".
Like this:

  <% control Children %>
<a href="$Link" title="Read more on &quot;{$Title}&quot;">$FeatureWork</a> 
  <% end_control %>

This then creates:

<a href="/silverstripe/01/" title="Read more on &quot;01&quot;"><img src="/silverstripe/assets/Uploads/Wolverine02.jpg" alt="Wolverine02" /></a>

I need it to now do this:

<a href="/silverstripe/01/" title="Read more on &quot;01&quot;"><img src="/silverstripe/assets/Uploads/Wolverine02.jpg" alt="Wolverine02" class="feature_image" /></a>

I have to add a class to the image in order for the jQuery to work.
I have been looking at this:

$fields = ImageField::setExtraClass('feature_image');

But as you will proberly see I don't know how or where to use it I just found it trauling for the last 50min throught the forum and played with it to get it here and now I'm lost and stuck.