4

I would like to create a custom content type where the editor can choose his preferred image size.

For example I would have a field_image_style with the three options small/large/huge and in my node template I would like to have an if-clause which then dynamically outputs the node's images (which are provided in another field) in the wanted size.

What's the best way to achieve this? Can someone point me in the right direction?

1
  1. Create the required three image styles at www.yoursite.com/admin/config/media/image-styles; let say you added three image styles with name as small, large, huge

  2. Create your content type

  3. Add the file field

  4. Add another field (machine name as 'field_image_style') of type select with options as key value as small|small, large|large, and huge|huge

  5. In your theme template.php add the following code

    function mytheme_preprocess_node(&$variables) {
      $node = $variables['node'];
      $node->language = isset($node->language) ? $node->language : LANGUAGE_NONE;
      if (!empty($node->field_image_style[$node->language]) {
        // Get image style value, must correspond to image style machine name
        $style = $node->field_image_style[$node->language][0]['value'];
        // First image
        $image = $node->field_images[$node->language][0];
        $variables = array(
          'style_name' => $style,
          'path' => $image['uri'],
          'alt' => $image['alt'],
          'title' => $image['title'],
         );
        $variables['dynamic_image_style'] = theme('image_style',$variables);
      }
    }
    
  6. In your node.tpl.php put this snippet wherever you want to print the image

    <?php if ($dynamic_image_style) print $dynamic_image_style; ?>
    

It will be better to have a separate node template for this content type. In order to do that, copy the node.tpl.php to your theme name it node--YOUR-CONTENT-TYPE.tpl.php, and put this snippet wherever you want to print the image.

  <?php if ($dynamic_image_style) print $dynamic_image_style; ?>
  • Awesome! :) Is it also possible to have a preprocess function just for a certain node type? Like mytheme_preprocess_node--MY-CONTENT-TYPE()? And now I have to look into what the theme() function exactly does since I would like to understand every line of the code. When looking up the theme() function in the drupal documentation it stated that it shouldn't really be used directly? Why? – horace Oct 2 '13 at 7:50
  • true here is the reason you are looking for. – arpitr Oct 2 '13 at 8:28
  • and answer for having preprocess function per content type will be no as there is no theme_node_node_type function by default – arpitr Oct 2 '13 at 8:51
  • A detailed explanation: preprocess function per content type – othermachines Aug 23 '15 at 21:47
  • For an example that alters the style of an existing field (e.g. $content['field_image']) rather than creating a new one, check: drupal.stackexchange.com/a/170743/28700 – othermachines Aug 23 '15 at 21:49
2

Something like this should help achieve that, e.g in a node.tpl.php or assigned to a var in a hook_preprocess_node function:

$node->language = isset($node->language) ? $node->language : LANGUAGE_NONE;
if (!empty($node->field_image_style[$node->language]) {
  // Get image style value, must correspond to image style machine name
  $style = $node->field_image_style[$node->language][0]['value'];
  // First image
  $image = $node->field_images[$node->language][0];
  $variables = array(
    'style_name' => $style,
    'path' => $image['uri'],
    'alt' => $image['alt'],
    'title' => $image['title'],
    );
  print theme('image_style',$variables);
}
  • Thanks! Looks interesting. I will try this tomorrow. Doing this in a hook is the preferred way I guess? Since the template itself shouldn't really contain too much code? – horace Oct 1 '13 at 23:42
2

Imagecache Proportions

This module provides a CCK formatter for imagefields that allows the user to select between three different imagecache presets depending on the proportions of the original image. So you can use this module for altering the display proportions of a image field or similar in the display field screen, in Views, etc.

or

Using Insert module you can choose the image styles during upload.

Insert is a utility that makes inserting images and links to files into text areas or WYSIWYGs much easier. It adds a simple JavaScript-based button to FileField and ImageField widgets. When used with ImageField and ImageCache, images may be inserted into text areas with a specific ImageCache preset.

enter image description here

0

The module Image Style Selector does exactly what you are asking. The site administrator can select the image styles that the content editor can apply to the recently uploaded image.

The screenshot below shows the basic functionality.

The Image Style Selector module provides the functionality to select a predefined image style, which is applied to the (uploaded) image

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.