Jump to content

Adding a subtitle to a title to thumbnails in portfolio grid

Go to solution Solved by tuanphan,

Recommended Posts

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

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 weeks later...
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

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...
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...

Link to comment
  • 3 weeks later...

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.

image.png.a9ddf6d00e52b4731c2a406b7ee12aae.png

image.thumb.png.1a4fb456b2bceeed1a85195dc16b1d87.png

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

image.thumb.png.7c8b43d1c13dd7a066840adde9896b5d.png

How can I solve it?

Thanks a lot ♥♥

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

image.png.a9ddf6d00e52b4731c2a406b7ee12aae.png

image.thumb.png.1a4fb456b2bceeed1a85195dc16b1d87.png

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

image.thumb.png.7c8b43d1c13dd7a066840adde9896b5d.png

How can I solve it?

Thanks a lot ♥♥

It looks like you fixed it?

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 months later...

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

Edited by elwinstevelink
Link to comment
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)

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
  • 3 months later...

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.
 

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

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
  • 10 months later...

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  

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

 

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

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.