add button to portfolio grid

Hey dondela,
Thanks for the link to your site, I see the read more button text in your grid so I guess you want to style it. While I’m not sure how you want to style the button I make these changes to give you an idea.
First I added the button class to your readmore code above like this:

add_filter('avf_portfolio_title', function($title) {
    return $title . "<span class='avia-button readmore'>Weitere Informationen</span>";
}, 10, 1);

and then I added this css to your child theme stylesheet:

#top .avia-button.readmore {
	display: block;
	background-color: #164E86;
	color: #fff;
}

Please see the screenshot in the Private Content area.
I saw that your child theme was broken because it was missing the Template header in the stylesheet:

I fixed this for you.

Best regards,
Mike

Hi,
Thanks for the screenshot and the feedback, first I added this function to your child theme functions.php to make all of the portfolio title & excerpt containers the same height since some of them had more text than others.

function equal_height_portfolio_grid_title_excerpt_container() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
  	$('#top.page-id-48556 #av-sc-portfolio-1 .grid-sort-container').each(function(){  
     var $columns = $('.grid-content',this);
     var maxHeight = Math.max.apply(Math, $columns.map(function(){
         return $(this).height();
     }).get());
     $columns.height(maxHeight);
});
})(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'equal_height_portfolio_grid_title_excerpt_container');

To make the button square and orange I changed the css to this:

#top .avia-button.readmore {
	display: table;
	background-color: #FF8D00;
	color: #fff;
        bottom: 10px;
        position: absolute;
}

and then to place the portfolio button after the excerpt I added this to your child theme functions.php

function portfolio_grid_button_after_excerpt() { ?>
  <script>
(function($){
  $( '#top.page-id-48556 #av-sc-portfolio-1 .grid-entry' ).each(function() {
  $( this ).find( '.avia-button.readmore' ).insertAfter( $(this).find('.grid-entry-excerpt'));
  });
})(jQuery);
</script>
  <?php
}
add_action('wp_footer', 'portfolio_grid_button_after_excerpt');

Please clear your browser cache and check and see the screenshot in the Private Content area.

Best regards,
Mike

Hi,
Thanks for your feedback, I see that moving the button moved it out of the linked area, so I removed the last code snippet and now the button is linked and the previous css still shows the button at the bottom.
So yes this was for the one page, I removed this limitation, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks for the feedback that page didn’t use the same settings as the other pages, since you want it to work on all pages all of the elements will need to use the same settings.
To add more height I added this css:

#av-sc-portfolio-1 .grid-content {
	min-height: 220px;
}

This might seem like a lot of space on some pages, but on other pages when the elements have more content it is just right, please see the screenshot in the Private Content area.

Best regards,
Mike

Hi,
I added this script to your child theme functions.php to get the portfolio page ID and search the portfolio grid entries for matching items and hide them, I tested it on the two pages linked below.

function get_single_portfolio_pageid_and_hide_matching_portfolio_grid_item() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
if ($('body.single-portfolio')){
$("[class*='postid']").each ( function () {
    var elClasses = $( this ).attr ( 'class' ).split ( ' ' );
    for ( var index in elClasses ) {
        if ( elClasses[index].match ( /^postid-\d+$/ ) ) {
            var classNum = elClasses[index].split ( '-' )[1];
            break;
        }
    }
var postentry = ('.post-entry-'+classNum);
$('#av-sc-portfolio-1').find(postentry).css({'display':'none'});
});
}else{}
})(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'get_single_portfolio_pageid_and_hide_matching_portfolio_grid_item');

Best regards,
Mike

Hi,
This is because the pagination reloads the page, see the url in the address bar changes, there is not a way to avoid this.

Best regards,
Mike