Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding a subtitle to a title to thumbnails in portfolio grid


noraboeke-art
Go to solution Solved by tuanphan,

Question

  • Answers 46
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add this to Home > Design > Custom CSS h3.portfolio-title span { display: block; font-size: 12px; } then edit title to this format  

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 bet

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

Posted Images

Recommended Posts

  • 0
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

Email me if you have need any help (free, of course :-D). Answer within 24 hours.

How to:

-- Yup!

Link to post
  • 0
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!

Edited by Thormod_RK
Link to post
  • 0
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. 

Link to post
  • 0
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.

 

Email me if you have need any help (free, of course :-D). Answer within 24 hours.

How to:

-- Yup!

Link to post
  • 0
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

Email me if you have need any help (free, of course :-D). Answer within 24 hours.

How to:

-- Yup!

Link to post
  • 0
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.

Link to post
  • 0
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

Email me if you have need any help (free, of course :-D). Answer within 24 hours.

How to:

-- Yup!

Link to post
  • 0

@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!

Link to post
  • 0
On 5/5/2021 at 4:38 PM, tmdesign said:

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

Email me if you have need any help (free, of course :-D). Answer within 24 hours.

How to:

-- Yup!

Link to post
  • 0
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:

image.thumb.png.601d130f9df83445f34b02420238efe7.png

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

Link to post
  • 0
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:

image.png.940f4c87bafeafde73300ad1e42b2811.png

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.

Link to post
  • 0
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:

image.png.940f4c87bafeafde73300ad1e42b2811.png

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!

Link to post
  • 0
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:

image.png.940f4c87bafeafde73300ad1e42b2811.png

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

image.thumb.png.f11d9759967eec8dcd61b497d7608039.png

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

 

Email me if you have need any help (free, of course :-D). Answer within 24 hours.

How to:

-- Yup!

Link to post
  • 0
19 hours ago, tuanphan said:

 

With Browser Tab title, you can edit SEO Title

image.thumb.png.f11d9759967eec8dcd61b497d7608039.png

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

Link to post
  • 0
On 5/9/2021 at 2:52 PM, tuanphan said:

 

With Browser Tab title, you can edit SEO Title

image.thumb.png.f11d9759967eec8dcd61b497d7608039.png

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.

Link to post
  • 0
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

Email me if you have need any help (free, of course :-D). Answer within 24 hours.

How to:

-- Yup!

Link to post
  • 0
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

Link to post
  • 0
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?

Email me if you have need any help (free, of course :-D). Answer within 24 hours.

How to:

-- Yup!

Link to post
  • 0
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?

Link to post

Create an account or sign in to comment

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


√ó
√ó
  • Create New...