Adding a subtitle to a title to thumbnails in portfolio grid

2 hours ago, tuanphan said:

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.

Thanks, @tuanphan. The use of | definitely looks better, but as you say – the titles will still show on browser tabs and in pagination. As for jscript, would this be a complicated matter to solve?

@vcampaner, did you find a solution?

On 2/3/2021 at 6:58 PM, Thormod_RK said:

Thanks, @tuanphan. The use of | definitely looks better, but as you say – the titles will still show on browser tabs and in pagination. As for jscript, would this be a complicated matter to solve?

@vcampaner, did you find a solution?

You can add first, then we can take a look

On 2/4/2021 at 2:38 PM, tuanphan said:

You can add first, then we can take a look

Hi @tuanphan,

I have now made the site public, please see this link: https://www.thormodkvam.com/projects

I've used <span> to style the portfolio subtitle in "The Aula Series" (the first project), but as you can see, the whole title shows in browser tab + pagination. It would be great if one could keep only the main title in browser tabs + pagination to maintain a clean design.

In advance – thanks a lot!

On 2/3/2021 at 12:58 PM, Thormod_RK said:

Thanks, @tuanphan. The use of | definitely looks better, but as you say – the titles will still show on browser tabs and in pagination. As for jscript, would this be a complicated matter to solve?

@vcampaner, did you find a solution?

Hi sorry for the late reply. I change my design a bit because I couldn't figure out how to write more the two lines and wanted to write more info than it is possible. 

On 2/10/2021 at 3:14 PM, Thormod_RK said:

Hi @tuanphan,

I have now made the site public, please see this link: https://www.thormodkvam.com/projects

I've used <span> to style the portfolio subtitle in "The Aula Series" (the first project), but as you can see, the whole title shows in browser tab + pagination. It would be great if one could keep only the main title in browser tabs + pagination to maintain a clean design.

In advance – thanks a lot!

Hi.

Sorry for the delay. I'm overloaded.

can you add me as a contributor? I will test some jQuery code to remove span on Browser tab name + Pagination.

@tuanphan I am also having trouble removing the span tag from browser tab + pagination. Were you able to find a solution?

On 3/21/2021 at 8:17 PM, salensalen said:

@tuanphan I am also having trouble removing the span tag from browser tab + pagination. Were you able to find a solution?

Hi. Can you share link? We can help easier

On 2/22/2021 at 7:13 AM, tuanphan said:

Hi.

Sorry for the delay. I'm overloaded.

can you add me as a contributor? I will test some jQuery code to remove span on Browser tab name + Pagination.

 

On 3/21/2021 at 1:17 PM, salensalen said:

@tuanphan I am also having trouble removing the span tag from browser tab + pagination. Were you able to find a solution?

@tuanphan Likewise, I have used the <span> code to create subtitles, but would like this to be excluded from browser tab and pagination. Does CSS code exist to this effect? 

My site is not public as in early stages of development. Thanks in advance.

On 5/3/2021 at 5:25 AM, tmdesign said:

 

@tuanphan Likewise, I have used the <span> code to create subtitles, but would like this to be excluded from browser tab and pagination. Does CSS code exist to this effect? 

My site is not public as in early stages of development. Thanks in advance.

Possible. Need to site url to check

On 5/4/2021 at 3:30 AM, tuanphan said:

Possible. Need to site url to check

@tuanphan Site URL as follows: https://harmonica-pike-w7w4.squarespace.com/config/pages/604b403ab027c34468c6a9b2 

@tuanphan, sorry for the lack of reply – as you were a bit overloaded back in February (probably still is?!) and this wasn't urgent, I decided to wait. But this is still to be fixed, so I'm curious whether you get it to work with @tmdesign's site!

On 5/5/2021 at 4:38 PM, tmdesign said:

@tuanphan Site URL as follows: https://harmonica-pike-w7w4.squarespace.com/config/pages/604b403ab027c34468c6a9b2 

/config is admin url.

See how to find page url

18 hours ago, Thormod_RK said:

@tuanphan, sorry for the lack of reply – as you were a bit overloaded back in February (probably still is?!) and this wasn't urgent, I decided to wait. But this is still to be fixed, so I'm curious whether you get it to work with @tmdesign's site!

Do you want to change <span> &</span> to #

Aulaseriene # The Aula Series

It will look better than span..

2 hours ago, tuanphan said:

/config is admin url.

See how to find page url

Do you want to change <span> &</span> to #

Aulaseriene # The Aula Series

It will look better than span..

Hi @tuanphan

It appears the /config URL is not an issue since I have made you admin (my browser also defaults to this as the site is private, and this is a global issue).

'#' would be preferable to '<span>', and it would increase the copy permitted by the title field character limit, although the pagination issue would remain.

Furthermore the test change does not seem to be successful (unless still in progress?) as the full entry including # is visible as a title (without subtitle on the grid). See below:

I expect the custom CSS (below) would need to be amended to recognise the change in character? I have a limited understanding of how CSS syntax relates to outcomes so I would refer to your expertise on this.

/* Portfolio subtitle */
h3.portfolio-title span {
    display: block;
    font-size: 12px;
    line-height: 1.5em

Many thanks,

Tom

22 hours ago, Thormod_RK said:

@tuanphan, sorry for the lack of reply – as you were a bit overloaded back in February (probably still is?!) and this wasn't urgent, I decided to wait. But this is still to be fixed, so I'm curious whether you get it to work with @tmdesign's site!

@tuanphan @Thormod_RK I have been playing with the settings and come across the Project SEO settings. The default SEO settings includes all copy in the title (including span) shown by search engines and browser tabs, but this can be manually overridden using the 'SEO Title' field. See below:

While this means manually editing each project, and does not solve the pagination issue, it at least allows subtitles without coding in the browser tab text. I hope this helps for now in absence of a CSS edit for the SEO reference etc.

39 minutes ago, tmdesign said:

@tuanphan @Thormod_RK I have been playing with the settings and come across the Project SEO settings. The default SEO settings includes all copy in the title (including span) shown by search engines and browser tabs, but this can be manually overridden using the 'SEO Title' field. See below:

While this means manually editing each project, and does not solve the pagination issue, it at least allows subtitles without coding in the browser tab text. I hope this helps for now in absence of a CSS edit for the SEO reference etc.

Thanks @tmdesign, it does help to some extent. However, the main issue would still be pagination + browser tabs, where the full title including <span> or # would still be visible.

Any thoughts? I assume some jQuery work needs to be done!

On 5/7/2021 at 10:57 PM, Thormod_RK said:

Thanks @tmdesign, it does help to some extent. However, the main issue would still be pagination + browser tabs, where the full title including <span> or # would still be visible.

Any thoughts? I assume some jQuery work needs to be done!

On 5/7/2021 at 10:15 PM, tmdesign said:

@tuanphan @Thormod_RK I have been playing with the settings and come across the Project SEO settings. The default SEO settings includes all copy in the title (including span) shown by search engines and browser tabs, but this can be manually overridden using the 'SEO Title' field. See below:

While this means manually editing each project, and does not solve the pagination issue, it at least allows subtitles without coding in the browser tab text. I hope this helps for now in absence of a CSS edit for the SEO reference etc.

With Browser Tab title, you can edit SEO Title

With pagination title, add this to 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(){
  $("h2.item-pagination-title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

Or you can replace Pagination Title with Next/Previous Text, if you want this, I will give the code

19 hours ago, tuanphan said:

 

With Browser Tab title, you can edit SEO Title

With pagination title, add this to 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(){
  $("h2.item-pagination-title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

Or you can replace Pagination Title with Next/Previous Text, if you want this, I will give the code

 

Hi @tuanphan 

Thank you for this... It's at this point I've discovered the code injection feature is for Business Plan and above... As I am not selling a product, I cannot justify paying +50% for my website only to solve subtitles and pagination!

Is it possible to achieve the same result with custom CSS? Can jquery export code to this format?

Thanks again,

T

On 5/9/2021 at 2:52 PM, tuanphan said:

 

With Browser Tab title, you can edit SEO Title

With pagination title, add this to 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(){
  $("h2.item-pagination-title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

Or you can replace Pagination Title with Next/Previous Text, if you want this, I will give the code

 

@tuanphan: what would this code do? (When pasting it into the footer code, there is no difference.) Is there a way to route the code to use the SEO titles as pagination titles? That would be amazing...

Sorry for my amateur question – I'm very inexperienced with jQuery, I'm afraid.

On 5/12/2021 at 2:14 AM, Thormod_RK said:

@tuanphan: what would this code do? (When pasting it into the footer code, there is no difference.) Is there a way to route the code to use the SEO titles as pagination titles? That would be amazing...

Sorry for my amateur question – I'm very inexperienced with jQuery, I'm afraid.

The code will remove span text in pagination title. If the code doesn't work, can you share link to a portfolio? We can check easier

On 5/13/2021 at 5:30 PM, tuanphan said:

The code will remove span text in pagination title. If the code doesn't work, can you share link to a portfolio? We can check easier

Ah, I see! As @tmdesign discovered, entering SEO titles will remove '<span>' from browser tabs + pagination in any case. However, hiding the subtitles (all text following the first <span>) is still the main issue for the pagination.

Would it be possible to target the pagination code to use the site titles entered in SEO? That would be it...

Here's an example project in my portfolio where you can see how the pagination is cluttered with long site titles even though browser tab titles are kept tidy using SEO titling: https://www.thormodkvam.com/projects/venskaben

4 hours ago, Thormod_RK said:

Ah, I see! As @tmdesign discovered, entering SEO titles will remove '<span>' from browser tabs + pagination in any case. However, hiding the subtitles (all text following the first <span>) is still the main issue for the pagination.

Would it be possible to target the pagination code to use the site titles entered in SEO? That would be it...

Here's an example project in my portfolio where you can see how the pagination is cluttered with long site titles even though browser tab titles are kept tidy using SEO titling: https://www.thormodkvam.com/projects/venskaben

I don't see span in pagination title. Did you solve this?

On 5/26/2021 at 2:37 AM, tuanphan said:

I don't see span in pagination title. Did you solve this?

The '<span>'s are gone, but the pagination titles uses the full title as entered in Project Settings (excluding <span>), cluttering the pagination. It would be fantastic if pagination could target "SEO Title" as correct page title instead of the project titles as entered in Project Settings.

Hope it makes sense?

On 12/12/2020 at 7:29 AM, 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. 

Has anyone been able to solve this with CSS for the simple grid layout?

On 10/13/2021 at 5:27 PM, petermayer said:

 

Has anyone been able to solve this with CSS for the simple grid layout?

I want to know the same thing! please help 🙂

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.