Adding a subtitle to a title to thumbnails in portfolio grid

Add this to Home > Design > Custom CSS

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

then edit title to this format

Quote

Title <span>Subtitle</span>

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

/config is url for site owner.

You mean this page? https://heron-olive-sh9k.squarespace.com/beachlife

I see sub title here. Do you still need help?

Hi Tuanphan, Thanx for your reply. 

That is the page im showcasing my work right now. The problem there is that it is not clear for people that the images are clickable.  So that's why I started to showcase my work in a portfolio page (but this one is still hidden since it is not finished yet).

I want the portfolio page to look the same as this page https://heron-olive-sh9k.squarespace.com/beachlife

So im wondering how I can add a subtitle to the titles under the thumbnails. 

Hope you can help me out with this 🙂

Can you share link to portfolio page? We can check easier

Hi Tuanphan, 

The link is https://www.noraboeke-art.com/series-2 and the password: thankyou 

🙂
 

Hi Tuanphan, 

Thanx for your reply. 

Im wondering what im doing wrong since its not working yet. 
Attached 2 photo's with what I did. 

Also I would like to have the subtitle in normal weight as on the last image (that's from a normal page and not a portfolio grid). 

Not sure why, but your code has invalid character. Try copy this code then enter title box

I've copied  Seah <span>Fine art print</span> to the title box in project settings. 
Do I need to do this somewhere else? 


 

That strange. Just tested on my site & It worked here.

--

Do you use Personal Plan or higher?

I use a business account. 

Really strange.. 

Thanx for your help though 🙂

Hi Tuanpan, 

I found out that this code is working for the portfolio layout: grid overlay. So that's great! 
The thing is... im using the 'grid simple' design. So maybe there is another code needed for that one? 
 

On 10/23/2020 at 11:50 AM, tuanphan said:

Not sure why, but your code has invalid character. Try copy this code then enter title box

 

@noraboeke-art did you ever figure this out?  I am trying to do the same thing using the grid simple option for may portfolio page. 

On 12/10/2020 at 3:06 AM, brianb123 said:

@noraboeke-art did you ever figure this out?  I am trying to do the same thing using the grid simple option for may portfolio page. 

 

It still work on my client site. Try this code. It it doesn't work, can you share link to your site? We can check easier.

7 hours ago, tuanphan said:

It still work on my client site. Try this code. It it doesn't work, can you share link to your site? We can check easier.

 

Thanks for your reply. I tried this a had similar results to @noraboeke-art, it worked for the portfolio layout:grid overlay where the text overlays the image but not for the portfolio layout:simple grid where text is below image. 

4 hours ago, brianb123 said:

Thanks for your reply. I tried this a had similar results to @noraboeke-art, it worked for the portfolio layout:grid overlay where the text overlays the image but not for the portfolio layout:simple grid where text is below image. 

Do you use Personal Plan or higher?

I use personal plan. Do I need a higher account to do this simple thing?

Hello, 

I have tried this code, which has worked wonderfully. Thank you Tuanphan (I have been following some of your answers over this forum, and I am so grateful for your generosity of this knowledge)

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

  Quote

Title <span>Subtitle</span>

I have a quick question. following this code. with this code I was able to add a subtitle under the title of a project on the thumbnails - great. Now, Is it possible to have the option to add like 3-4 subtitles? one subtitle has its own line?

I am not knowledgeable of custom CSS, so again, I am very grateful for this forum 🙂

16 hours ago, vcampaner said:

Hello, 

 

I have tried this code, which has worked wonderfully. Thank you Tuanphan (I have been following some of your answers over this forum, and I am so grateful for your generosity of this knowledge)

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

  Quote

Title <span>Subtitle</span>

I have a quick question. following this code. with this code I was able to add a subtitle under the title of a project on the thumbnails - great. Now, Is it possible to have the option to add like 3-4 subtitles? one subtitle has its own line?

I am not knowledgeable of custom CSS, so again, I am very grateful for this forum 🙂

Add more span

Title <span>sub1</span><span>sub2</span><span>sub3</span>

12 minutes ago, tuanphan said:

Add more span

Title <span>sub1</span><span>sub2</span><span>sub3</span>

 

This works, thank you so much. 

What if I have longer text than what the title page settings can take ? Is there a way to add more text space. 

also is there a code that adjust line height of the subtitle on thumbnails. When I try changing the title height, it doesn't affect the subtitles correctly. 

this is so helpful. thank you so much. 

On 12/12/2020 at 2:35 AM, tuanphan said:

Do you use Personal Plan or higher?

I use the personal plan now. Do I need a higher plan to do a subtitle for the simple portfolio grid? 

On 12/15/2020 at 3:47 PM, vcampaner said:

This works, thank you so much. 

What if I have longer text than what the title page settings can take ? Is there a way to add more text space. 

also is there a code that adjust line height of the subtitle on thumbnails. When I try changing the title height, it doesn't affect the subtitles correctly. 

this is so helpful. thank you so much. 

Hi. Have you solved this yet?

On 12/17/2020 at 3:43 PM, tuanphan said:

Hi. Have you solved this yet?

Not yet! 😞

Hi @tuanphan,

First of all – thanks for your generosity and helpfulness across the forum.

Regarding the Portfolio thumbnail subtitling using <span>, these subtitles also show as part of the portfolio item's title (thus it also appears on top of the browser window when entering the portfolio item page, as well as in the pagination field, where too long titles often clutter the layout). See attached screenshot.

Is there any way to add subtitles on Portfolio thumbnails without cluttering the page titles with the same text?

PS: it seems you can also add simple code like <br> and font-styling in the title field in the settings of each portfolio item, and they will show correctly on the portfolio thumbnails. However, then all the text + coding also appear as page titles just like when using <span>.

Thanks!

On 2/1/2021 at 7:50 AM, Thormod_RK said:

Hi @tuanphan,

First of all – thanks for your generosity and helpfulness across the forum.

Regarding the Portfolio thumbnail subtitling using <span>, these subtitles also show as part of the portfolio item's title (thus it also appears on top of the browser window when entering the portfolio item page, as well as in the pagination field, where too long titles often clutter the layout). See attached screenshot.

Is there any way to add subtitles on Portfolio thumbnails without cluttering the page titles with the same text?

PS: it seems you can also add simple code like <br> and font-styling in the title field in the settings of each portfolio item, and they will show correctly on the portfolio thumbnails. However, then all the text + coding also appear as page titles just like when using <span>.

Thanks!

Skjermopptak 2021-02-01 kl. 15.46.14.mov

You can use | or - character, however this will require JavaScript to solve.

You can add Title | Sub Title| then we  will check.

It sill appear on browser tab, however I think it will be better than <br> tag.