Adding descriptions to portfolio grid layouts in 7.1

I am using the portfolio with a grid layout. Under the title, I want to add a brief description of the project. Is this possible?

There have been 2 posts on the Forum about this (and there is a solution, I have commented there), I don't remember the exact name, you can search.

If you search and still can't find it, let me know, I will take a look

@tuanphan Thanks for replying! I did search and couldn't find any solutions. Let me know if you have a fix. Thanks.

8 hours ago, DontBeShy said:

@tuanphan Thanks for replying! I did search and couldn't find any solutions. Let me know if you have a fix. Thanks.

Can you share link to porfolio page on your site?

On 4/15/2020 at 8:45 AM, tuanphan said:

Can you share link to porfolio page on your site?

 

Yes of course: https://luxedentaldallas-v1.squarespace.com/treatments

PW: 1234

Though: it is just the standard grid layout portfolio. Haven't invested in forming the content because I need to know how to add descriptions. Thank you for your help!

2 hours ago, DontBeShy said:

Yes of course: https://luxedentaldallas-v1.squarespace.com/treatments

PW: 1234

Though: it is just the standard grid layout portfolio. Haven't invested in forming the content because I need to know how to add descriptions. Thank you for your help!

Try this code, https://sf.digital/squarespace-solutions/how-can-i-add-line-breaks-to-gallery-grid-titles

replace 

.image-slide-title

with 

.portfolio-title

If the code doesn't work, keep theo code & let me know. I will check again.

4 hours ago, tuanphan said:

Try this code, https://sf.digital/squarespace-solutions/how-can-i-add-line-breaks-to-gallery-grid-titles

replace 

.image-slide-title

with 

.portfolio-title

If the code doesn't work, keep theo code & let me know. I will check again.

Thanks. It didn't work though. Let me know if you have any other ideas.

On 4/18/2020 at 12:50 PM, DontBeShy said:

Thanks. It didn't work though. Let me know if you have any other ideas.

Keep above code, add this to Last Line in Code Injection Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script>
  $(function(){
  $(".portfolio-title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

Has anyone manage to get Title and description on the 7.1 templates? I have tried these above solutions with no luck up to now... 😕

On 4/20/2020 at 10:39 AM, tuanphan said:

Keep above code, add this to Last Line in Code Injection Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script>
  $(function(){
  $(".portfolio-title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

 

This one didn't work either. 

10 hours ago, DontBeShy said:

This one didn't work either. 

Okay. Remove all code I Sent, then add this to Code Injection  Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(function(){
  $(".portfolio-title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

then edit your project title to this

Project One <br/>Description

Did anyone figure this out? Looking to add a description to Portfolio grid layout. 

16 hours ago, taylorlaidlaw said:

Did anyone figure this out? Looking to add a description to Portfolio grid layout. 

You mean this?

Hi Tuan, I need help with adding it to my site:

https://raccoon-icosahedron-cgna.squarespace.com/

password: oakwyn

Under Properties for Rent 

Under each project, I want to add a description. Is it possible?

9 hours ago, taylorlaidlaw said:

Hi Tuan, I need help with adding it to my site:

https://raccoon-icosahedron-cgna.squarespace.com/

password: oakwyn

 

Under Properties for Rent 

Under each project, I want to add a description. Is it possible?

Edit title to this

Title#Description01

then add this to Home > Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  var title = document.querySelectorAll('h3.portfolio-title');
  for (var ss = 0; ss < title.length; ++ss) {
    var item = title[ss];
    item.innerHTML = item.innerText.replace(/#/g, '<br/>');
  }
});
</script>

Code by Sf.digital

Thanks for this code! I was able to add another line/description text to my portfolio template. 

However, they are the same size font. I tried to target the innertext to change the font style but with no luck. 

Ideas?

https://www.swayleadership.com/meet-our-team

On 9/8/2020 at 4:33 AM, paigebuda said:

Thanks for this code! I was able to add another line/description text to my portfolio template. 

However, they are the same size font. I tried to target the innertext to change the font style but with no luck. 

Ideas?

 

https://www.swayleadership.com/meet-our-team

Try edit portfolio title to this code, then let me know. I will test some code to change style

Scott Allender<span>Emotional Intelligence Specialist</span>

Hi @tuanphan I followed all of your instructions. I managed to get the line break in my portfolio grid.

But I would like to have the subtitles smallers and thinner. For that I didn't find a solution yet. Could you help me with this?

It is on this page: https://www.studioverho.com/work

I only did it for the first square yet. 

On 11/5/2020 at 2:23 AM, StefanieV said:

Hi @tuanphan I followed all of your instructions. I managed to get the line break in my portfolio grid.

But I would like to have the subtitles smallers and thinner. For that I didn't find a solution yet. Could you help me with this?

It is on this page: https://www.studioverho.com/work

I only did it for the first square yet. 

Use this method, then add this to Home > Design > Custom CSS

h3.portfolio-title span {
    display: block;
    font-weight: normal;
    font-size: 12px;
}

Hi @tuanphan, this didn't work.

I can only get the line break by using 

Title#Description01

When using the code with <span>, it doesn't break anymore, neither the style of the subtitle didn't change.

Are there other solutions?

On 11/7/2020 at 7:32 PM, StefanieV said:

Hi @tuanphan, this didn't work.

I can only get the line break by using 

Title#Description01

When using the code with <span>, it doesn't break anymore, neither the style of the subtitle didn't change.

Are there other solutions?

Can you add me as a contributor? (or duplicate the site & add), I can check easier.

Inbox me to get my email. Thank you.

Thanks@tuanphan , would like to add you as a contributor. I've sent you a message in your inbox in order to get your mail address.

Solved this with JavaScript. If any one interested, just comment site url, we can help easier.

Hi @tuanphan I've created the Portfolio simple grid title and description based on the advice you gave to others and I need your help on how to increased the character limit on this field? Right now it's 100 characters maximum for both the title and the new description below where I need more (especially since some code of hashtags and <span> is now included in the character limit). Is there any way you can help? Thank you 

Hello @tuanphan I followed your instructions and just needed help on the JavaScript part.