Background Switcher?

[eluser]austintbiggs[/eluser]
I'm trying to create a background switcher, but I'm unsure as to what approach I should take. I'm trying to avoid multiple style sheets, so should I maybe use uri segments and a redirect to referrer? or use a form for each item and make the anchor for each thumbnail the submit button sending a hidden id to php?

Also I'm aiming to store some meta data for each background in a db, so I could pull information such as the artist or the name of the background from the db.

I'm just stuck, can someone give me a nudge? Please and thank you [:

[eluser]adityamenon[/eluser]
I like the second approach. Send a hidden id from a form using jquery. When you get the return data, set the required data like background-color and other "meta data", again using jquery.

[eluser]austintbiggs[/eluser]
I've attempted to create the background switcher, but I'm not sure what I'm doing wrong. Here's a look at my code:

Controller

Code:

public function appearance_settings()
    {
      if ($this->input->post('url', TRUE)) {
            $url = $this->input->post('url');
            
            $cookie = array(
       'name'   => 'bg',
       'value'  => $url,
       'expire' => '86500',
       'domain' => '.ravecity.tv',
            );
      delete_cookie($cookie);
            $this->input->set_cookie($cookie);
        }
        
        $this->data['background'] = $this->input->cookie('bg');
        
      $this->data['title'] = "Dashboard / Appearance Settings";
      $this->data['main_content'] = "body/appearance_settings";
      $this->load->model('Gallery_model');
      $this->data['images'] = $this->Gallery_model->get_images();
        $this->load->view('body/index', $this->data);
    }

Model

Code:

<?php
class Gallery_model extends CI_Model {
    
    var $gallery_path;
    var $gallery_path_url;
    
    function Gallery_model() {
        parent::__construct();
        
        $this->gallery_path = realpath(APPPATH . '../beauty/images/backgrounds');
        $this->gallery_path_url = base_url().'beauty/images/backgrounds/';
    }
    
    function do_upload() {
        
        $config = array(
            'allowed_types' => 'jpg|jpeg|gif|png',
            'upload_path' => $this->gallery_path,
            'max_size' => 2000
        );
        
        $this->load->library('upload', $config);
        $this->upload->do_upload();
        $image_data = $this->upload->data();
        
        $config = array(
            'source_image' => $image_data['full_path'],
            'new_image' => $this->gallery_path . '/thumbs',
            'maintain_ration' => true,
            'width' => 150,
            'height' => 150
        );
        
        $this->load->library('image_lib', $config);
        $this->image_lib->resize();
        
    }
    
    function get_images() {
        
        $files = scandir($this->gallery_path);
        $files = array_diff($files, array('.', '..', 'thumbs'));
        
        $images = array();
        
        foreach ($files as $file) {
            $images []= array (
                'url' => $this->gallery_path_url . $file,
                'thumb_url' => $this->gallery_path_url . 'thumbs/' . $file
            );
        }
        
        return $images;
    }
    
}

View

Code:

<?php echo $background;?>

I'm trying to echo the correct information, before I stick it in with some css.

[eluser]toopay[/eluser]
IMO, nothing wrong with your code or your implementation (or your haircut). But i will suggest more "system-defined" themes rather than "user-defined", to maintain more controlled situation.

[eluser]theprodigy[/eluser]

I’ve attempted to create the background switcher, but I’m not sure what I’m doing wrong.

I’m trying to echo the correct information, before I stick it in with some css.

What is the problem? What is being shown when you echo $background?

[eluser]austintbiggs[/eluser]
Sorry, I feel stupid, left out the important parts, oops.

The problem is that no matter if I resend the data it always sets the cookie to http://ravecity.tv/beauty/images/backgrounds/avatar.jpg which is the first entry. When echoing $background, I get http://ravecity.tv/beauty/images/backgrounds/avatar.jpg

[eluser]theprodigy[/eluser]
(Just for verification) Have you tried echoing the value of $url after setting it? Since it's going into the cookie value, and that is required, have you checked to make sure it's actually being set?

[eluser]austintbiggs[/eluser]
I've been using Firebug and I viewed the created cookies. Every cookie ends up with the value set as http://ravecity.tv/beauty/images/backgrounds/avatar.jpg I think it might have something to do with how the form is submitted. Each element becomes a link which sends the form, but they all have the same name.

The Javascript

Code:

[removed]
function submitform()
{
    document.forms["switcher"].submit();
}
[removed]

The HTML

Code:

<div class="hidden">
&lt;input type="hidden" name="faith" value="2fb13fe404868ed51a57851fd9c111fa" /&gt;
</div>
&lt;input type="hidden" name="url" value="http://ravecity.tv/beauty/images/backgrounds/main-header-background.png" /&gt;
&lt;/form&gt;        <a href="[removed] submitform()">
        <img src="images/backgrounds/thumbs/main-header-background.png"/>
        <span class="name">Boxes</span>

        </a></li>
        <li data-id="bl01" data-type="blue">
    &lt;form action="http://ravecity.tv/dashboard/appearance_settings" method="post" accept-charset="utf-8" id="switcher"&gt;
<div class="hidden">
&lt;input type="hidden" name="faith" value="2fb13fe404868ed51a57851fd9c111fa" /&gt;
</div>
&lt;input type="hidden" name="url" value="http://ravecity.tv/beauty/images/backgrounds/main-header-background1.png" /&gt;
&lt;/form&gt;        <a href="[removed] submitform()">
        <img src="images/backgrounds/thumbs/main-header-background1.png"/>
        <span class="name">Boxes</span>

        </a></li>
        <li data-id="bl01" data-type="blue">
    &lt;form action="http://ravecity.tv/dashboard/appearance_settings" method="post" accept-charset="utf-8" id="switcher"&gt;
<div class="hidden">
&lt;input type="hidden" name="faith" value="2fb13fe404868ed51a57851fd9c111fa" /&gt;
</div>
&lt;input type="hidden" name="url" value="http://ravecity.tv/beauty/images/backgrounds/seven_-_male_lust_idea.jpg" /&gt;
&lt;/form&gt;        <a href="[removed] submitform()">
        <img src="images/backgrounds/thumbs/seven_-_male_lust_idea.jpg"/>
        <span class="name">Boxes</span>

        </a></li>

[eluser]theprodigy[/eluser]
ok, I think I see your problem.

Every form has the same id. When your javascript gets called, it is only submitting the first one it finds.

[eluser]austintbiggs[/eluser]
Didn't see this before

IMO, nothing wrong with your code or your implementation (or your haircut). But I will suggest more “system-defined” themes rather than “user-defined”, to maintain more controlled situation.

What do you mean exactly? The images that are background options are handpicked, users do not upload pictures, they simply select from the options allowed.