Date and read more link on portfolio item - Support | Kriesi.at

Tagged: date, portfolio item, read more link

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

Author

Posts
February 3, 2016 at 12:25 pm #577067

jambrikp
Participant

Hi,

How can I put date and read more link to portfolio item?
Please check my mockup

Best regards
Peter

February 5, 2016 at 7:15 am #578310
Ismael
Moderator
Hey Peter!

Thank you for using Enfold.

Please add this in the functions.php file:
```
add_filter('avf_portfolio_extra', 'avf_portfolio_extra_mod', 10, 2);
function avf_portfolio_extra_mod($output, $entry) {
	$output = '<div class="portfolio-new-meta">';
	$output .= '<div class="portfolio-read-more-link"><a href="'.get_permalink($entry->ID).'" class="more-link">'.__('Read more','avia_framework').'<span class="more-link-arrow">  &rarr;</span></a></div>';
	$output .= "<time class='date-container minor-meta updated' $markup>".get_the_time(get_option('date_format'))."</time>";
 	$output .= '</div>';
	return $output;
}
```
Add the style of the “portfolio-new-meta” container in the Quick CSS field.

Best regards,
Ismael
February 7, 2016 at 8:10 pm #579219

jambrikp
Participant

Hey!

Thank you! It’s cool! :)
I have a two little question about this function.
How can I use it only one page (page ID 16) and how can I take meta after the content?

Best regards,
Peter

February 7, 2016 at 8:52 pm #579224
Basilis
Inactive Moderator
Hey!

Pelase try change the code as

add_filter(‘avf_portfolio_extra’, ‘avf_portfolio_extra_mod’, 10, 2);
```
function avf_portfolio_extra_mod($entry,$output) {
if(is_page('16')) {
	$output = '<div class="portfolio-new-meta">';
	$output .= '<div class="portfolio-read-more-link"><a href="'.get_permalink($entry->ID).'" class="more-link">'.__('Read more','avia_framework').'<span class="more-link-arrow">  &rarr;</span></a></div>';
	$output .= "<time class='date-container minor-meta updated' $markup>".get_the_time(get_option('date_format'))."</time>";
 	$output .= '</div>';
	return $output;
}
}
```
let us know if that works properly for you

Cheers!
Basilis
April 14, 2017 at 6:46 pm #777957

fulanoinc
Participant

Hi all,

In this example, how would you account for using this for custom post types. For example, if I had a custom post type for Movies.

Thanks,
Leyden

April 14, 2017 at 7:25 pm #778006

Basilis
Inactive Moderator

Hi!

What exactly do you want to use?
The best case scenario is to actually create a new ticket explaining what yu need, so we can be able to help you out.

Thank you

Cheers!
Basilis

July 4, 2019 at 3:01 pm #1115799

emptykai
Participant

Hello, thanks, that looks good – but the button is over the picture .. How can I get it to the bottom?
BR Kai

July 6, 2019 at 6:59 am #1116158

Rikard
Keymaster

Hi emptykai,

Could you post a link to where we can see the results you are getting please?

Best regards,
Rikard

March 25, 2020 at 1:29 am #1197534

s29ers
Participant

hello

a) i tried the first set of code provided by ismael (except I removed the date and the code class=”more-link-arrow”). It works well. The Read more link is above the portfolio item in the portfolio grid.

however, the modification from basilis changing function avf_portfolio_extra_mod($output,$entry) { ….
to
function avf_portfolio_extra_mod($entry,$output) { …
that is supposed to put the read more link under the excerpt but it doesn’t move it. Can you please advise how to move the link under the excerpt?

b) i have disabled linking from the excerpt to the portfolio page with this code in Quick CSS
/* Disable links from portfolio grid items */
.grid-entry-title.entry-title {
pointer-events:none !important;
}

So now, only the image opens in the light box. That is because I want to use the read more link. However, I *only* want to have a read more link when there is content in the portfolio grid item’s page. For example, the first grid item (Mobile) has something on its portfolio page. The second grid item, Rocket, has no content on its portfolio page which is blank. Therefore, how to only show Read more links for portfolio pages that have content? In this case, Mobile would show a read more link but Rocket would not. If I have to list pages that should have a link by post # manually in the code, that is OK too as there aren’t many.

Credentials are in the private area.

Thank you

March 30, 2020 at 1:46 am #1198971
Ismael
Moderator
Hi,

that is supposed to put the read more link under the excerpt but it doesn’t move it.

That modification is actually the same as the first one. If you want to move the link below the excerpt, you will have to modify the enfold\config-templatebuilder\avia-shortcodes\portfolio\portfolio.php and place the read more link right below these lines starting from 965:
```
 $output .= "<div class='entry-content-wrapper'>";
 $output .= "<div class='grid-entry-excerpt entry-content' $markup>".$excerpt."</div>";
 $output .= '</div>';
```
Best regards,
Ismael
March 30, 2020 at 5:00 pm #1199110

s29ers
Participant

Hi Ismael

Thanks very much I will try that. However, the second part of the problem was how to show the read more link only on specific grid items, i.e. ones where the grid item’s portfolio page has content. If there is a way to show it for specific ones manually in CSS or code, I can do that as there are not many.

Thanks and regards

March 30, 2020 at 8:19 pm #1199190

s29ers
Participant

Hello again Ismael
Sorry, I’m confused, What code exactly do you want to add under the three lines starting at 965?
Thanks

April 2, 2020 at 5:30 am #1199958
Ismael
Moderator
Hi,

Sorry for the delay. You can add this block below the previous lines of code that we mentioned above.
```
if($excerpt) {
$output = '<div class="portfolio-new-meta">';
	$output .= '<div class="portfolio-read-more-link"><a href="'.get_permalink($the_id).'" class="more-link">'.__('Read more','avia_framework').'<span class="more-link-arrow">  &rarr;</span></a></div>';
	$output .= "<time class='date-container minor-meta updated' $markup>".get_the_time(get_option('date_format'))."</time>";
 	$output .= '</div>';
}
```
If you need further help, please open a new thread and post the necessary details in the private field.

Best regards,
Ismael
April 2, 2020 at 7:44 am #1199996
s29ers
Participant
Hi Ismael

NP. Thanks for all your help, but that doesn’t work unfortunately. You can see I have placed the above code at after the 3 lines at line 965.

The only thing that puts up some read more link as you can see on the webpage, is the code I have in the child theme functions.php:

add_filter(‘avf_portfolio_extra’, ‘avf_portfolio_extra_mod’, 10, 2);
function avf_portfolio_extra_mod($output, $entry) {
$output = ‘<div class=”portfolio-new-meta”>’;
$output .= ‘<div class=”portfolio-read-more-link”>ID).'” class=”more-link”>’.__(‘Read more’,’avia_framework’).'<span > →</span></div>’;
$output .= ‘</div>’;
return $output;
}

And, my Quick CSS:

/* Disable links from portfolio grid items */
.grid-entry-title.entry-title {
pointer-events:none !important;
}

disables the links on all excerpts in the portfolio grid.

However, the read more links still open the portfolio item’s page regardless if the portfolio item has content or not. It is NOT the excerpt that is to be checked, it is the grid item’s portfolio page. There will always be an excerpt. BUT if there is no content in the grid item’s portfolio page then there should be no read more link for that grid item.

If it’s possible to fix this I would appreciate it.

Regards
- This reply was modified 4 years, 8 months ago by s29ers.
April 4, 2020 at 2:55 am #1200708
Ismael
Moderator
Hi,

We have added this script in the functions.php file to move the read more link below the excerpt.
```
function ava_script_move_read_more() {
    if ( wp_script_is( 'avia-default', 'registered' ) ) {
        wp_add_inline_script( 'avia-default', "(function($) {
			$('.grid-entry').each(function() {
			var read = $(this).find('.portfolio-new-meta');
			var footer = $(this).find('.entry-footer')
				read.appendTo(footer);
		  });
})(jQuery);" );
    }
 }
 add_action( 'wp_enqueue_scripts', 'ava_script_move_read_more', 9999);
```
You don’t need to modify the portfolio.php file anymore.

Thank you for your patience.

Best regards,
Ismael
April 4, 2020 at 2:58 am #1200709
Ismael
Moderator
Hi,

We have added this script in the functions.php file to move the read more link below the excerpt.
```
function ava_script_move_read_more() {
    if ( wp_script_is( 'avia-default', 'registered' ) ) {
        wp_add_inline_script( 'avia-default', "(function($) {
			$('.grid-entry').each(function() {
			var read = $(this).find('.portfolio-new-meta');
			var footer = $(this).find('.entry-footer')
				read.appendTo(footer);
		  });
})(jQuery);" );
    }
 }
 add_action( 'wp_enqueue_scripts', 'ava_script_move_read_more', 9999);
```
You don’t need to modify the portfolio.php file anymore.

Thank you for your patience.

Best regards,
Ismael
May 1, 2020 at 8:11 am #1208734
s29ers
Participant
Hi Ismael

Thanks very much for all your help. That works.

I have a related question. For another portfolio page, it’s the default setup and I use Quick CSS:

.page-id-14366 .grid-entry-title.entry-title {
pointer-events:none !important;
}

What I want to do is enable pointer events for a specific portfolio grid item and underline its title too using text-decoration: underline, but I can’t figure out how to target it. There are 30+ grid items but only a few have a portfolio single page to link to from the grid and those are the ones I want to do that for.

Best regards
- This reply was modified 4 years, 7 months ago by s29ers.
May 6, 2020 at 1:22 pm #1210328

Yigit
Keymaster

Hi,

Sorry for the late reply!

Could you please post a link to your page? I tried logging in with credentials you provided earlier however login page did not work for me.

Best regards,
Yigit

May 6, 2020 at 8:59 pm #1210477
s29ers
Participant
Hi Yigit

Sorry about that. It’s fixed now and proper URL. The credentials and some links are below in private area again.

For example, grid item “A Better User Experience …” has a portfolio page. That portfolio page is also shown as visible in “Portfolio pages”. What I would like to do as I mentioned, is for such grid items where there is more content, set the title as a link and underline it. But not for ones where there is no page content. The lightbox for the grid item image if any should work normally as it is.

Note that I already have CSS

/* Disable links from portfolio grid items */
.grid-entry-title.entry-title {
pointer-events:none !important;
}

as I do not want users to click to the related portfolio page from any item as there is nothing on 90% of them.
Best regards
- This reply was modified 4 years, 7 months ago by s29ers.
May 10, 2020 at 7:57 pm #1211696

Mike
Moderator

Hi,
Sorry for the late reply and thanks for the links. We should be able to adjust your css to only effect title links with no content, but each of the ones I checked had page content, please link to one that doesn’t have content and you would want to have no title link.

Best regards,
Mike

May 11, 2020 at 6:05 am #1211741

s29ers
Participant

Hi Mike
Thanks
I listed two examples below.
Best regards

May 11, 2020 at 11:57 am #1211807
Mike
Moderator
Hi,
Thank you for the examples, in order to apply your css to only certain portfolio items we will need a way to identify them, so it looks like the portfolio categories are added to each item, I added the category no-content and on your portfolio grid page the class no-content_sort is added. So if you add this category to all of the items that have no content you can then use this css to add the pointer-events:none to these.
```
.grid-sort-container .grid-entry.no-content_sort h3.grid-entry-title {
	pointer-events:none !important;
}
```
Best regards,
Mike
May 11, 2020 at 9:08 pm #1211901

s29ers
Participant

Hi Mike
That actually worked really well. Since I have few grid items with content, I inverted it and set the pointer events to auto for those using a category has-content and set the pointer events to none for the rest.
Thanks very much for your help!

May 13, 2020 at 12:17 pm #1212578

Mike
Moderator

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike
Author

Posts