Creating and applying image (or other file) styles is non-intuitive

I am a little confused by your terminology.
Did you add a field of type "Image" known as an imagefield, or did you add a field of type "Multimedia asset" ?

And imagecache is now called "Image style".

If you only need to display images, I would suggest using a field of type "Image", as it will be much simpler to use your desired Image Style preset, as it can be selected directly in Views.

But if you really need to use multimedia asset field, to be able to display videos or other file types, I think it will involve three steps:

1. selecting a 'Formatter' for your field in Views
2. go to admin/config/media/file-styles to assign an 'Image style' to a 'File style'
3. then go to admin/config/media/types/manage/image/display to assign a 'File style' to a 'Media type'

You'll find that images that are uploaded to imagefields are automatically added to the media library, so will be available in the wysiwyg inline browser button thingimy either way.

Now that image support is finally part of Drupal core, I'll be using it wherever possible, and saving multimedia till it's absolutely necessary, especially with Media module being so new.

Yeah, this is something we've been really concerned with, but don't know how to provide a better user experience yet. Styles is really useful for the abstraction it provides. Because of styles, we can have multimedia galleries and also have flickr images and local images in the same field.

But configuring it impossible for a novice.

My desire is to be able to replace the imagefield widget with the media browser. So that people who want multi-media asset fields can do that, but people who want the simplicity of image or file fields can use the media browser.

Does this sound like a good way to go about it?

Absolutely!

#5 is well worth exploring, but I think this issue, as stated, belongs in the Styles queue, so moving it there.

[Edited to remove an irrelevant section.]

A good first step would adding some basic documentation to the page at http://drupal.org/node/703336. The steps in #2 are maybe a start, but I was unable to get this working.

Here's what I've tried.

General setup

• Enable media and styles_ui modules.
• At admin/config/media/types/manage/image/fields, add a new field, Image (field_image), selecting "Multimedia asset" as the field type.
• At admin/structure/types, create a new content type, Image (image) and add field_image to it.

Creating a custom style

(Trying to follow the steps in #2, above)

• At admin/config/media/image-styles, create a new imagecache preset.
• At http://localhost/seventydraft/admin/config/media/image-styles, create a new file style.
• Edit the newly created file style, attempting to link the new imagecache preset.

Result

• The newly created imagecache preset doesn't appear as an option for selection in configuring the file style.

+1 for me. It's impossible to select the new image style preset

Same problem here. Using drupal 7.0 and styles-7.x-2.0-alpha5

+1 for me as well

I've been looking into this a bit and found I couple of things:

1. there is a new function (function styles_default_presets) with a bunch of code (near line 334 of styles.module) which would have to get user defined presets. This is the function used to build the select form item when configuring the file style. The first problem is that drupal never gets to that bunch of code because of the cache. The only way to get drupal execute that code was by changing to 'true' the default value of the boolean argument 'reset' of this function, so it resets the cache.

2. once drupal executes that code, you will see that it doesn't return any user defined preset, stored in the table 'styles_preset_instances', because it is empty, even I've created a new file style. why is that?

I whish I could be of more help.

I've been digging through this for a chunk of time now was hoping someone might be able to clarify a few things for me in hopes I'll understand this.

To me it seems that there is a disconnect from file styles directly connecting to image styles that have been defined. Based on what I understood when looking over 'styles_default_presets', which loads the options for the presets drop down, and how the presets are defined in 'file_styles_styles_default_presets', it seems that file styles connect to presets that then connect to the image styles.

To illustrate this when creating a new file style you will see 'unlinked_thumbnail' in the preset select. This preset is defined in 'file_styles_styles_default_presets' as follows:

...
'unlinked_thumbnail' => array(
          array(
            'name' => 'image_style',
            'settings' => array(
              'image_style' => 'thumbnail',
            ),
          ),
          array(
            'name' => 'thumbnail',
            'settings' => array(),
          ),
        ),
...

From this it appears the preset specifies what image style to use so the file style is never directly associated with the image style.

This is where I feel there is a disconnect in what the expected interaction is between file styles and image styles. Using the UI you can create a new image style and a new file style but there doesn't appear to be a way to create the necessary preset go-between that would connect the two, thus we are unable to associate the newly created image style with a file style.

I was hoping some one could clarify for me how file styles are intended to relate to image styles, and if the intended structure is (file style)-->(preset)-->(image style) then how one would go about creating the necessary preset to be able to use a newly created image style with a file style.

Thanks!

subscr

subscribe

Subscribe

subscribe

subscribe

Subscribe! This module would be wonderful with functionality like that

Subscribe!
I thought it was supposed to work like the description.

I'm also having a problem with the relationship between File Styles and Image Styles.

I don't have an answer but would like to contribute the following to this thread.

I installed Media Gallery and found that when I go to set the Media Type format in Config > Media > Media types > Image > Manage display > Gallery Thumbnail, etc. the File, Format drop-down menu is missing some styles.

The menu (see My_Menu.jpg) includes my File Styles (see My_FileStyles.jpg), but doesn't include my Image Styles (see My_ImageStyles.jpg). A similarity can be seen between the contents of File and Image Styles (square_thumbnail, thumbnail, medium and large) but are they the same and why are the gallery styles and the style I created (width240px) missing from the drop down menu? I think some link is missing.

On DrupalGardens in Config > Media, File Types aren't listed but Image Files are (see DG_ImageStyles), and the equivalent dropdown menu I refer to above lists 8 File Styles (see DG_Menu.jpg).

Everything works on Drupal Gardens, both on their server and when exported and hosted elsewhere, but it's not the same with a clean D7 build. DG have presumably done something to correct the missing link.

I hope that someone with an understanding of these things can shed some light.

Tony

I'm having the same issues/frustrations than you. I copy what I wrote in another issue with no reply at all, hoping it may be of some use:

I have made some improvements on this, but haven't found a solution yet. We have several related options that can be confusing, correct me if I'm wrong:

• There are image styles in which you can select certain manipulations to image as to configure some presets (it's what was previoulsy known as ImageCache).
• With File styles you can select how will different media (images, audio, video, youtube...) be displayed, accordingly to what you have previously defined in Image Styles.
• Media Styles: you can change how the media file will be displayed. You can choose any of your imagestyles.

That's what I want to achieve
Create a media field that will display whatever media it has (image, video or youtube video) width a specific with of 640px

That's what I did:

1. I edited "large" image style in order to get a width of 640px and left the height blank, allowing to upscale images if needed
2. I edited "large" File Style, and made sure to select "large" for image, videos and "large_video" for youtube.

That's what I got
Although images are displayed as expected, youtube videos have different widths

What am I doing wrong?

I'm having this same issue as well. I'm running 7.0-2.x-dev. I made a large_cropped image style and can't find it in presets drop-down.

Subscribing

Alright I played around with it a little bit (bare in mind I'm quite new to development) and got this hook just to get it working:

function HOOK_styles_default_presets() {
  $file_styles = styles_default_presets('file');

  $image_presets = array();
  foreach (array_keys(image_styles()) as $style_name) {
    $image_presets[$style_name] = array(
      array('name' => 'image_style', 'settings' => array('image_style' => $style_name)),
      array('name' => 'thumbnail', 'settings' => array())
    );
  }
  $file_styles['containers']['image']['presets'] = array_merge($image_presets, $file_styles['containers']['image']['presets']);

  return array(
    'file' => $file_styles
  );
}

I wanted to do it with HOOK_styles_default_presets_alter() and I got the presets to show up but they would reset to the default preset when saved. Maybe someone with more experience knows why...

This is quite the ugly hack and should probably be done properly together with hook_styles_styles() in styles.api.php

Maybe a maintainer could point us in the right direction?

I added some code to allow merging of styles, presets and default preset in the styles_default_presets() hook. It currently allows merging containers and file types so in my opinion it only makes sense to allow merging of everything.

The patch I attached would solve this issue (not in the UI alone) as you could create a simple hook like:

function HOOK_styles_default_presets() {
  $containers = array();
  foreach (array('image', 'default') as $type) {
    $containers[$type] = array();
    $styles = array();
    $presets = array();
    foreach (array_keys(image_styles()) as $style_name) {
      $styles[$style_name] = array(
        'default preset' => $style_name
      );
      $presets[$style_name] = array(
        array(
          'name' => 'image_style',
          'settings' => array(
            'image_style' => $style_name,
          ),
        ),
        array(
          'name' => 'thumbnail',
          'settings' => array(),
        ),
      );
    }
    $containers[$type]['default preset'] = key($styles);
    $containers[$type]['styles'] = $styles;
    $containers[$type]['presets'] = $presets;
  }
  
  return array(
    'file' => array(
      'containers' => $containers
    )
  );
}

And then you can add presets and styles easily to containers. I thought this sounded logical and required minimum code change so maybe this was the original intent?

Oh, didn't really think it through.. with this patch it's impossible to completely override the styles/presets...

I'd love to help out with this module so if I can get some information on how it's intended to extend styles I'll give it my best shot.

I apologize for my sad attempts at fixing this issue hehe... I think I found the actual problem now, I dont know if my fix is correct but this will probably help others understanding the problem.

The issue was that the user-defined presets would reset to the styles default preset as the styles_default_presets_alter hook was run afterwards and therefore the user-defined presets didn't yet exist. My patch might not be the best as it doesnt run the alter hooks last. I also saw that styles_instance is looking for a selected preset that currently never gets set, maybe this should be used instead.

I'm guessing this is same for all alter hooks implemented in the module, I would ask someone with more experience to have a look at this.

Together with the above patch I can now implement an alter hook that adds the image styles (I'm kind of wondering if this is meant to be built into the Styles module or if the module is supposed to be this abstract).

function misc_hooks_styles_default_presets_alter(&$presets) {
  $image_presets = array();
  foreach (array_keys(image_styles()) as $style_name) {
    $image_presets[$style_name] = array(
      array('name' => 'image_style', 'settings' => array('image_style' => $style_name)),
      array('name' => 'thumbnail', 'settings' => array())
    );
  }
  $presets['file']['containers']['image']['presets'] = array_merge($presets['file']['containers']['image']['presets'], $image_presets);
}

subscribing.

That worked out like butter for me.

And for those who - like me- are still in diapers about using custom hooks, are too lazy and/or in a hurry, I suggest using the MyHook module: http://drupal.org/project/myhook

(This presumes you created a custom Image Style already)

1 - Apply oxyc's patches #26 and #28
2- Download install MyHook. Activate.
3 - Got to MyHook Admin UI at /admin/config/development/myhook >> Copy oxyc's code from #28 in the Content of myhook.module making sure you rename the function as myhook_styles_default_presets_alter Leave the rest alone (not because you should, simply because that is all I did and it worked)
4- Clear cache
5 - Now visit the File Style at /media/file-styles/edit/ and the custom Image Style should be listed in the drop down menu of the vertical tabs

Boom, there it is!!

Thanks again oxyc

This really needs to be reviewed by aaron first, I'm not quite sure how he intended it or if this issue is even a bug.
These patches are really quick fixes and will never get commited. I'm still learning Drupal so I'm making a lot of mistakes.

- What the first patch does is allow you to hook in only your own presets on styles created by other modules. Uses HOOK_styles_default_presets()
- The second patch "fixes" an issue where you can't alter already defined styles to include your presets. This way you you can use HOOK_styles_default_presets_alter()

Both of them makes image styles available but in different ways so you only need one.

Another way of adding the styles, without using any patches (maybe the best option for now) is to use this hook described last on this page.

Oh no do not worry, it is clear that this is only at the experimental level....No issues with that, but I simply posted that should anyone without that much experience with hooks could play with it,

Hope so hehe. Thanks for the post, will definitely make it easier for people.

I'm just a tad worried since I couldn't stop committing (prematurely maybe) once I did my first - got hooked I guess. Hopefully it's more helpful than counter productive for aaron.

It was mission critical that I have this working for a new site build, the patches and module code work perfectly for images. I also need custom thumbnail imagecache setting for the other types of media (video specifically). Would a modification of the module (#28) work for setting custom sized video thumbnails?

Hey,
I haven't used any of the other containers but I guess it should work if they are thumbnail image styles.

I think it's alot wiser not using the patch provided in #28 as it will never get commited, instead you can use the hook http://drupal.org/node/1092444 and wait for a proper Styles patch that makes this possible.

A modified version to integrate the presets for video, audio and default would look like this (haven't tested):

function HOOK_styles_default_presets() {
  $file_styles = styles_default_presets('file');

  $image_presets = array();
  foreach (array_keys(image_styles()) as $style_name) {
    $image_presets[$style_name] = array(
      array('name' => 'image_style', 'settings' => array('image_style' => $style_name)),
      array('name' => 'thumbnail', 'settings' => array())
    );
  }
  foreach(array('image', 'video', 'audio', 'default') as $type) {
    $file_styles['containers'][$type]['presets'] = array_merge($image_presets, $file_styles['containers'][$type]['presets']);
  }

  return array(
    'file' => $file_styles
  );
}

If for some reason you have to use the patch from #28 just replace:

$presets['file']['containers']['image']['presets'] = array_merge($presets['file']['containers']['image']['presets'], $image_presets);

with

foreach(array('image', 'video', 'audio', 'default') as $type) {
  $presets['file']['containers'][$type]['presets'] = array_merge($presets['file']['containers'][$type]['presets'], $image_presets);
}

THANKS!!!! It works great, the hook and I reversed the patch from #28. I need to add support for "YouTube", it doesn't inherit the Video type settings (has it's own file style you can choose in views etc), so you can't choose the custom styles, but everything else is working well. I was previously using an older release for youtube media and am now testing the dev version.

If it's just for using images again then all you should have to change is array('image', 'video', 'audio', 'default') into array('image', 'video', 'audio', 'default', 'media_youtube')

Subscribe

subscribe

Oxyc, thanks for giving us a stop-gap implementation of image styles->file styles. It's some pretty essential functionality if you need media module functionality in any way on a site.

Using the hook in http://drupal.org/node/1092444 I'm not getting the image style merge, and Drupal is throwing the errors:

Notice: Undefined index: file in styles_default_presets() (line 355 of .../sites/all/modules/styles/styles.module).
Warning: array_merge() [function.array-merge]: Argument #2 is not an array in custom_styles_default_presets() (line 14 of .../sites/all/modules/custom/custom.module).

Line 14 of custom.module is $file_styles['containers']['image']['presets'] = array_merge($image_presets, $file_styles['containers']['image']['presets']);

Any thoughts?

Can anyone tell me where valid options for the $field_type param string come from? The module gives the example filefield and nodereference, Oxyc's solution which I'm trying to implement gives 'file', although I think there have been code changes that make that invalid as I'm getting no array from calling styles_default_presets('file').

I've been going at this from a couple different directions, playing with Oxyc's hook and trying to append a hard coded style to $file_styles like so:

 function custom_styles_default_presets() {
   $new_styles = array(
       'containers' => array(
         'imagefield' => array(
           'default preset' => 'tester',
           'presets' => array(
             'teststyle' => array(
               'imagecache_preset' => 'teststyle',
             ),
           ),
         ),
       ),
   );
	 
$orig_styles = styles_default_presets('file');
$file_styles = array_merge($new_styles, $orig_styles);

  return array(
    'file' => $file_styles
  ); 

but no luck, because, as I mentioned, there is no array returned from styles_default_presets('file'). If anyone can help me get this working I'll be happy to write/revise documentation to cover it for others.

Sorry for not responding earlier, currently I don't have a computer to test the changes made in the media module so this post is just some thoughts.

- As styles module hasn't been updated the hook should work, as it only uses Styles module functions and according to effulgentias post the updates in media should be a seamless upgrade.
- file is the field type used by the file styles module as well as Media modules file entity (I assume).

@RobW are you using Drupal 6? Looking at your hook I see imagecache used, this has been changed to image_style in D7 and unfortunately I haven't done any tests on D6. Also the container used for images is image and not imagefield.
Assuming you are using D7, have cleared your cache and styles_default_presets('file') still doesn't return anything it seems like file_styles hook hasn't been run yet. I don't really know how module hooks get prioritized in Drupal but I guess this could be the problem.

Here you can see how File Styles attach the presets. What my hook does is basically copying what file_styles_styles_default_preset() returns into the $file_styles variable and merging it with presets generated from image_styles.

Hope this can help you with looking into the issue. I don't know when I'll get back to my laptop to test this myself. Sorry if I confused you further, it's been some time since I've been around the code so I might have missed something.

Oxyc,

Thanks for the reply. I'm heading out for the night, and I'm going to look at your suggestions closer in the morning. But a couple things:

I'm using Drupal 7 - the code in the example is copied almost verbatim from how-to comments in the Styles module. I thought it was odd as well, but assumed it was a machine name/ui name difference. Now I'm thinking it's leftover docs from the 6.x branch.

I was thinking it might have something to do with module priority too, but I know even less than you. Thanks for the starting points, I'll root around some more in this tomorrow and see what I come up with. It might all be moot in a couple of weeks as it seems like Styles won't be a dependency for Media in the future (#1086958: Switch from Media Entity to File Entity).

Looks like I'm following you around the issue queue. I noticed your post in #1126170: How Can I Use Custom Image Styles as Formatters?: is your hook meant to work with Media only after the huge file-entity patch? I may have been using a dev version from before that was committed.

[edit for clarity]

Subscribe

Subscribe

Sub. I would also like to have Media include the Image Styles hook. Is this going to be in future releases? I'd rather not have to patch up the code right now.

Until then.. it's the Image Field for this novice.

Sub

subscribe

The UI issue is fully answered in #1126170-19: How Can I Use Custom Image Styles as Formatters?.

To provide a code-based image style, create a corresponding file style, and link the two, here is working code using the available hooks:

/**
 * Implementation of hook_image_default_styles().
 */
function hook_image_default_styles() {
  $styles = array();

  // Exported image style: medium_large
  $styles['medium_large'] = array(
    'name' => 'medium_large',
    'effects' => array(
      2 => array(
        'label' => 'Scale',
        'help' => 'Scaling will maintain the aspect-ratio of the original image. If only a single dimension is specified, the other dimension will be calculated.',
        'effect callback' => 'image_scale_effect',
        'form callback' => 'image_scale_form',
        'summary theme' => 'image_scale_summary',
        'module' => 'image',
        'name' => 'image_scale',
        'data' => array(
          'width' => '360',
          'height' => '',
          'upscale' => 0,
        ),
        'weight' => '1',
      ),
    ),
  );

  return $styles;
}

/**
 * Implementation of Styles module hook_styles_default_styles().
 */
function hook_styles_default_styles() {
  return array(
    'file' => array(
      'styles' => array(
        'medium_large' => array(
          'label' => 'Medium large',
          'description' => 'A medium large format of the media.',
        ),
      ),
    ),
  );
}

/**
 * Implementation of Styles module hook_styles_default_presets_alter().
 */
function hook_styles_default_presets_alter(&$presets) {
  // Cover the containers defined by file_styles.
  foreach (array('image', 'audio', 'video', 'default') as $type) {
    // Ensure another module hasn't removed the container.
    if (isset($presets['file']['containers'][$type])) {
      $presets['file']['containers'][$type]['styles']['medium_large'] = array(
        'default preset' => 'medium_large',
      );
      $presets['file']['containers'][$type]['presets']['medium_large'] = array(
        array(
          'name' => 'image_style',
          'settings' => array(
            'image_style' => 'medium_large',
          ),
        ),
        array(
          'name' => 'thumbnail',
          'settings' => array(),
        ),
      );
    }
  }
}

Marking this issue fixed as fixes are in place for both UI and code.