enfold read more link in masonry portfolio - Support | Kriesi.at

Viewing 19 posts - 1 through 19 (of 19 total)

Author

Posts
September 21, 2018 at 12:06 pm #1012725

Ink_Eye
Participant

Hi dear Kriesi team!

The threads to this topics are closed already so I started a new one. I used the code from here:

https://kriesi.at/support/topic/read-more-in-masonry-gallery-portoflio/

It worked like a charm, thank you again, Ismael! To show a ‘read more’ button in the masonry portfolio is very user friendly especially for older visitors of the site.

It seems that the code starts working after the page is fully loaded. That causes jumping entry titles in this case. What am I doing wrong?

Best regards,
Thomas

September 21, 2018 at 2:14 pm #1012782

Mike
Moderator

Hey Ink_Eye,
I tried to view the page that you linked to, but it seems to require a login, please provide.

Best regards,
Mike

September 21, 2018 at 4:37 pm #1012828

Ink_Eye
Participant

Hi, sorry! It was in the older thread and I forgot to post it again.

Thanks, Thomas

September 21, 2018 at 11:36 pm #1012942

Mike
Moderator

Hi,
I took a look at your page but I don’t see that the titles are jumping on or with the page load. Please see the screenshot in Private Content area to ensure that I’m looking at the correct element.
I was using Chrome on Windows, which browser are you using?

Best regards,
Mike

September 22, 2018 at 1:09 pm #1013049

Ink_Eye
Participant

Hi Mike,

sorry that’s a bit confusing cause I’m currently working on many aspects of the site.

It’s each portfolio masonry element. I took a video, pls see attachment below.

You can see it on the “team” site for example.

Best regards,
Thomas

September 22, 2018 at 8:52 pm #1013135
Mike
Moderator
Hi,
Thanks for the video, I do see the title moving now. As you assumed the code works after the page is loaded, this is a nature of jQuery. Typically this happens very quickly and you would not see it.
I have tried to think of a solution, and have come up with using “fadein” for the titles so you will not see the jQuery action.
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS:
```
#top.page-id-414 .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content * {
animation: fadein 1.6s !important; 
}
@keyframes fadein{
    0% { opacity:0; }
    99% { opacity:0; }
    100% { opacity:1; }
}
```
This is designed for the team page, but if you would like to try it with other pages, just remove the “.page-id-414” part of the code. You can also try adjusting the “fadein 1.6s” to a different number as needed.

Best regards,
Mike
September 24, 2018 at 9:42 am #1013526

Ink_Eye
Participant

Hi Mike,

thank you for your time and ideas. I uploaded a new video. With this code I think, that the same happens with the “read more” buttons.

Maybe there is a solution in the positioning of the titles itself?

Best regards, Thomas

September 24, 2018 at 5:39 pm #1013726

Ink_Eye
Participant

Hi dear Kriesi team,

something strange appeared. Please take a look at the attachment. Any ideas? I do not know where this comes from.

Thank you!

Best regards, Thomas

September 25, 2018 at 5:06 am #1013971

Mike
Moderator

Hi,
It looks like your function is having a issue with that page, I tried to take a look but I couldn’t find that page please include a link to it.
As I checked your other pages, it seemed as all of the others are working fine, is this correct?

Best regards,
Mike

September 25, 2018 at 7:53 am #1014030

Ink_Eye
Participant

Hi,

it seems to appear on many masonry portfolio item pages. Pls take a look at the attached links.

Best regards, Thomas

September 25, 2018 at 3:31 pm #1014235

Victoria
Inactive Moderator

Hi Thomas,

Best regards,
Victoria

September 25, 2018 at 5:45 pm #1014325

Ink_Eye
Participant

Hi Victoria,

excuse me, I do not understand what that means. All I did with Ismael’s code was adding the ‘avia-button’ class to the script. So removing this class would solve it?

Thank you!

Best regards,
Thomas

September 25, 2018 at 7:46 pm #1014435

Victoria
Inactive Moderator

Hi Ink_Eye,

Do you still have a link to the thread where Ismael gave you that code?

Best regards,
Victoria

September 26, 2018 at 7:50 am #1014567

Ink_Eye
Participant

Hi Victoria,
yes!
https://kriesi.at/support/topic/read-more-in-masonry-gallery-portoflio/

Best regards, Thomas

September 26, 2018 at 10:05 am #1014626
Dude
Participant
Hi,

I adjusted the code a bit and replaced it with:
```
// masonry read more
function ava_custom_script_mod(){
?>
<script>
(function($){
  $(window).on('av-height-change', function() {
    $('.av-caption-style-overlay').each(function() {
      var more = $(this).find('.av-masonry-read-more');
      var cont = $(this).find('.av-masonry-entry-title');
  
      if( more.length == 1 )
	  { 
		  cont.css("opacity", "1");
		  return;
	  }
		
      $('<div class="av-masonry-read-more avia-button">mehr erfahren</div>').insertAfter(cont);
		cont.css("opacity", "1");
    });
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_mod');
```
The title is now hidden by default (I used this css code to hide it):
```
#top .av-caption-style-overlay .av-masonry-entry .av-masonry-entry-title{
opacity:0;
}
```
and as soon as the javascript is loaded it will be displayed.

Best regards,
Peter
September 26, 2018 at 11:01 am #1014655

Ink_Eye
Participant

Hey Dude,

thank you! To display them with that sort of delay seems to be a good workaround like Mike did before. I tested the code in the functions.php file of the theme and in the functions.php file of the child theme. Unfortunately it does not work on my end. The code seems to apply because I changed “mehr erfahren” to another word to test if there is some browser caching left. There was not. What do I do wrong?

Best regards,
Thomas

September 26, 2018 at 2:59 pm #1014764

Dude
Participant

Hi,

There was some leftover code in the quick css field (css animation which is not required). I removed it now. Please clear the browser cache and try it again.

Best regards,
Peter

September 26, 2018 at 4:09 pm #1014829

Ink_Eye
Participant

Hi Dude,

thank you! I just added a transition to it and it looks very nice!

Thank you.

Best regards,
Thomas

September 26, 2018 at 6:14 pm #1014905

Jordan Shannon
Inactive Moderator

Hi,

I’m glad you were able to get this resolved. If you need additional help, please let us know here in the forums.

Best regards,
Jordan Shannon
Author

Posts

Viewing 19 posts - 1 through 19 (of 19 total)

The topic ‘enfold read more link in masonry portfolio’ is closed to new replies.