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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

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   2434 Views

Avatar
Daimz

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 http://www.arctosdesign.com/wordpress

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="http://www.arctosdesign.com/images/<?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() {
    
    jQuery('#feature').cycle({
        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.

Thanx
Daimz

Avatar
Daimz

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.