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

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


emma_tokyo
Go to solution Solved by Unlikely_IT,

Question

22 answers to this question

Recommended Posts

  • 0
Posted (edited)

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Link to post
  • 0

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

Happy Building wishes from unlikely IT 🖥️

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

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

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

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

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Link to post
  • 0
Posted (edited)
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.

image_emma.JPG

emma_script.JPG

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Link to post
  • 0

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

 

Happy Building wishes from unlikely IT 🖥️

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

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

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

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

Create an account or sign in to comment

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

×
×
  • Create New...