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.

Customising the CMS /

Easiest way to add images (with links) to the home page


Reply


6 Posts   1621 Views

Avatar
Larry7

Community Member, 21 Posts

5 June 2010 at 11:26am

I have been looking at the tutorials etc. and scanning the forums but the solutions seem a bit complex. What I want to do is add images on the LHS of the home page (well in the Main template if possible) and for the user to add the image and a link to another site.

Doubtless there are many ways to do this but I would appreciate some guidance for the least complex way to achieve this. I am a SS neophyte so if it can be down without adding tons of modules etc. that would be great. I did mange to intall the CMS(!) and add the Blog module with some widgets so I am not totally new but so far have managed to keep my editing of the PHP or SS files to a minimum.

Thanks

Larry

Avatar
craesh

Community Member, 25 Posts

16 June 2010 at 3:10am

Edited: 16/06/2010 3:21am

Hi Larry!

That's easy. First, you'll need to create a new class based on DataObject with your two fields: Image and URL

<?php

class MyLinkedImage extends DataObject {
   public static $db = array(
      "URL" => "Text"
   );
   
   public static $has_one = array(   
      "Image" => "Image",
      "Homepage" => "HomePage"
   );
   
   public function getCMSFields_forPopup() {
      return parent::getCMSFields();
   }
}

?>

Rename the class MyLinkedImage to anything you like and name the file the same way. Now download ImageDataObjectManager (you will find the module DataObjectManager on silverstripe.org) and install it. It will help you to manage your DataObjects. Now tell your (maybe newly created) HomePage.php to "have many" of these images:

<?php

class HomePage extends Page {
   // ...
   
   public static $has_many = array(   
      "Image" => "MyLinkedImage"
   );
   
   public function getCMSFields() {
      $f = parent::getCMSFields();
      $f->addFieldToTab("Root.Content.Image", new ImageDataObjectManager(
            $this,
            'Image',
            'Image',
            'Image',
            array(
               'URL' => 'URL'
            ),
            'getCMSFields_forPopup'
         )
      );
      return $f;
   }
   
   // ...
}

?>

[url=http://doc.silverstripe.org/modules:dataobjectmanager]Here you'll find the docs for DataObjectManager[/url]

Later, you display them by just adding this to your template:

<% control MyLinkedImage %>
<a href="$URL">$Image</a>
<% end_control %>

This will display all images at once. If you want to display on a a time randomly, you will need to add some logic - but that should be easy ;)

Greetings!
craesh

Avatar
Larry7

Community Member, 21 Posts

16 June 2010 at 9:07pm

Thanks. That doesn't look too complicated so I will give it a try.

Another thought I had which didn't involve loading any modules was just editing the ss file for the main page but I can't find where it is on the web site! I thought I could just do the image editing outside of the CMS by changing the templates so that they pointed to the image files I want and perhaps have a modified main page template but it seems to be well hidden.

Larry

Avatar
craesh

Community Member, 25 Posts

16 June 2010 at 9:17pm

Hi Larry,

the templates are located in "themes/<your-theme>/templates". Just take a look at the documentation at [url]http://doc.silverstripe.org/themes:developing[/url].

If you have specific questions about themes and templates, please open a new thread for each independent question. That way you will help later users to find your questions quickly.

Greetings!
craesh

Avatar
m3d

Community Member, 8 Posts

31 August 2010 at 2:16am

Edited: 31/08/2010 2:16am

and where do I upload the images to? a special folder?

Avatar
Larry7

Community Member, 21 Posts

31 August 2010 at 9:34am

Thanks.

I found where the templates were kept before I saw your post but thanks anyway. I then edited the homepage.ss and added CSS and HTML to the page to display the images I wanted. I also created some different templates so that other pages didn't have those images. And while I was there (and slighly OT for this this thread) added code for Google Analytics. So up till now I have been able to stay away from extending the CMS.