Add option to link image to a image style preset

Hi, I am excited by Insert module, and Insert w/ link to original would be very useful, especially in combination with Lightbox2 and similar modules, so this is my 5 cents for this feature.

Until Insert does this, I modified imagecache-insert-image.tpl.php to do it for me:

<a href="/<?php print $filepath ?>"<?php print $class ? ' class="' . $class . '"' : '' ?> title="__description__"><img src="<?php print $url ?>" alt="__alt__" title="__title__" class="imagecache-<?php print $preset_name ?><?php print $class ? ' ' . $class : '' ?>" /></a>

It's not configurable (like the CCK example image), but it's easier for me to delete what I don't want than to add what's missing.

Ace. This is one of my gripes with Insert, the lack of linking to the original image on the fly. It'd be nice if Insert did come with this feature to begin with (it makes logical sense), but this should do for now.

Gonna give it a go.

Thx!

Just a note that you should "hack" Insert to do this, just copy the theme function to your template.php file and make the change there instead.

Thanks for this. I was coming to the queue to find out if there was a way to add another option to the dropdown but this works perfectly.

By the way, it's a template file, not a straight theme function, so just copy imagecache-insert-image.tpl.php to your theme and modify as needed. This is what I did with mine:

<!-- BEGIN INSERTED IMAGE -->
<a href="/<?php print $filepath ?>" rel="lightbox"><img src="<?php print $url ?>" alt="__alt__" title="__title__" class="imagecache-<?php print $preset_name ?><?php print $class ? ' ' . $class : '' ?> inline-image-left" /></a>
<!-- END INSERTED IMAGE -->

The HTML comments helps set it apart from the rest of the text when you're adding / editing the node and is not visible when viewing the node. I also added an extra class at the end so I could style it. I'm making a style for inline-image-right as well so all that's needed is to change the word.

Michelle

Subscribing

Thanks guys, just what I was looking for! I tried to make it work with Thickbox, but couldn't, so I ended up switching over to the lightbox2 module, which is also quite nice.

The Maximum image insert width under Insert module settings doesn't work anymore, and I also had to make a Imagecache preset, with 1024x768 and use that for Default insert style.

Remember to Flush all caches to make Drupal see the new imagecache-insert-image.tpl.php in your theme folder.

hey,
i also need this function. I entered the code of post nr. 2 in the imagechage-inster-image file but now I dont get another drop down option for choosing how an image is displayed in the body. how do I make it work that the image is linked to the origional file then? thanks

/7edit: in addition I would need to choose for which presets of imagechage it would lik to the origional picture and for which not. is that possible?

I mean the very best would be that you just have another option with "Link to the origional" while choosing which setting (preset of imagecache) you want to have. I'm not much into programming, so I dont know how much work that is.. would be interesting for many I guess..

Note that it's better to use

<a href="<?php print base_path().$filepath 

rather than

<a href="/<?php print $filepath 

if your website is not at the top of your webdir. But anyway, having this as a standard imagecache style for insert would be awesome.

Thanks for the correction, landry. My site is always at the top level so I forget about base_path().

Michelle

maybe you can tell me if its planned to integrate it in the insert core module. I'm not so good with code, so maybe you can tell me if you want to integrate it within the next time. thanks :)

now with the change it works for me. for the future it would be great to have a choice about linking to the orgional or not. myself is helped, but it would be a great feature.

I used Michell's code:

<a href="<?php print base_path().$filepath ?>" rel="lightbox">
<img src="<?php print $url ?>" alt="__alt__" title="__title__" class="imagecache-<?php print $preset_name ?><?php print $class ? ' ' . $class : '' ?> inline-image-left" />
</a>

added to imagecache-insert-image.tpl.php instead original
works ok. But it links to the same image not to original one...

<a href="/sites/default/files/imagecache/thumbnail/node-images/mi.jpg" rel="lightbox">
<img src="http://mysite.localhost/sites/default/files/imagecache/thumbnail/node-images/mi.jpg" alt="" title="" class="imagecache-thumbnail inline-image-left" />
</a>

If I'm understanding it right, a change to Insert 6.x-1.0-beta3 (includes/imagecache.inc, line 35) requires a change to this hack. Replace $filepath with $item['filepath']. So my response above (#2) becomes

<a href="<?php print base_path().$item['filepath'] ?>"<?php print $class ? ' class="' . $class . '"' : '' ?> title="__description__"><img src="<?php print $url ?>" alt="__alt__" title="__title__" class="imagecache-<?php print $preset_name ?><?php print $class ? ' ' . $class : '' ?>" /></a>

and it works for me again.

Yes mikec. It works using your code. Also I Just added rel="lightbox" to code to use Lightbox.
Thanks

Nice, but i still have some Problems with this Solution:

a) I don't wanna link to the Original File, i wanna link to another Preset of Imagecache
b) Each Node Type has different Presets of Imagecache

so, what i really need is a possibility to see, in which Node Type Insert is used, so that i can decide which ImageCache Preset i have to use.

Is there a way or any PHP Variable that tells me, which Content Type is the one that i am just creating !?

Regards,

Guido

To summarize the above:

A content type's File field where ImageField is used, the user should have Insert options to select a an ImageCache preset wrapped in a link to another ImageCache preset.

Example:

ImageCache Presets:

Thumbnail

Preview

Options available to ImageField:

Link to Thumbnail

Link to Preview

Link to Original File

Thumbnail

Preview

Original image

Thumbnail linked to Preview

Thumbnail linked to Original image

Preview linked to Thumbnail

Preview linked to Original image

Original image linked to Thumbnail

Original image linked to Preview

Note: Support for Lightbox 2 is a separate matter.

I'd prefer not to add this. Insert is intended to be simple, while this would turn the Insert drop-down menu into the same mess as the CCK formatters options. This literally makes n^2 options available, where n is the number of presets. Considering sites commonly have 10+ presets, that makes well over a hundred options.

+1 for simple. I use Insert for end users as well as myself and they'll get lost with too many options.

Michelle

Well, it doesn't have to be that complicated. The menus could be separated so that options are only visible once you've made the first choice.

The example above is just mimicking the kinds of options you might get from Views while referencing a CCK Image field with ImageCache presets. And you're right, it would make n options available. It's a bit ugly from a UX standpoint, but it'd be simpler than some kind of ajax or jquery selection interface, suggested by #21.

As an alternative, what about adding this feature as a separate select box? So, the interface looks like this:

Drag handle - Image - Style: (Select box to choose which file or ImageCache preset to display) - Link: (Select box to choose which file or ImageCache preset to link to) - Insert button

When I shake Inserts inserted code with the wrong encoding for example <a class = "highslide_formatter_default highslide" href = "/% 3Cimg% 20src% 3D% 22http% 3A /% 252F.... %22%20alt%3D%22%22%20title%3D%22%22%20%20class%3D%22imagecache%20imagecache-highslide_full%20imagecache-default%20imagecache-highslide_full_default%22%20/%3E">
Where to find the error? FCKEditor or Insert. Pleace Help. Thanks You!

I think #22 could be a viable option.... and is something I'd really like to see implemented.

Eric

I need the same thing.
Two Presets (Thumbnail and Preview) and want to insert an image with link

"Thumbnail" linked to "Preview"

Is there anything ongoing here?

Minimum hardcoded solution would be a fixed big Preview IC-Preset in the imagecache-insert-image.tpl.php
So choose the Preset for the inserted picture as it is in the UI and it is automatically linked to the "big" Preset which is hardcoded.

I won't be adding this feature. If interested, please only reopen if you can provide a patch. However I'm still not big on the idea and you can solve the problem easily enough by theming, as noted by several users above.

First: This module is really great. Really simple, really clean. I love it.

I patched it for my proper needs:
Now when selecting "Link to file", you can choose which preset to target (src) and which preset should be displayed (...)

It has not been deeply tested
I just tested it for my needs:
- work with Wysiwyg (tinyMCE)
- work with an imagefield (with unlimited options).

What could be done:
Improve settings so that styles options are not necessarily shared between Style/Display/Target (could be better for a front end).

-- Edit -- please don't use this patch, see the next post

The original file used in #28 was not the correct file, this patch should apply cleanly to the current d7 version of insert (alpha3).

After some testing, the patch in #29 wasn't working correctly all the time either, because $item['uri'] isn't populated on the first upload of an imagefield when using AJAX. This patch checks to see if the value is there, and if not it does the work necessary to get it there.

To summarize, if you want to link the inserted image to the original using the theme subsystem in D7, use this. The patch is against the module itself, but if you create the file image-insert-image.tpl.php in your custom theme and paste this into it, you can not worry about re-applying the patch each time the insert module is updated.

<?php
// $Id$

/**
 * @file
 * Template file for ImageCache content inserted via the Insert module.
 *
 * Available variables:
 * - $item: The complete item being inserted.
 * - $url: The URL to the image.
 * - $class: A set of classes assigned to this image (if any).
 * - $style_name: The Image style being used.
 *
 * Note that ALT and Title fields should not be filled in here, instead they
 * should use placeholders that will be updated through JavaScript when the
 * image is inserted.
 *
 * Available placeholders:
 * - __alt__: The ALT text, intended for use in the <img> tag.
 * - __title__: The Title text, intended for use in the <img> tag.
 * - __description__: A description of the image, sometimes used as a caption.
 */
?>
<?php if (!isset($item['uri'])): ?>
  <?php $item['uri'] = file_load($item['fid'])->uri ?>
<?php endif ?>
<a href="<?php print insert_create_url($item['uri']) ?>">
  <img src="<?php print $url ?>" alt="__alt__" title="__title__" class="image-<?php print $style_name ?><?php print $class ? ' ' . $class : '' ?>" />
</a>

Thanks justintime,

this works very well! The href links to the uploaded image.
How can I link it to some image-cache preset?
I tried this (not working...):

<?php if (!isset($item['uri'])): ?>
  <?php $item['uri'] = file_load('imagecache', $presetname, $item['fid'])->uri ?>
<?php endif ?>

As justintime's solution #30 provided a link to the original image file, I managed to change the code to actually point to a image style preset:

<a href="<?php echo image_style_url('large', $item['uri']) ?>">
  <img src="<?php print $url ?>" alt="__alt__" title="__title__" class="image-<?php print $style_name ?><?php print $class ? ' ' . $class : '' ?>" />
 </a>

The href points to the image created by its style "large".
Maybe this is helpful...

Is this fix going to be released anytime?

I don't believe a solution such as modifying one's theme is appropriate. If a thumbnail with a link to the original image is wanted, then you should get a thumbnail with a link regardless of theme.

The only problem I see here is that, what presets are to be added? For example, we got

• large
• medium
• thumbnail
• etc...

Will all the following need to be added?

• large with link
• medium with link
• thumbnail with link
• etc...

I am scanning through old tickets while working on the module's D8 version. I identify two aspects on this ticket: First, linking to the original image as to initial ticket description. That can be solved quite easily by implementing your own custom template in your backend theme overwriting image-insert-image.tpl.php. Second would be to go one step further and make linking configurable. This, however, would have implications on the module's usability, as pointed out.

With the most recent comment being six years old, I think the track on the D7 module has ended for this ticket. Yet I would like to reconsider it for the module's Dupal 8 version. In D8, one may currently apply a mock image effect on an image style resulting in the inserted image getting linked to the original. Since the original image might be very large in terms of file size, it might be a good thing to have an option that allows linking to some other image style preset. An alternative would be to upgrade the mock image effect to have an option that specifies which image style it should link to.

The attached patch set would implement an option that allows automatically linking the inserted image to the image in another style, including linking to the original image. Instead of multiplying the list of styles, another select box (just like the default style select box) is implemented that contains all styles available for images but not those that are available for generic files as well. This should not be too obtrusive and is probably more usable than the method of using a mock image style which, consequently, would just be removed along as in the patch set.

The change removes the Insert mock effect for image styles and implements a widget option that allows selecting an image style which the image shall link to.

The change also extends the insert_colorbox module config options: The select box to choose an image style that should be used to view colorbox images contains a new option that allows using the widget setting implemented by the change. This allows setting the style colorbox images shall be viewed with per field.