Modern Event Calendar - making grid image clickable

[scotbaston]

Hi,

I am hoping you can help please, I am using the Modern Event Calendar plugin on a Pro site (v2.0.4) and I cannot make the image clickable on the grid calendar (clean style). Currently, only the button and the headline clicks through to the event details. i would like to make the image click through to the event details as well.

Ideally, I would like to do this in a way that won’t get overwritten when the next MEC update comes along

I will add further information in the secure note

[nabeel]

Hi there,

Thanks for writing around! Please try adding the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	var grid = $('.mec-event-grid-clean');
	$(grid).find('.mec-event-article').each(function(){
		var event_link = $(this).find('.mec-event-title a').attr('href');
		$(this).find('.mec-event-image img').wrap('<a href="'+ event_link +'"></a>');
	});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[scotbaston]

You Sir, are a genius!

Thank you, that works perfectly

[scotbaston]

The only thing it doesn’t do, is the title link and the button link open the event in modal mode rather than in its own page.

can the code above be modified to do the same please?

[nabeel]

Hi again,

I think with the code that might not be possible but you can try replacing the previous code with the following code:

jQuery(document).ready(function($){
	var grid = $('.mec-event-grid-clean');
	$(grid).find('.mec-event-article').each(function(){
		var event_link = $(this).find('.mec-event-title a').attr('href');
		var event_id = $(this).find('.mec-event-title a').attr('data-event-id');
		$(this).find('.mec-event-image img').wrap('<a href="'+ event_link +'" data-event-id="'+ event_id +'" target="_self"></a>');
	});
});

Hope this helps!

[scotbaston]

Thank you for the response,

I can see why you made the changes you did, but sadly it opens the link as before.

Having said that, I really appreciate the help and at least we have a partial solution… Thank you

[Alaa]

Hi scotbaston,

Let’s try a different approach here, please replace the previous snippet with this one:

jQuery(document).ready(function($){
	var grid = $('.mec-event-grid-clean');
	$(grid).find('.mec-event-article').each(function(){
		var event_link = $(this).find('.mec-event-content a');
		$(this).find('.mec-event-image img').on('click', function() {
			event_link.trigger('click');			
		});
	});
});

Also, please add this CSS code to (X > Options > CSS):

.mec-event-grid-clean .mec-event-image {
    cursor: pointer;
}

Thanks.

[scotbaston]

That went one (or maybe a few steps) beyond my understanding of JS… but it works perfectly!

the image clicks through to the event page, AND it is shown as a popover link the other two event links!

Wonderful! Thank you!

Am I right in reading that when the image is clicked on, it actually clicks the existing a href tag rather than inserting a new one?

[Alaa]

You are right! when the image is clicked it’s actually the Event Title that is triggered.

You are welcome