Jump to content

TextformatterImageInterceptor


Martijn Geerts
 Share

Recommended Posts

  • 5 months later...

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.

Link to comment
Share on other sites

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 by Martijn Geerts
  • Like 1
Link to comment
Share on other sites

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! :)

  • Like 1
Link to comment
Share on other sites

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/

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • 9 months later...

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?

Link to comment
Share on other sites

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. :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • 7 months later...

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...