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, biapar, Willr, Ingo, swaiba, simon_w

Jquery Image slider from Wordpress to Silverstripe


Reply


2 Posts   1931 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.