`

代码添加默认的image style

 
阅读更多

 

/**
 * Implements hook_image_default_styles().
 *
 *这里会增加新的图片样式,
 */
function image_example_image_default_styles() {
  //这个函数返回一个数组(image style中的各个样式),
  //key:是机读名称,机读名称的定义是有规范的,为了避免机读名称命名冲突,用模块名开头,例如:‘mymodule_stylename’这种形式定义,由数字,字母和下划线组成(_和-),
  $styles = array();
  $styles['image_example_style'] = array();
  //每个style数组下包含一个effect子数组,effect数组下可以包含多个不同效果
  $styles['image_example_style']['effects'] = array(
    array(
      'name' => 'image_scale',//这个效果会在image_image_effect_info()调用 (核心代码中在 modules/image/image.effects.inc )
      'data' => array( //参数 See image_scale_effect()
        'width' => 100,
        'height' => 100,
        'upscale' => 1,
      ),
      'weight' => 0,
    ),
    // 在这个样式中添加第2个效果
    array(
      'name' => 'image_example_colorize',  //这个效果名会在hook_image_effect_info中处理
      'data' => array(              //这是参数,会传递到callback function中
        'color' => '#FFFF66',
      ),
      'weight' => 1,
    ),
  );
  $styles['image_example_test_style'] = array();
  $styles['image_example_test_style']['effects'] = array(
    array(
      'name' => 'image_scale',
      'data' => array(
        'width' =>150,
        'height' =>150,
        'upscale' => 1,
        ),
      'weight' => 1,
      ),
    );
  return $styles;
}

 保存图片样式

 

 

/**
 * Implements hook_image_style_save().
 *
 * Allows modules to respond to updates to an image style's
 * settings.
 */
function image_example_image_style_save($style) {
  if (isset($style['old_name']) && $style['old_name'] == variable_get('image_example_style_name', '')) {
    variable_set('image_example_style_name', $style['name']);
  }
}

 

/**
 * Implements hook_image_effect_info().
 *
 * 实现你添加的自定义image style的效果
 */
function image_example_image_effect_info() {
  $effects = array();
  $effects['image_example_colorize'] = array
    'label' => t('Colorize'),
    'help' => t('The colorize effect will first remove all color from the source image and then tint the image using the color specified.'),
    'effect callback' => 'image_example_colorize_effect',
    'form callback' => 'image_example_colorize_form',
    'summary theme' => 'image_example_colorize_summary', //会去调用image_example_theme()中image_example_colorize_summary,
  );
  return $effects;
}

 

/**
 * Implements hook_image_style_flush().
 */
function image_example_style_flush($style) {
  // The $style parameter is an image style array.
  cache_clear_all('*', 'image_example', TRUE);
}

 

 

 

/**
 * Implements hook_image_style_delete().
 * @see image_example_style_save()
 */
function image_example_image_style_delete($style) {
  if (isset($style['old_name']) && $style['old_name'] == variable_get('image_example_style_name', '')) {
    variable_set('image_example_style_name', $style['name']);
  }
}

 form callback function

 

function image_example_colorize_form($data) {
  $form = array();
  $form['color'] = array(
    '#type' => 'textfield',
    '#title' => t('Color'),
    '#description' => t('The color to use when colorizing the image. Use web-style hex colors. e.g.) #FF6633.'),
    '#default_value' => isset($data['color']) ? $data['color'] : '',
    '#size' => 7,
    '#max_length' => 7,
    '#required' => TRUE,
  );
  return $form;
}

 effect callback function

function image_example_colorize_effect(&$image, $data) {
  if (!function_exists('imagefilter')) {
    watchdog('image', 'The image %image could not be colorized because the imagefilter() function is not available in this PHP installation.', array('%file' => $image->source));
    return FALSE;
  }
  if ($image->toolkit != 'gd') {
    watchdog('image', 'Image colorize failed on %path. Using non GD toolkit.', array('%path' => $image->source), WATCHDOG_ERROR);
    return FALSE;
  }

  // Convert short #FFF syntax to full #FFFFFF syntax.
  if (strlen($data['color']) == 4) {
    $c = $data['color'];
    $data['color'] = $c[0] . $c[1] . $c[1] . $c[2] . $c[2] . $c[3] . $c[3];
  }
  $data['color'] = hexdec(str_replace('#', '0x', $data['color']));
  $rgb = array();
  for ($i = 16; $i >= 0; $i -= 8) {
    $rgb[] = (($data['color'] >> $i) & 0xFF);
  }
  imagefilter($image->resource, IMG_FILTER_GRAYSCALE);
  imagefilter($image->resource, IMG_FILTER_COLORIZE, $rgb[0], $rgb[1], $rgb[2]);

  return TRUE;
}

 

/**
 * Implements hook_theme().
 */
function image_example_theme() {
  return array(
    'image_example_colorize_summary' => array(   //会去找theme_image_example_colorize_summary()这个函数,做相应的处理
      'variables' => array('data' => NULL),
    ),
    'image_example_image' => array(
      'variables' => array('image' => NULL, 'style' => NULL), //
      'file' => 'image_example.pages.inc',
    ),
  );
}

/**
 * Formats a summary of an image colorize effect.
 *
 * @param $variables
 *   An associative array containing:
 *   - data: The current configuration for this colorize effect.
 */
function theme_image_example_colorize_summary($variables) {
  $data = $variables['data'];
  return t('as color #@color.', array('@color' => $data['color']));
}

 

 

分享到:
评论

相关推荐

    默认图片是灰色鼠标放上去变彩色css效果代码

    在HTML文件中,我们通常通过`<style>`标签或者外部CSS文件来引入CSS代码。 要实现这个效果,我们可以为图片定义两种状态:默认状态和鼠标悬停状态。默认状态下,图片显示为灰色;当鼠标悬停时,图片变为彩色。这...

    图片放大展示代码

    在CSS中,我们可以为`#zoom-image`添加样式规则,比如: ```css #zoom-image { width: 200px; /* 默认大小 */ height: auto; transition: transform 0.3s ease; /* 添加过渡效果 */ } #zoom-image:hover { ...

    CSS style属性大全.rar

    - `background-image`: 添加背景图片,可以是URL、渐变等。 - `background-repeat`: 控制背景图像是否重复。 - `background-position`: 设置背景图像的位置。 - `background-size`: 控制背景图像的大小。 5. **...

    图片滚动代码 鼠标可以控制左右

    // 添加鼠标离开时恢复到默认图片的功能 slider.addEventListener('mouseleave', () => { slider.children[currentImageIndex].style.transform = 'translateX(0)'; }); ``` 4. **优化与扩展**: 为了增加...

    vue图片加载与显示默认图片实例代码

    在`errorLoadImg`函数中,我们添加默认图片的class。 图片加载与显示默认图片的原理 图片加载与显示默认图片的原理是基于图片加载的lifecycles。图片加载过程可以分为三个阶段:加载中、加载成功和加载失败。在加载...

    html2canvas 网页对图片加水印

    因此,使用前需了解其支持的特性,并对代码进行适当的测试和调整。 7. **性能考虑**:由于HTML2Canvas是在客户端进行渲染,对于复杂的页面或大量图片,可能会影响页面性能。因此,对于大型应用,可以考虑使用服务端...

    支持图片的title效果代码

    然而,如果想要在标题上添加图片效果,就需要利用CSS(Cascading Style Sheets)来实现这一创新的功能。本文将深入探讨如何使用CSS创建支持图片的`title`效果代码。 首先,我们需要了解CSS的基本结构和选择器。CSS...

    鼠标滑过图片显示详情特效代码

    这段代码会为每个`.image-container`元素绑定事件监听器,当鼠标滑过图片时,显示对应的`.image-details`,鼠标离开时则隐藏。这样的实现方式简洁高效,易于理解和维护。 为了更进一步提升用户体验,还可以考虑添加...

    CSS鼠标经过图片切换代码.zip

    本压缩包"CSS鼠标经过图片切换代码.zip"提供了一种利用CSS实现的鼠标悬停效果,使得图片在默认状态下仅显示一部分,当鼠标移动到图片上时,图片会完整显示出来。这种效果常用于增加网页的互动性和视觉吸引力。 首先...

    CSS各种属性代码大全

    ### CSS各种属性代码大全 #### 文字属性 在网页设计中,文字的样式与呈现方式对用户体验至关重要。CSS提供了丰富的属性来控制文字的各种外观特性。 - **颜色**: 使用`color`属性来设置文本的颜色,例如:`color: ...

    给表单按钮添加背景图片

    默认情况下,这些按钮是纯文本的,但我们可以利用CSS(层叠样式表)来改变其外观,包括添加背景图片。 1. **CSS基础** CSS是用于控制网页元素样式的关键技术。要给按钮添加背景图片,我们需要使用`background-...

    jQuery卡片式图片轮换代码

    /* 默认隐藏 */ border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .card img { width: 100%; height: auto; } ``` 3. **jQuery代码**:接下来,我们使用jQuery来控制图片的显示和隐藏。可以...

    jQuery实现左右滑动焦点图效果代码

    list-style-type: none; margin: 0; padding: 0; } .slider-items li { display: none; /* 默认隐藏所有图片 */ transition: opacity 0.5s; } ``` 综上所述,通过 jQuery 我们可以轻松地实现左右滑动的焦点图...

    javascript个性相册代码

    6. **函数封装和模块化**:为了提高代码复用性和可维护性,可以将相册的各个功能封装成独立的函数,如`showImage`、`hideImage`、`switchGroup`等。如果进一步采用模块化设计,如使用 Immediately Invoked Function ...

    CSS最常用的样式代码

    `: 使用默认行高。 - 可以通过设置具体的像素值(如`line-height: 1.5em;`)来精确控制行高。 **4. 字体粗细 (`font-weight`):** - `font-weight: bold;`: 设置文本为粗体。 - `font-weight: lighter;`: 设置...

    css图片切换效果代码[不用js].docx

    <div id="image1" class="image-item" style="background-image: url('path/to/image1.jpg');"> <div id="image2" class="image-item" style="background-image: url('path/to/image2.jpg');"> <!-- 添加更多图片...

    图片淡入淡出页面显示

    <img id="image1" src="image1.jpg" style="display:none"> <img id="image2" src="image2.jpg" style="display:none"> ``` 这里我们设置初始样式为`display:none`,使图片默认不显示。 接下来,我们要编写...

    关于网页制作的代码

    默认情况下,你可以使用`border`属性来设定边框的宽度,例如: ```html 图片链接地址" width=200 border=12> ``` 这将创建一个12像素宽的黑色边框。然而,通过结合CSS,我们可以实现更多样化的边框样式,如实线、...

    带缩略图的焦点图JS代码

    bigPic.style.backgroundImage = 'url(' + thumbs[0].src + ')'; for (var i = 0; i ; i++) { thumbs[i].addEventListener('click', function() { changeFocus(this.src, i); }); } ``` `changeFocus`函数负责...

Global site tag (gtag.js) - Google Analytics