Jump to content

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


Recommended Posts

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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'});
});
  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>

  • Like 3
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

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...