Adding Image rotator PHP code to Magento

If you want to display something relating to products or files that is not covered by an existing Magento block, you may need to write some PHP to do it. In my case I needed an image rotator to cycle through some images. There are plenty of examples of rotators on the web and a few hints on doing it with Magento but I wanted control and I wanted to understand it so...

The PHP will need to go into my own block template. This is the phtml file that contains the php scrpt to generate the html. Its going to rotate images but I'll start with a very simple php file that just verifies its running PHP:

<?php echo '<p>Hello from image_rotator.phtml</p>' ?>

This goes into my image_rotator.phtml file which I now need to hook into Magento.

I need to put the file somewhere sensible in my theme so that the standard Magento block stuff can find it. Its a template so it goes under design/frontend/default/<my_theme>/template and, as I'm using it on my cms pages I'll put it in the cms folder:

design/frontend/default/<my_theme>/template/cms/image_rotator.phtml

Now, to get Magento to use it, I need to insert a block into a cms page. The type of the block is core/template because I'm doing all the work in my phtml file. If I was accessing Magento data or doing other 'model' stuff I'd use or create a block file to do that and that would then specify my block type. I insert:

{{block type="core/template" template="cms/image_rotator.phtml"}}

This can go into the top of my home page (or on any appropriate test page).

Now, when I fetch the page I can see my test code. We can now extend the PHP template file to do whatever we need.

For this example, I am going to make it rotate images. I wont dwell on the rotator code, I modified it from this image rotator which is nice and clean.

If you want to give this a go, everything you need is in this tar.

  1. Extract image_rotator_files.tar.gz in the root of your site
  2. Move the image_rotator.phtml file to design/frontend/default/<your_theme>/template/cms/image_rotator.phtml
  3. Insert the block statement shown above into a suitable CMS page
  4. Change the images in media/rotator_images to suit
  5. Watch the result

Perhaps if I get time I'll make this into a Magento extension with admin facilities to manage the images, associated links etc.


Comments

Wes Davis 7 years, 1 month ago

Can't get it to work
Thanks for the write up. I have downloaded your files, and insterted them in the necessary positions.

When I add the block in the CMS page, it removes the content of the page.

Is the block supposed to go into the 'Content' of the CMS page or somewhere else?

Cheers, Wes

Link | Reply

Wes Davis 7 years, 1 month ago

Actually..
I just tested that is not the problem. i can echo some text on the page.

So there is some issue for me in the actual code for image_rotator.phtml

I am using Magento ver. 1.4.0.1

Will keep digging.

Link | Reply

Paul Whipp 7 years, 1 month ago

This was tested in Magento version 1.4.1.0 but should be flexible
This solution was tested in 1.4.1.0 but it should work fine in 1.4.x

If the content of the page is disappearing there is some error occurring that is breaking the presentation.

Given that getting image_rotator to just echo text is working, my best guess is that the file permissions or locations for the images are incorrect.

Link | Reply

Wes Davis 7 years, 1 month ago

Thanks
Thanks for the response Paul. Permissions was the next thing I checked, and everything is fine on that front.. including ownership.

I have just reverted to hardcoding the names of images and will have a re-visit later to see if I can get this to work for me.

Thanks again for the response mate :)

Link | Reply

mimi 5 years ago

I downloaded your sample. It did not load the image. I replace the image_rotator.phtml with a " hello" test msg. It works. I opened the fire fox to debug, seems images never loaded:


anything wrong?

Link | Reply

Paul Whipp 5 years ago

This is almost certainly due to setting the file permissions appropriately on the image or getting the pathnames right. The web process must be allowed to read them and execute the folder in which they are located.

The code is working fine on magento versions up to 1.6 (and probably beyond). Here is an example www.animalhealthstore.com.au.

Link | Reply

dre headphones 5 years ago

about the banner rorator
thank you for your blog.i have learn much.i use the emthemes 0020,the banner is use the static block.but can not rotator.do u know why. magento version:1.4.1

Link | Reply

Sergio 4 years, 11 months ago

top navigation problem
Hi, I tride the rotator ende evrything seems goon but the top navigation doesn't show the second level.
I'm using mae 1.7.0.2

Link | Reply

Bidderboy 4 years, 9 months ago

Rotating Testimonial Slider
Hi, any idea about Jquery Testimonial slider which can include photos and comments with rotating slider..?

Link | Reply

Paul Whipp 4 years, 9 months ago

This code could easily be adapted to become a testimonial slider with or without JQuery to make the Javascript more concise.

Most of the hard work would be in building the administration back end and testimonial entry facilities assuming you want your customers to be able to enter testimonials. GIYF if you want to find and perhaps customise one of the existing testimonial modules for Magento.

Link | Reply

New Comment

required

required (not published)

optional

Australia: 07 3103 2894

International: +61 410 545 357