Adding a subtitle to a title to thumbnails in portfolio grid

On 11/29/2021 at 11:48 PM, AdamMichael said:

Anyone? Anyone ever figure out how to add subtitle text to the simple grid layout? Squarespace team? Is this something squarespace can help address? It's mindblowing how hard it is to accomplish simple things in squarespace. The fact that this isn't something native to the platform is weird. Many sites use subtitles on image thumbs. 

You can also use CSS to achieve this. It won't appear above problems, however it is manually. If you share link to your site, we can give CSS code

Hello,

How to create subtitles in portfolio with CSS for the simple grid layout ?

Here a link to my portfolio:

https://agencesensible.squarespace.com/realisations-sensible

password: hautlescoeurs

Thanks

On 12/16/2021 at 12:57 AM, clementine said:

Hello,

How to create subtitles in portfolio with CSS for the simple grid layout ?

Here a link to my portfolio:

https://agencesensible.squarespace.com/realisations-sensible

password: hautlescoeurs

Thanks

Add to Design > Custom CSS

a.grid-item[href*="/atlas"] h3:after {
    content: "sub 1";
    display: block;
}
a.grid-item[href*="/sauvage"] h3:after {
    content: "sub 2";
    display: block;
}
a.grid-item[href*="/ardentes"] h3:after {
    content: "sub 3";
    display: block;
}

Do similar for other items

On 12/17/2021 at 1:21 PM, tuanphan said:

Add to Design > Custom CSS

a.grid-item[href*="/atlas"] h3:after {
    content: "sub 1";
    display: block;
}
a.grid-item[href*="/sauvage"] h3:after {
    content: "sub 2";
    display: block;
}
a.grid-item[href*="/ardentes"] h3:after {
    content: "sub 3";
    display: block;
}

Do similar for other items

SOLVED! Thank you @tuanphan for providing the solution!

Having tested on my page it works perfectly - this CSS adds the subtitle without affecting pagination, browser tab text etc. and does nor require any SEO adjustment as with the previous <span> method. Very clean solution. For anyone unclear, the href is the page url, i.e. if work/ceramics 

a.grid-item[href*="/ceramics"] h3:after {

I have also included formatting code with each subtitle to set the subtitle style, though there may be a simpler way to achieve this? Example as follows:

a.grid-item[href*="/url"] h3:after {
    content: "sub 1";
    display: block;
    font-size: 12px;
    line-height: 1.5em
}

Good luck all! Now to finally finish/publish that website...

@noraboeke-art @brianb123  @vcampaner @Thormod_RK @salensalen @petermayer @alpalbents @AdamMichael @clementine

The solution to adding subtitles in overlay grid (without affecting pagination or browser tab text) is above, as presented by @tuanphan 

Good luck everyone.

Site URL: https://www.loisartz.com/

Hi all,
I have a problem, I have set the animation of the site in flexible. When I reload like 3 times the page an error occurs that causes the title and subtitle to be mixed.

I have used span to separate title and subtitle of the project.

This is the code:

CODE INJECTION

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  $("h3.portfolio-title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

CSS

h3.portfolio-title span {
    display: block;
    font-size: 21px;
  font-weight: 10 !important;
  margin-top:-6px
    
}
h3.portfolio-title {
    font-size: 33px !important;
    font-weight: medium !important;
    color: white !important;
}

And it should always come out like this

How can I solve it?

Thanks a lot ♥♥

On 1/30/2022 at 7:58 AM, loisartz said:

Site URL: https://www.loisartz.com/

Hi all,
I have a problem, I have set the animation of the site in flexible. When I reload like 3 times the page an error occurs that causes the title and subtitle to be mixed.

I have used span to separate title and subtitle of the project.

This is the code:

CODE INJECTION

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  $("h3.portfolio-title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

CSS

h3.portfolio-title span {
    display: block;
    font-size: 21px;
  font-weight: 10 !important;
  margin-top:-6px
    
}
h3.portfolio-title {
    font-size: 33px !important;
    font-weight: medium !important;
    color: white !important;
}

 

And it should always come out like this

How can I solve it?

Thanks a lot ♥♥

It looks like you fixed it?

Hi @tuanphan, could you help me use secondary title on sentimentstudios.com/work (pw: concept)?  The CSS as mentioned above does not seem to work unfortunately. Maybe because of the new version of my Squarespace theme? Much thanks in advance! Elwin

On 5/2/2022 at 8:50 PM, elwinstevelink said:

Hi @tuanphan, could you help me use secondary title on sentimentstudios.com/work (pw: concept)?  The CSS as mentioned above does not seem to work unfortunately. Maybe because of the new version of my Squarespace theme? Much thanks in advance! Elwin

See #2 code.

Add to Design > Custom CSS

/* Add subtitle */
h3.portfolio-title:after {
    font-size: 20px;
    color: black;
    display: block;
}
a.grid-item[href="/work/backbase"] h3:after {
    content: "subtitle 01";
}
a.grid-item[href="/work/ajax"] h3:after {
    content: "subtitle 01";
}

(this code for first-second items, you can repeat similar for other items)

Thank you @tuanphan! It works! 🥳  🎉

Hello Everybody,

I have been reading the whole thread but all the solutions still depends on the title maxlenght of the squarespace title input. I need to add a decent amount of information as "subtitles" but I can't because the input have a maxlenght of just 100 characters. Is there any workaround that, also I'm kind of shock how convoluted is to do this in squarespace. Will really appreciate your help.
 

21 hours ago, Lowtrux said:

Hello Everybody,

I have been reading the whole thread but all the solutions still depends on the title maxlenght of the squarespace title input. I need to add a decent amount of information as "subtitles" but I can't because the input have a maxlenght of just 100 characters. Is there any workaround that, also I'm kind of shock how convoluted is to do this in squarespace. Will really appreciate your help.
 

You want to add sub in list page only or both list + individual page?

If list only, we can use some other blocks to recreate portfolio list page, eg: Image Blocks, Gallery Section,...

Hello, I am also trying to add a subtitle description to project title on the grid view of my portfolio page. I have tried using: 

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

in addition to: 

Title <span>Subtitle</span>

For some reason, the subtitle is showing up as the same size as the actual thumbnail title. Sometimes it also shows up on the same line rather than below the title. Even when I update the font size from "12px" to "6px" in CCS, nothing changes. Essentially, the CCS code does not seem to be working. Please let me know if anyone can help - the site is not currently live. Thanks  

20 hours ago, KyleSaurbier said:

Hello, I am also trying to add a subtitle description to project title on the grid view of my portfolio page. I have tried using: 

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

in addition to: 

Title <span>Subtitle</span>

For some reason, the subtitle is showing up as the same size as the actual thumbnail title. Sometimes it also shows up on the same line rather than below the title. Even when I update the font size from "12px" to "6px" in CCS, nothing changes. Essentially, the CCS code does not seem to be working. Please let me know if anyone can help - the site is not currently live. Thanks  

See #2 code in this thread