Jump to content

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

Recommended Posts

9 minutes ago, tuanphan 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.

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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

Happy Building wishes from unlikely IT 🖥️

If you find this post helpful, please do share a thumbs up. Many thanks!

Link to comment

@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

Edited by Unlikely_IT

Happy Building wishes from unlikely IT 🖥️

If you find this post helpful, please do share a thumbs up. Many thanks!

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

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

Chrome_thumbnail_OK.png

Chrome_page_NOT_OK.png

IE_thumbnail_NOT_OK.png

IE_project_NOT_OK.png

Link to comment

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

Edited by Unlikely_IT

Happy Building wishes from unlikely IT 🖥️

If you find this post helpful, please do share a thumbs up. Many thanks!

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

Link to comment

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

Edited by Unlikely_IT

Happy Building wishes from unlikely IT 🖥️

If you find this post helpful, please do share a thumbs up. Many thanks!

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.