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.

Data Model Questions /

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

Passing the content of a text field to an array

5 Posts 1457 Views

Deee83

Community Member, 3 Posts

31 August 2011 at 7:05am

Hi guys,

I want to use a jQuery plugin („Slides“) in my SS theme for a rotating banner.

For this purpose, I have added a text field named “HeaderImages” to the CMS. In this field I would like to write the urls of the images that should be used in the banner of the current site (e.g. ‘image1.jpg’, ‘image2.jpg’, ‘image3.jpg’). The content of this field should be passed to the array of the Slides plugin.

Unfortunately, I couldn’t find out yet how to do that?! I hope someone can help me...

Here’s the code:
Page.php:

class Page extends SiteTree {

	public static $db = array(
                'HeaderImages' => 'Text'
	);

	...

        function getCMSFields() {
                $fields = parent::getCMSFields();

                $fields->addFieldToTab('Root.Content.Main', new TextField('HeaderImages'), 'Content');

                return $fields;
        }

}


class Page_Controller extends ContentController {

	...
            
        public function init() {
                Requirements::customScript("
                         jQuery(document).ready(function(){
                                  jQuery('#slideimage').Slides({ images: [image1.jpg, image2.jpg, image3.jpg] });		
                         });
                 ");              

                 parent::init();
       
        }
}

Page.ss:

...
	<body>
	...	  
               <div id="Header">   
                         <img src="image1.jpg" id="slideimage">
               </div>
        ...
                  
              <script type="text/javascript" src="mysite/javascript/jquery-1.6.2.min.js"></script>
              <script type="text/javascript" src="mysite/javascript/jquery.slides.min.js"></script>
        </body>
</html>

martimiz

Forum Moderator, 1391 Posts

31 August 2011 at 8:14am

You can use php variables within the customScript() function to inject the image filenames...

Deee83

Community Member, 3 Posts

31 August 2011 at 6:27pm

Thanks for the fast answer!

How can I refer to the $HeaderImages variable? I've already tried to use variables in the function, but I'm quite a beginner in PHP, and unfortunately I seem to have done it the wrong way... :-(

public function init() {
             Requirements::customScript("
                 $SlideImages = $HeaderImages;
                 jQuery(document).ready(function(){
                      jQuery('#slideimage').Slides({ images: $SlideImages });		
           });"
);

martimiz

Forum Moderator, 1391 Posts

31 August 2011 at 11:46pm

Suppose you have a HeaderImages textfield in your CMS, where you add the following: image1.jpg, image2.jpg, image3.jpg'

This is already a format you can use for your javascript array. Next in your init() function you refer to the field as $this->HeaderImages. Now you only need to replace the hardcoded images:

function init() {
	parent::init();
	
	Requirements::customScript("
		jQuery(document).ready(function(){
			jQuery('#slideimage').Slides({ images: [" .  $this->HeaderImages  . "] });      
		});
	"); 

}

This should at least get you the scripblock like you described it. If the JavaScript works, I wouldn't know :-)

Deee83

Community Member, 3 Posts

1 September 2011 at 6:56am

Works perfectly now!

Thanks a lot!!!!

Return to top