Portfolio Link Area

Hi there,

I’m using Perth theme and having a trouble with portfolio.
I would like to change the area of link in portfolio. As a default, the link area is only the title of the project appears on the picture, but I want to make the picture itself a link without the hover title. Is it possible?

Hello there,

Thank you for reaching out to us here. Yes, it is possible to achieve by adding some jQuery code.

  1. Install and activate the Header and Footer Scripts plugin
  2. Go To Settings > Header and Footer Scripts panel
  3. Paste the following code into the provided “Scripts in footer:” box

<script type="text/javascript">
(function($){

    if( $('.projects-area').length ){

      $('.project-item').each(function(){

        var link = $(this).find('a').attr('href');

        $(this).wrapInner('<a href="'+link+'"></a>');
        
      });
    
    }
    

})(jQuery);
</script>

  1. Save settings

You would need to clear your web browser’s cache before reloading your site to see the code takes affect.

Regards,
Kharis

Thank you, it works!

I’m looking to do something similar… I would like the Title to be displayed, the picture to be the hover and of course either link to the individual project page.

Is this possible please?

Hello Dwain,

So you want the title to always be displayed even before it gets hovered? Please advise.

Regards,
Kharis

Yes please. Then the featured image show for the hover. :slight_smile:

Hello there,

So sorry for the delay.

In order to achieve such that objective, could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.project-title{
	-webkit-transform: scale(1);
	transform: scale(1);  
}

.project-item img{
	-webkit-transform: scale(0);
	transform: scale(0);    
	-webkit-transition: all 0.5s;
	transition: all 0.5s;	  
}

.project-item:hover img{
	-webkit-transform: scale(1);
	transform: scale(1);
}

Regards,
Kharis

Thank you, that sort of works. The text is there, the image appears for the hover, but the link to the project page has gone.

Have you tried to do these steps https://athemes.com/forums/topic/portfolio-link-area/#post-549479? Please confirm.

Regards,
Kharis

Sorry I had removed that footer code. Adding it back and the links work again :slight_smile: Thank you.

I’ve got 6 projects… is there a way to centre them? I’ve tried the centre row content but it doesn’t work.

I’ve got 4 projects in the first line and 2 on the second line but they are aligned to the left.

Hello there,

In order to achieve that objective, could you please try to do the following?

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

  'use strict'

  if( $('.projects-area').length ){

    var getElem = $('.projects-area .project-item:last-child');
    var ln = getElem.outerWidth()-1;
  
    $(window).on('load resize', function() {

      if ( matchMedia( 'only screen and (min-width: 768px)' ).matches ) { 
       
        getElem.css({
          'left': ln*2
        });

        getElem.prev().css({
          'left': ln
        });
        
      }  

    });

  }

})(jQuery);    

  1. Update

Regards,
Kharis

Perfect, thank you very much.

No problem. Just go easy on it.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis