TextformatterImageInterceptor

[Martijn Geerts]

Fixed a bug where ImageInterceptor failed to recognize images in some circumstances.

When images are not in the first imagefield found in the page template, it fails to load.

This is fixed with the latest update.

also pushed version number.

[Martijn Geerts]

Adrian added support for FieldtypeCropImage. Big thanks !

[GuruMeditation]

Hi,

Is there any easy way to add in an ID tag? I'm trying to use Fancybox with this module, and I can't find a way to automatically add in an ID tag.

I'm looking for an output along the lines of the following.

<a class='th' id='single_1' href=''><img src='' alt='' /></a>

And for reference, here's the Fancybox code.

<script type="text/javascript">
    $(document).ready(function() {
      $("#single_1").fancybox({
            openEffect  : 'elastic',
            closeEffect : 'elastic',

            helpers : {
              title : {
                type : null
              },
              overlay : {
                locked : false
              }
            }
      });
    });
</script>

Thanks.

[Martijn Geerts]

ID's are not meant to be used like that. 

Better to assign a class if the link has an image & then call the jQuery plug-in.

$(function () {

	$('a[href*="/assets/files/"]:has(img)').addClass('fancy');
	
	$(".fancy").fancybox({
            openEffect  : 'elastic',
            closeEffect : 'elastic',
			...
			..
			..

credits to Teppo for the $('a[href*=/assets/files/]:has(img)')

Edited March 25, 2014 by Martijn Geerts

[Joss]

You can add just about anything with jquery

So I tend to use this

$('.blog img').closest("a").addClass("fancybox ").attr('rel', 'group');

This looks at a container div with the class .blog (which is worthwhile so you only apply this where you want!)

and then looks at something with an img tag and then goes to the closest a tag (the one wrapper round it) and adds a class and an attribute

Okay, so martin has done it the other way up to me!

[GuruMeditation]

Thank you both.

I copied the ID method straight from the Fancybox examples, so I assumed it was correct.

I'll have a play with your suggestions, although JQuery is foreign to me.

[Joss]

As fancybox is a jquery plugin, it is nice to stick with the same system.

Look through the jquery docs for things like addClass and so on - very simple stuff.

By the way, the modern version of Fancybox is quite restricted when it comes to licencing - it is free to use on non-commercial only,  http://sites.fastspring.com/fancyapps/product/store

However, Colorbox is definitely free!

http://www.jacklmoore.com/colorbox/

[GuruMeditation]

Thanks Joss. I have never really looked into JQ, but wow, I like what I see.

I popped the following code in my footer, and it works perfectly. Nice thumbnails and a slick popup image.

  <script type="text/javascript">
    $(document).ready(function() {

      $('a[href*="/assets/files/"]:has(img)').addClass('th single_1');

      $(".single_1").fancybox({
            openEffect  : 'elastic',
            closeEffect : 'elastic',

            helpers : {
              title : {
                type : null
              },
              overlay : {
                locked : false
              }
            }
      });
    });
  </script>

BTW, thanks Martijn for creating this, it's great.

[Joss]

HI  Martijn 

When I have debug on, I am getting this coming up on the front end:

Notice: Undefined index: align in /public_html/site/modules/TextformatterImageInterceptor/TextformatterImageInterceptor.module on line 381

and

Notice: Undefined index: align in /public_html/site/modules/TextformatterImageInterceptor/TextformatterImageInterceptor.module on line 388

Any thoughts?

[Martijn Geerts]

Hi Joss, the notice is fixed. (you could update the module)

Thanks

[Joss]

Ta much!

[Joss]

HI  Martijn

Just noticed that the caption only works if the Description is set within the actual image field. So, if it is not, and the description is added when you insert the image, then that is not being added as alt text and is not therefore being picked up by the module.

I am a bit confused as to whether this is a problem with the module or the CKeditor image plugin.

[Martijn Geerts]

It's a decision I made after a similar question a year ago. It's rare that I use images in RTE ( can't even remember a project this year where I did ) and I always point editors that they should fill in the description of the image field. The problem with alt text in the RTE is that the text is not API query-able and you don't have an visiual indicater that the alt text is provided or not.

What I / you could do is make a note on github, for defaulting to image description, when not provided, go for RTE alt.

[Joss]

Will do

I am putting together a fairly interesting blog, construction wise, so it uses the RTE more than I would on a normal website.

Also, I am making heavy use of Schema.org so that is complicating things alot!

[Robin S]

Nice module!

A feature request: add an option for auto-linking images to a larger version of the same image, for use in lightbox enlargements.

The core pwimage plugin for CKEditor allows for linking to the original image but often the original image is much larger than is needed, and I'd rather specify the enlargement settings myself than leave it to site editors.

[Martijn Geerts]

I'm not keen to do to much for this module, simply because I do not use it my self anymore. Haven't even been in a situation where I wanted to have an image in a text field. I f someone wants to take the lead on this module don't hesitate to ask to take it over from me. 

About your question: When you set the max image width for uploaded images in the image settings it'll take this max width. 

[Robin S]

Okay, I understand. My PHP skills are not fantastic but I expect that I could use your module as a guide to creating my own textformatter. If I can get a class on images in the RTE then I'll see if I can work out a textformatter that generates image markup based on class.

When you set the max image width for uploaded images in the image settings it'll take this max width. 

That's true, but it seems like a drastic step to throw away the original image resolution to achieve a particular size for frontend use. If a larger size is ever needed you no longer have the original image.

[Martijn Geerts]

If I can get a class on images in the RTE then I'll see if I can work out a textformatter that generates image markup based on class.

It's in that module, the URL of the image is abstracted and from there pointed back to the page image. There are a few pitfalls:

1. The image doesn't have to be uploaded on the current Page. (You need to go back to the page from the URL)
2. The image can be single or array. (Could be solved by setting OutputFormatting to false on the page where you get the image from and set it back afterwards )

Other possible pitfalls: cropped images, didn't test it then because those options were not there.