How to hack core or hook? to add class='InputfieldFileLink' to inserted images that link to larger versions

Peter Falkenberg Brown · January 3, 2014

Dear Ryan and All,

As I mentioned in a Wish-list post:

http://processwire.com/talk/topic/5235-simple-clear-notes-and-method-to-use-admin-type-field-inputs-on-frontend-via-api/?p=50521

I've gotten to the point where I'm getting front end images to use the Fancybox popup *if* the <a hrefs> that link to the images have the "class='InputfieldFileLink'" code included.

However, rather than edit those links by hand, via the HTML icon in TinyMCE, which is a major pain, can you recommend a place in the PW core where that code could be inserted into the hrefs when a person adds an image in the body text, with the checkbox ticked off for linking to a larger image?

Or maybe it would work via a hook?

This is beyond my expertise at the moment, but it would be really great to implement this for our online magazine, so that every linked image ends up using Fancybox by default.

Hoping for a genius solution....

Peter

Martijn Geerts · January 3, 2014

You could solve this with javascript/jQuery.

<script>
  // document ready
  $(function(){
    // add class InputfieldFileLink, to every href that links to an image.
    $("a[href$='.jpg'], a[href$='.gif'], a[href$='.png']").addClass('InputfieldFileLink');

    $(".InputfieldFileLink").whatEverLightBoxYouLike();
  });
</script>

(extended the post)

Edited January 3, 2014 by Martijn Geerts

teppo · January 3, 2014

Slight variation to what Martijn suggested above, you may want to make sure that only local images are affected:

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

Martijn Geerts · January 3, 2014

I like yours better Teppo, thanks !

Peter Falkenberg Brown · January 3, 2014

Dear Martijn and Teppo,

I think this solution is brilliant and creative!

Now I just have to get it to work. My Javascript is weak.

I added the script snippet to my <head> area, minus this line:

$(".InputfieldFileLink").whatEverLightBoxYouLike();

It didn't change anything. Do I need the line above, and how would I edit that for Fancybox?

Because, as it stands now, if the class is added manually, the Fancybox popups work.

This is what I have:

<script type="text/javascript" src="<?php echo $template_url?>scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<?php echo $template_url?>scripts/main.js"></script>

<link type='text/css' href='/wire/modules/Jquery/JqueryFancybox/JqueryFancybox.css?v=126' rel='stylesheet' />

<script type='text/javascript' src='/wire/modules/Jquery/JqueryCore/JqueryCore.js?v=183'></script>
<script type='text/javascript' src='/wire/modules/Jquery/JqueryFancybox/JqueryFancybox.js?v=126'></script>
<script type='text/javascript' src='/wire/modules/Inputfield/InputfieldImage/InputfieldImage.js?v=100'></script>

<!--
For the Fancybox to work, the hrefs that link to images need this class:
<a class='InputfieldFileLink' href='xyz.jpg'>
-->

<script>
  // document ready
  $(function(){
    // add class InputfieldFileLink, to every href that links to an image.
    $("a[href$='.jpg'], a[href$='.gif'], a[href$='.png']").addClass('InputfieldFileLink');

    // $('a[href*="/assets/files/"]:has(img)').addClass('InputfieldFileLink');
  });
</script>

I tried both variations of the addClass line, but each time when I refreshed the page,

the popup didn't work, and when I looked at the source, the class wasn't in the image links.

Best regards,

Peter

teppo · January 3, 2014

Peter: most likely issue is that "inputfieldFileLink" trick is done at InputfieldImage.js, so it happens before you add the classes and thus won't find anything. Move the custom script block (one containing .addClass()) before InputfieldImage.js and this should work better.

Also, I'm guessing that you viewed source via browsers "View page source" tool? If so, that won't take any JS modifications into account -- make sure you use native dev tools or something like Firebug when debugging JavaScript issues.

Peter Falkenberg Brown · January 3, 2014

Dear Teppo,

I moved the block before the other .js files, but it still didn't work.

I viewed the source with the Webdeveloper / View Generated Source, in Firebox.

Peter

teppo · January 3, 2014

Peter: just to make sure, was that script block before InputfieldImage.js but after jQuery.js? Just checking since you mentioned that you moved it before "other" files..

Any chance that you could put this somewhere we can see it in action? That would be very helpful.

Peter Falkenberg Brown · January 3, 2014

Dear Teppo,

The link is:

http://significatojournal.com/help-the-world/freedom-human-rights/help-to-end-the-unbearable-evil-of-modern-slavery/

I moved the code block just before the inputimagefield.js, and reloaded, but no go...

Thanks SO much for your help. Of course, this will create a solution for everyone who wants to use the Fancybox system.

Peter

Martijn Geerts · January 3, 2014

I think it's bad practice to depend on $modules->get('JqueryFancybox'). Now you're depending on ryan's updates.

( new versions will use MagnificPopup, so probably this stops working after a while )

Next, jQuery is now loaded twice. First is the old one 1.4.2 that came with the default install. ( I think )

Better to not use Fancybox anymore. It's old and depending on old jQuery versions, relying on $.browser which is deprecated for a long time.

Oké, to work:

01. Remove your $modules->get('JqueryFancybox') call.

02. revove the old jQuery 1.4.2. link.

03. Grab a new version jQuery and make sure that it is loaded first before all other scripts.

04. Take a look at other lightbox scripts. I do like magnific popup (instructions)

if all scripts are loaded:

$(function() {
  // Teppo's add class trick 
  $('a[href*="/assets/files/"]:has(img)').addClass('InputfieldFileLink')
  $('.InputfieldFileLink').magnificPopup({type:'image'});
});

Peter Falkenberg Brown · January 3, 2014

Dear Martijn,

Thank you! I really appreciate everyone's help.

I shall follow your advice and implement the above, and report back.

Best regards,

Peter

Peter Falkenberg Brown · January 3, 2014

Dear Martijn and Teppo,

I've added a new jquery file and the Magnific files.

I've played around with the order of the files, testing in different ways, but it still doesn't work.

Could you have a look at the link?

http://significatojournal.com/help-the-world/freedom-human-rights/help-to-end-the-unbearable-evil-of-modern-slavery/

I'm probably missing something.

Thanks!

Peter

Peter Falkenberg Brown · January 4, 2014

Dear Martijn and Teppo,

Aha! I was caught by the Evil Cache Monster. I had turned on caching, and even when I cleared my browser cache, and reloaded the page, it wasn't working because -- silly me -- it was still reading the old page, with the old header. Sigh.

So, now, it Works!! You guys are great! Brilliant, Creative, and well, Great.

This is a much better solution than a hook, or a script to try to insert a class in the hrefs at run time (which I tried, ugh).

Now I just have to tweak the Magnific settings and I'm rocking and rolling. Thank you both very much, once again.
To review, with your input, perhaps, this is my final code:

<script type="text/javascript" src="<?php echo $template_url?>scripts/jquery-1.10.2.min.js"></script>

<link rel="stylesheet" href="<?php echo $template_url?>styles/magnific-popup.css">
<script src="<?php echo $template_url?>scripts/jquery.magnific-popup.min.js"></script>

<script>
$(function() {
  $('a[href*="/assets/files/"]:has(img)').addClass('sj_image_popup')
  $('.sj_image_popup').magnificPopup({type:'image'});
});
</script>

So as to not confuse things, I changed the class name from 'InputfieldFileLink', since this code now has nothing to do with ProcessWire's classes (correct me if I'm wrong).

Peter

Peter Falkenberg Brown · January 4, 2014

Dear Martijn and Teppo,

Here's one more question. I got the Magnific function working, but I've been scouring the docs and Google, and I haven't figured out how to grab the image description (the one that PW stores) and display it as a caption. I've tried a number of things, to no avail. The images are showing the description in the alt field, however.

This is my code, at this point, without any caption code.

<script>
$(function() {
  $('a[href*="/assets/files/"]:has(img)').addClass('sj_image_popup')
  $('.sj_image_popup').magnificPopup({
  type: 'image',
  closeOnContentClick: true,
  });
});
</script>

Any thoughts on that?

Thanks!

Peter

Martijn Geerts · January 4, 2014

That's great Peter !

Don't forget the ; after .addClass('sj_image_popup');

And, please remove the last comma closeOnContentClick: true, (Internet Explorer doesn't like it)

Martijn Geerts · January 4, 2014

Oops, didn't read your post well enough. (to sleepy for that tiny MS laptop).

<script>
	$(function() {
		// add Classname
		$('a[href*="/assets/files/"]:has(img)').addClass('sj_image_popup');
		
		// initialize magnific popup
		$('.sj_image_popup').magnificPopup({
			type: 'image',
			closeOnContentClick: true,
			image: {
				verticalFit: true,
				titleSrc: function(item) {
					return item.el.find("img").attr("alt");
				}
			}
		});
	});
</script>

Peter Falkenberg Brown · January 4, 2014

Dear Martijn,

Thank you! I was almost there with my code. I tried the titleSrc: function(...), but I didn't put it inside the

image: {} block.

It is now working like a charm!

Success, and problem solved.

Thanks again!

Peter

Martijn Geerts · January 4, 2014

Great ! Glad it's solved.

Sign In

How to hack core or hook? to add class='InputfieldFileLink' to inserted images that link to larger versions

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members