Customizing image galleries

edited January 2014 in Modules
Hi, I'm very new to both CodeIgniter and Fuel, but so far I've gotten things set up with two tables.

1. A projects table that has a name and description.
2. A projects_images table that has a list of images.

In the projects model, I have added a has_many relationship so that the images are updatable via the Projects module.

public $has_many = array('images' => array(array(FUEL_FOLDER => 'project_images_model')));

So far, so good.

But there are a few areas where I'm confused and would like to add some enhancements.

1. How do I make the project id map to the images? Should my images table have a foreign key? Can you explain a simple db schema?
2. How do I adjust the order the images show in the Projects box and have those shown this way by the final array? Is there a way to re-order them without leaving that screen, like through a drag and drop, like you can in the project_images screen?
3. Can an image be assigned automatically to the project that opened the add-image window?
4. Can an image be assigned a folder based on project id?

Basically, we'd like to restrict the UI to make it far more dummy proof. Any tutorials or docs that explain things would be greatly appreciated, and sorry if I missed any of them in the manual.



  • edited January 2014
    I'm currently working on an advanced gallery module that I will release open source in the next month or so. It will do everything you've requested but for now here are some answers:

    You may want to use a bridge table so that you will have 3 tables total.


    The bridge table should have 3 fields, ID, ProjectID (foreign key), ImageID (foreign key)..

    #2 On the Images table you can add SortOrder.. when you make your SQL call you can order the images. You will responsible for maintaining the order.

    FUEL rocks!
  • edited 10:23PM
    1. Does a single image belong to only one project? If so, I'd add a foreign key to the projects_images table of "project_id" and in this case remove the $has_many:
    public $foreign_keys = array('project_id' => 'projects_model');. To display the images,
    2. Is this from the perspective of a project or an image? I'm not quite sure I understand this question.
    3. I'm not quire sure I understand this question. I will say that if you are using an asset field type (has the "Select" button that opens in a modal window), and you have a value in the text field, it should automatically select the image in the dropdown in the modal window.
    4. To assign an image to a specific field value, you'll need to use the "file" field type instead of the asset field type. This is because the "asset" field type does the uploading in a different screen and it doesn't have a reference to the project id value. The "file" field type will upload the file from the same screen and so it will have the necessary $_POST variables to make replacements in path values.You can use placeholders in your folder paths like so:
    ... $fields['image'] = array('type' => 'file', 'folder' => 'images/projects/{project_id}');
  • edited 10:23PM
    Thanks for the replies.

    1. Thanks!
    2. Yes, the idea is that an end user would have the ability to only work in the Projects module and not have to work in the Projects Images module, solely from a UX perspective.
    3. I want to have a list of images attached to a project, then a button that says "add image". When I add the image, a user should not have to see a dropdown to assign that image to the project, it should simply add that id.
    4. Thanks, I'm still a little confused about where all these lines of code go. As I said, I'm new to CI, so a lot of this is unclear.

    On this note, is there a library of small example setups?
  • edited January 2014
    Unfortunately, FUEL doesn't have a built in way to easily handle that. You would need to manually add the HTML to render the list of images and the button. Something like the following:
    function form_fields($values = array(), $related = array()) { $fields = parent::form_fields($values, $related); // add other form field stuff here if (!empty($values['id'])) { $CI =& get_instance(); $CI->load->module_model(PROOFER_FOLDER, 'project_images_model'); $images = $CI->project_images_model->find_all(array('project_id' => $values['id'])); $str = ''; foreach($images as $key => $image) { $edit_uri = ($CI->fuel->admin->is_inline()) ? 'inline_edit' : 'edit'; $str .= '<a href="'.fuel_url('project_images/'.$edit_uri.'/'.$image->id).'"><img src="' . $image->name. '" alt=""></a> '; } $create_uri = ($CI->fuel->admin->is_inline()) ? 'inline_create' : 'create'; $contact_str .= '<br><br><a href="'.fuel_url('project_images/'.$create_uri.'?project_id='.$values['id']).'" class="btn_field">Add</a><br>'; } return $fields; }
    4. There is an older demo branch that we have yet to update to a new demo using 1.0. It may provide some help but note that it is an older version.
  • edited 10:23PM
    I just updated the example above to pass in the project_id value to pre-poluate the project image form using a query string parameter.
Sign In or Register to comment.