How do I add a line break for Gallery titles (for Gallery in an index)?

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

I checked all the past answers and tried everything but nothing works.

I need 2 lines (a line break) for each gallery title (my galleries are inside an index).

Before I was using <br> as you can see below. How can I do now?

https://www.emmanuellemoureaux.com/100colors

Thank you in advance.

Try this guide. https://sf.digital/squarespace-solutions/how-can-i-add-line-breaks-to-gallery-grid-titles

@emma_tokyo so where specifically were you trying to add the line break?
 

1. Inbetween the '100 colors no28' and the name?
2. Before the title?
3. After the title?

5 minutes ago, Unlikely_IT said:

@emma_tokyo so where specifically were you trying to add the line break?
 

1. Inbetween the '100 colors no28' and the name?
2. Before the title?
3. After the title?

 @Unlikely_IT I am trying to add the line break in between '100 colors no.28' and the name.

9 minutes ago, tuanphan said:

Try this guide. https://sf.digital/squarespace-solutions/how-can-i-add-line-breaks-to-gallery-grid-titles

Thank you tuanphan. 

I tried before several times but without success.

I just pasted the code as in the article but perhaps I need to change something in the code (for example is 'image-slide-title' the adequate word for Gallery title?) but I have no knowledge at all  in programming.

@emma_tokyo, well @tuanphan method is the best option. But you're right, you need to tweek the code to match your websites HTML structure. give me a minute, I'll tweek it for you.

3 minutes ago, emma_tokyo said:

Thank you tuanphan. 

I tried before several times but without success.

I just pasted the code as in the article but perhaps I need to change something in the code (for example is 'image-slide-title' the adequate word for Gallery title?) but I have no knowledge at all  in programming.

try

.project-title h2

9 minutes ago, tuanphan said:

try

.project-title h2

With this word it works well in the index thumbnail !!! but it does not works when you click and enter the gallery. Please see the image below.

13 minutes ago, Unlikely_IT said:

@emma_tokyo, well @tuanphan method is the best option. If you have issues implementing it just message here

Thank you very much. With @tuanphan good advice, it works well for index galleries thumbnail titles but not work for the moment when you click and enter the gallery. 

8 minutes ago, emma_tokyo said:

Thank you very much. With @tuanphan good advice, it works well for index galleries thumbnail titles but not work for the moment when you click and enter the gallery. 

Can you share link to page in screenshot? I guess it uses different class name.

5 minutes ago, tuanphan said:

Can you share link to page in screenshot? I guess it uses different class name.

Did you mean that?

@emma_tokyo, you just need to make sure the query selector has a specific enough style for both the gallery and the project page. this should work:

'.project-title h2, .project-item .meta h1'

 

6 minutes ago, Unlikely_IT said:

@emma_tokyo, you just need to make sure the query selector has a specific enough style for both the gallery and the project page. this should work:

'.project-title h2, .project-item .meta h1'

 

Thank you @Unlikely_IT, I tried and below are the results:

- it works for the index gallery thumbnail titles

- it works for the project page title but only in the site building page

- it does not work in the real website : all the titles of all project pages disappear (no title anymore) and also the already online project titles (which worked with <br>) do not work anymore.

1 hour ago, emma_tokyo said:

- it works for the project page title but only in the site building page

- it does not work in the real website : all the titles of all project pages disappear (no title anymore) and also the already online project titles (which worked with <br>) do not work anymore.

@emma_tokyo So on these points, I'm going to your live site and I'm seeing it work. So i'm a bit confused.

Can you give me the URL where the issue is seen. Confirm the browser that has the issue. And show a photo of the issue as well. Thank you!

@emma_tokyo Here is the code rewritten so that is much cleaner.

window.Squarespace.onInitialize(Y, () => {
    [...document.querySelectorAll('.project-title h2, .project-item .meta h1')]
    .forEach((uit) => uit.innerHTML = uit.textContent.replace(/##/g, '<br>'));
});

Please note I've change the selector text to be: ##

Reason for this is to make sure titles can still use the hash character on it's own.

** edited post **
OOPS! typo in my JS. @emma_tokyo only use the JS provided now

12 hours ago, Unlikely_IT said:

@emma_tokyo So on these points, I'm going to your live site and I'm seeing it work. So i'm a bit confused.

Can you give me the URL where the issue is seen. Confirm the browser that has the issue. And show a photo of the issue as well. Thank you!

@Unlikely_IT Sorry to confuse you.... What you see on my live site has been made with <br> last year (before the function disappeared)  so it works.

I do not put LIVE new pages since last year because of this problem. So I put a test page few minutes LIVE,  see how your solutions work and put it again NOT LIVE. I will prepare some screenshots. Thank you so much (I have a lot of new projects to publish but do not want because of this title problem)

12 hours ago, Unlikely_IT said:

@emma_tokyo Here is the code rewritten so that is much cleaner.

window.Squarespace.onInitialize(Y, () => {
    [...document.querySelectorAll('.project-title h2, .project-item .meta h1')]
    .forEach((uit) => uit.innerHTML = uit.textContent.replace(/##/g, '<br>'));
});

Please note I've change the selector text to be: ##

Reason for this is to make sure titles can still use the hash character on it's own.

** edited post **
OOPS! typo in my JS. @emma_tokyo only use the JS provided now

@Unlikely_IT I tried with the above JS, here are the results (I attach also the 4 corresponding screenshots) :

- Chrome : index thumbnail OK / project page NOT OK (title not break)

- Internet Explorer :  index thumbnail and project page NOT OK (both ## appear)

@emma_tokyo Sorry but none of these fixes will not work for Internet Explorer. I don't do anything for that platform now (at least not for free as it's more work), as microsoft has deprecated it. And you'll find some SS features have issues there too.

**edited**
Sorry I meant to say won't work for IE

Would you do me a favour and just create a project page that I can run tests with. It's much quicker to review it.

37 minutes ago, Unlikely_IT said:

@emma_tokyo Sorry but none of these fixes will not work for Internet Explorer. I don't do anything for that platform now (at least not for free as it's more work), as microsoft has deprecated it. And you'll find some SS features have issues there too.

**edited**
Sorry I meant to say won't work for IE

Would you do me a favour and just create a project page that I can run tests with. It's much quicker to review it.

@Unlikely_IT I forgot IE is too old, sorry....

Because put JS has an influence on already online projects in my official site, I created a page on another site : https://www.100colors.jp/titles-test/

But how can you run tests with this? Is this what you meant or you need something else?

Nah don't worry about it. There is still a high usage rate of IE in asia, I've always have to explain to clients why IE requires extra cost (I work in HK). Arg coding for IE it's a huge pain 🤣 , plus testing is a nightmare 😢. No matter how powerful the machine I always manage to freeze it 🤣.

Now enough of my whinging, I wrote up JS code that works for IE... at least it should*.

NodeList.prototype.forEach = Array.prototype.forEach;

function addBreak(uit) {
    uit.forEach(function(item) {
        item.innerHTML = item.innerHTML.replace(/--/g, '<br>');
    });
}
window.Squarespace.onInitialize(Y, function() {
    var title = document.querySelectorAll('div.project-item h1');
    var galTitle = document.querySelectorAll('div.project-title h2');

    addBreak(title);
    addBreak(galTitle);
});

Please note that I've also change the selector to -- , away from ##. The reason for this is that you're using the page title on project page as the title to adjust, so it'll look nicer as emmanuelle moureaux architecture + design — 100 colors no.28--"Universe of Words" instead of emmanuelle moureaux architecture + design — 100 colors no.28"Universe of Words"

Let me know how it goes with testing that. Oh don't worry about that testing page now as I figured it out. (Pretty sure I have).

Kindest,

Erin

@Unlikely_IT You are in HK!  WOW, it seems working well !!!

I have put online to test "100 colors no.29" and it works on Chrome, IE and iPhone as you can see:

https://www.emmanuellemoureaux.com/100colors

And it has no influence on pages already online with <br> so I do not need to write the old pages with --

Perfect ! Thank you so much Erin.

emmanuelle

Happy to help 😄

@Unlikely_IT Thank you very much for your time and knowledge. I was worried about this problem since last year and you solved it !