How to LINK the image of the feature box

Support
#1

Hello, how are you?

I stripped the feature box to nothing more then n image (rond, 200px) and a smaal title underneath.
I would like that the image (a profile picture) is clickable and links to another page. Now only linktext is clickable but it is small and I don’t like the position.

So is there a way to make the image or the featureboxframe clickable?

Thanks.

#2

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#3

Oh Thanks, I thought I already added my info.
The URL is: https://qi-biza.com/the-team/

Login will send secured.

#4

Hi There,

Please add this snippet to Cornerstone > JS

jQuery ( function( $ ) {

$('.x-feature-box-text a:last-child').each( function() {

$( this ).parent().parent().parent().find('.x-feature-box-graphic-inner img').wrap( '<a href="' + $( this ).attr('href') + '"></a>' );
$( this ).remove();

} );

 } );

Hope it helps!

#5

Hi,

This works! But Now is only the name of the person visible. If I add content under the title the image is not a link anymore. Can you change the code so the image is a link and I also can add a title AND content.

Thank you.

#6

Hi there,

That code will only work on that specific setup and any change you made could render it useless. Because it’s initially not made like that, that code is simply a snippet.

When you said it’s only the name of the person is visible, should the link remain under it? If yes, please change your code to this

jQuery ( function( $ ) {

$('.x-feature-box-text a').each( function() {

$( this ).parent().parent().parent().find('.x-feature-box-graphic-inner img').wrap( '<a href="' + $( this ).attr('href') + '"></a>' );

} );

 } );

Thanks.

#7

Hi I wanted to piggy back off of this, I implemented both versions of the js, but links are still appearing under the featurebox, and the graphic is not clickable.

#8

Hello There,

Thanks for updating this thread. There is a JS error in your page because you have inserted an incorrect JS code. Please have it updated and use this instead:

</script><script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
<script type="IN/Share" data-url="https://www.chiefprotectiveservices.com/">
jQuery ( function( $ ) {
$('.x-feature-box-text a:last-child').each( function() {
$( this ).parent().parent().parent().find('.x-feature-box-graphic-inner img').wrap( '<a href="' + $( this ).attr('href') + '"></a>' );
$( this ).remove();
} );
} );

Hope this helps. Please let us know how it goes.

#9

I removed the linkedin.js as that wasn’t supposed to be there, but I am still seeing the linked in share at the bottom of the page? Also as a note to other readers, please ignore the that begins the code.

Here is what I’ve tried, but doesn’t work:

Where I set a class ftboxind

function($) {
$('.ftboxind').each(function(){
$(this).find('.x-feature-box-graphic-inner img').wrapAll('<a href="' + $(this).find('.x-feature-box-text > a').attr('href') + '" />');
$(this).find('h4').wrapAll('<a href="' + $(this).find('.x-feature-box-text > a').attr('href') + '" />');
});
})(jQuery);

Still no success.

I’ve also tried:

jQuery ( function( $ ) {
$('.x-feature-box-text a:last-child').each( function() {
$( this ).parent().parent().parent().find('.x-feature-box-graphic-inner img').wrap( '<a href="' + $( this ).attr('href') + '"></a>' );
$( this ).remove();
} );
} );

But no success.

#10

Hello There,

Please have your featured boxes updated and make sure that all the text links are there.

And then update the JS code and use this:

function($) {
	$('.ftboxind').each(function(){
		var url = $(this).find('.x-feature-box-text > a').attr('href');
		$(this).find('.x-feature-box-graphic-inner img').wrapAll('<a href="' + url + '" />');
		$(this).find('h4').wrapAll('<a href="' + url + '" />');
	});
})(jQuery);

We would loved to know if this has work for you. Thank you.

#11

Hi, I am still having no success.

Link text is still below, and the icon is unclickable.

I’m not sure if this has any precedence, but I notice my hexagons look like squares in cornerstone

#12

Hi Daniel,

Please kindly open up a separate thread and give us your website URL/User/Pass and the name of the page that you have the element in to follow up.

I removed the Secure Note that you added here.

Please avoid adding a secure note here with sensitive information as the Secure Note is visible to the original poster of the thread and you are not the original poster.

Than you.