Page 1 of 1

How to select a image when adding news article?

Posted: Sat Mar 19, 2011 11:34 am
by ethan2cyc
hi all,
I know that the image can be select from TinyMCE, but I want show the text and image separately. Is there any way to let users can select a image when adding news article? or has any other module can do the same effect?

Here http://themes.cmsmadesimple.org/ is a example.

Thank you.

Re: How to select a image when adding news article?

Posted: Sat Mar 19, 2011 12:21 pm
by uniqu3
You can add extra field (type=file) and let users upload image they want to use in combination with SuperSizer plugin you can prevent those users uploading to large images..
To get an idea how this can be put together you can have a look here: http://www.i-do-this.com/blog/21/Create ... cle-plugin

Re: How to select a image when adding news article?

Posted: Sat Mar 19, 2011 4:12 pm
by Wishbone
I really wish we could use GBFilePicker in News.. Not only can you upload files, but you can configure it to select existing files as well. Too bad we don't have access to the news submission template.

Re: How to select a image when adding news article?

Posted: Sat Mar 19, 2011 5:18 pm
by uniqu3
@Wishbone you are not the only one :)

Re: How to select a image when adding news article?

Posted: Sat Mar 19, 2011 5:35 pm
by hoshy
what about the module_custom stuff?
With a plugin or udt you can create the GBFilePicker input in e.g. addarticle.tpl of news module.
Problem is... how to tell the news module to save that input?
The input needs a name that is known by the news module.
(an extra field)
But i did not found a way to get the name or id of the extra fields.

Re: How to select a image when adding news article?

Posted: Sat Mar 19, 2011 6:38 pm
by Wishbone
If we could just find a non-code-hacky way of overriding $this->CreateFileUploadInput() .... I'm looking into it right now. :)

I'm looking into the module_custom stuff as well. I just wish that module_custom could be used to extend the module class and replace CreateFileUploadInput. Hmm.... Lang files are PHP... ;)

Re: How to select a image when adding news article?

Posted: Sat Mar 19, 2011 9:40 pm
by Wishbone
It can be done with a module_custom template.. You just have to know the ID of the custom field definition and the prompt. Still a bit hacky.. I'll post it on uniqu3's blog if I can get it working. Not particularly upgradeable if the news submission template changes.

Re: How to select a image when adding news article?

Posted: Sat Mar 19, 2011 9:55 pm
by nicmare
Wishbone wrote:It can be done with a module_custom template.. You just have to know the ID of the custom field definition and the prompt. Still a bit hacky.. I'll post it on uniqu3's blog if I can get it working. Not particularly upgradeable if the news submission template changes.
V O T E ! :D

Re: How to select a image when adding news article?

Posted: Sun Mar 20, 2011 5:23 am
by hoshy
I talked to the developer of GBFilePicker and he created a plugin that can be used in module_custom/News/editarticle.tpl.
Unfortunately the GBFilePicker javascript seems to have a problem with the news input names. The News module uses [braces] in the input names wich makes GBFilePicker not working in browser mode :(
Dropdown mode works but you will not have image preview.
(only if you save and reload you see the selected image)
Some changes to the filepicker needs to be done to fix it but i'm afraid this will take a while... (i dunno what changes and the autor couldn't tell me yet )

The plugin can be loaded here:
http://dl.dropbox.com/u/2876578/CMSms/P ... fields.php

usage:
copy the file to plugins.
copy the file modules/News/templates/editarticle.tpl to module_custom/News/templates/
Open it and insert the plugin

{get_gbfp_news_custom_fields}

right before

{if isset($custom_fields)}

the plugin will override the smarty vars of the news module.
All you need to do now is to create a extra field of type text and prefix the name of the field with "GBFP_".
All text inputs that starts with GBFP_ will result in a GBFilePicker dropdown.
You can use the GBFilePicker params in the plugin call.

It is not perfect yet. But it is a step forward.

Re: How to select a image when adding news article?

Posted: Sun Mar 20, 2011 6:12 am
by Wishbone
I just came up with a similar plugin.. You don't even have to duplicate the editarticle.tpl.. You call the plugin, then call the original template. This way, when you upgrade, and the edit article template changes, you don't have to re-copy. The filepicker options I used allows the user to either choose an existing file, or upload one, create a new folder, etc.

As for the square braces, the only thing that needs them is the <input name="m1_customfield[2]"> The rest I remove in the plugin.

Code: Select all

# replace [number] with _number
$field->field = preg_replace('/\[(\d+)\]/', '_$1', $field->field);

# replace [ ascii code %5B with _
$field->field = preg_replace('/%5B/', '_', $field->field);

# replace ] ascii code %5D with nothing
$field->field = preg_replace('/%5D/', '', $field->field);

# then put the name="m1_customfield[2]" back
$field->field = preg_replace('/name="([^"]+)_(\d+)"/', 'name="$1[$2]"', $field->field);
Screenshot: http://teamwishbone.com/uploads/images/ ... picker.jpg

Works like a charm! Here's the entire procedure:

module_custom/News/templates/editarticle.tpl:

Code: Select all

{add_GBFilePicker_to_news fields=$custom_fields prompt='Image' template_var='edit_template'}
{include file=$edit_template}
The above looks for a custom field (text entry) called Image, and replaces it with the GBFilePicker output.

UDT 'add_GBFilePicker_to_news' :

Code: Select all

global $gCms;

foreach ($params['fields'] as &$field) {
  if ($field->prompt == $params['prompt']) {
    preg_match_all('/\s+([^=]+)="([^"]*)"/', $field->field, $matches);
    if ($matches) {
      foreach ($matches[1] as $key => $value) {
        $field_params[$value] = $matches[2][$key];
      }
      if ($field_params) {
        $GBFilePicker = $gCms->modules['GBFilePicker']['object'];

        $field->field = $GBFilePicker->CreateFilePickerInput(
          $GBFilePicker,
          '',
          $field_params['name'],
          $field_params['value'],
          array(
            'media_type'=>'image',
            'mode'=>'browser'
          )
        );
      }
    }
  }
}

$field->field = preg_replace('/\[(\d+)\]/', '_$1', $field->field);
$field->field = preg_replace('/%5B/', '_', $field->field);
$field->field = preg_replace('/%5D/', '', $field->field);
$field->field = preg_replace('/name="([^"]+)_(\d+)"/', 'name="$1[$2]"', $field->field);

$config = $gCms->getConfig();
$smarty->assign($params['template_var'], $config['root_path'] . '/modules/News/templates/editarticle.tpl');
This is just a rough draft. No support for multiple fields, different sets of options, etc. I'll write up a better one later.. I need some sleep.. Been working on this one all day. :)

I think that plugin you posted is cleaner.. I think a combination of that plugin, with my calling the original template, plus an extra call to fix the square braces, and we have a fantastic idea! :)

I also think that we should be able to define different GBFP parameters for different fields.. One for files, another one for images, etc.

Re: How to select a image when adding news article?

Posted: Sun Mar 20, 2011 6:31 am
by hoshy
Using references and the original template is a nice idea.
I like that.

Good news #1: the braces issue is fixed in svn and will be released with GBFilePicker 1.3.1 and 1.2.10
so we don't need to replace anything :D

Re: How to select a image when adding news article?

Posted: Mon Dec 17, 2012 3:44 pm
by qido
Hi

Has here been any change to the CMSMS in the recent releases.

I use 1.11.2 and I can't get this to work.

Any idea?

Re: How to select a image when adding news article?

Posted: Thu Dec 20, 2012 10:04 am
by andrewvideo
Has anyone got this to work on 1.11.14?