Jump to content

Adding descriptions to portfolio grid layouts in 7.1

Recommended Posts

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 

Link to comment
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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...

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 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.