Jump to content

Text link possible in gallery description?

Go to solution Solved by paul2009,

Recommended Posts

  • Solution
22 hours ago, lensmens said:

I want to highlight part of a text description in a gallery as a URL link. Is there a workaround?

There isn't a feature but you should be able to add a link by manually adding the HTML. I should probably set your expectations by saying that this is an unsupported workaround so could stop working in the future if Squarespace decided to block the HTML.

629485977_Screenshot2022-02-24at14_13_29.thumb.png.306a09467ac5518206fa260d29ce3613.png

gallery-section-add-link-to-description.thumb.png.5b72fb07fb5c9e50bb97392aa92b41b6.png

I loved your "About" section by the way. It made me smile 🙂.

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
21 hours ago, paul2009 said:

There isn't a feature but you should be able to add a link by manually adding the HTML. I should probably set your expectations by saying that this is an unsupported workaround so could stop working in the future if Squarespace decided to block the HTML.

629485977_Screenshot2022-02-24at14_13_29.thumb.png.306a09467ac5518206fa260d29ce3613.png

gallery-section-add-link-to-description.thumb.png.5b72fb07fb5c9e50bb97392aa92b41b6.png

I love your about section btw. It made me smile 🙂.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thanks, Paul!

 

Link to comment
5 minutes ago, lensmens said:

Thanks, Paul!

You're welcome 🙂

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
9 minutes ago, lensmens said:

Is it possible to link to an external page as well?

Yes, sure. Here are some examples:

<a href="https://example.com">External site</a>
<a href="mailto:m.bluth@example.com">Email link</a>
<a href="tel:+123456789">Phone link</a>

This guide explains all the options: The Anchor element.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 1 year later...
2 hours ago, honeyarrow1 said:

I have a three line or paragraph gallery caption and need to add hyperlinks to 2 of them. I feel like, because I put the lines in seperate <p>-tags, the <a href ...> tag does not work anymore. It only works when I put it in, but not when I save the changes.

Can you share the code that you used?

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
11 hours ago, paul2009 said:

Can you share the code that you used?

Yes, sure:

Blackberries
<p>YouTube</p>
<p><a href="https://google.com">Presskit</a></p>

in the custom footer section:

<script>
  $(document).ready(function(){
  $("p").each(function(){
    $(this).html($(this).text());
  });
}); 
</script>

Link to comment
14 hours ago, honeyarrow1 said:

Do you have any idea how I can fix this?

What happens if you remove the footer code?

As far as I can tell the footer code is messing things up.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
Just now, creedon said:

What happens if you remove the footer code?

As far as I can tell the footer code is messing things up.

I have 2 html links in the footer (Imprint and Data Privacy) and I thought that is where it needs to go. I am afraid it will mess them up if I remove it? Any thoughts on that?

Link to comment
3 minutes ago, honeyarrow1 said:

I am afraid it will mess them up if I remove it? Any thoughts on that?

Don't fear to try new things if you have a way back to where you were before.

In my testing you don't need the jQuery code. It is causing your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
7 minutes ago, creedon said:

Don't fear to try new things if you have a way back to where you were before.

In my testing you don't need the jQuery code. It is causing your issue.

Without the jQuery code, the footer now looks like this ... 😞

Bildschirmfoto 2023-11-08 um 09.49.06.png

 

... and my custom hyphenations etc. don't work anymore either.

Edited by honeyarrow1
Link to comment

This is the whole code (besides the html-tags I put directly into the text-fields etc.) I used:

Header

<style>
  .burger-box {
    visibility: hidden;
}

.header-nav {
    position: absolute;
    right: 30px;
     top: 10px
}
  </style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

Footer

<style>
a {
  text-decoration: none;
}
  </style>

<script>
  $(document).ready(function(){
  $("p").each(function(){
    $(this).html($(this).text());
  });
}); 
</script>

CSS

@font-face {
    font-family: 'BeVietnamPro';
       src: url('https://static1.squarespace.com/static/6526edcbef608a3828beab73/t/6539155a1aac7e0450b56610/1698239834645/BeVietnamPro-Light.woff');
  }
h1 {font-family: 'BeVietnamPro';}
h2 {font-family: 'BeVietnamPro';}
h3 {font-family: 'BeVietnamPro';}
h4 {font-family: 'BeVietnamPro';}
p {font-family: 'BeVietnamPro';}

//Gallery Caption CSS

.gallery-caption-grid-masonry p {
line-height: 1.4em !important;
text-align: center !important; 
font-family: BeVietnamPro !important;
display: block;
font-size: 1rem !important;
}

@media (max-width: 800px) {
.gallery-masonry .gallery-masonry-item img {
        height: 100%!important;
        width: 100%!important;
    }
  
.gallery-masonry .gallery-masonry-wrapper {
        columns: 1;
        column-gap: 0;
        padding: 10px;
        height: auto!important;
        display: block!important;
     }
.gallery-masonry-item-wrapper {
        height: auto!important;
    }
  
.gallery-masonry-item {
        position: relative!important;
        padding: 10px 0!important;
        transform: none!important;
        width: 100%!important;
        display: block;
       }
}

a {
text-decoration: none !important;
}

@media screen and (max-width:767px) {
/* Logo size */
.header-title-logo img, .header-title-logo a {
    left: 1000px
}
}

body {-webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important;  }

Edited by honeyarrow1
Link to comment

All I can say at this point is when I put HTML code into the descriptions of a gallery section, it interpreted HTML and rendered it to some degree. So any extra JavaScript/jQuery doesn't help in the rendering in my testing.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
Just now, creedon said:

All I can say at this point is when I put HTML code into the descriptions of a gallery section, it interpreted HTML and rendered it to some degree. So any extra JavaScript/jQuery doesn't help in the rendering in my testing.

For the gallery section, this might be true, but in all other places on my page, the html tags (<a href>, <&shy>, <i>) did not work (e.g. the footer section). 🤔 The disaster started with the hyphenation that just would not work and I needed a way to do it manually.

Link to comment
11 hours ago, honeyarrow1 said:

For the gallery section, this might be true, but in all other places on my page

It is the case that SS treats different inputs differently. Some will process HTML some not. In theory unless the field states that it handles HTML then it shouldn't. SS has been identifying fields that process HTML and removing that unitened feature. So if you put HTML in a field that doesn't explicitly say that it accepts it, it can break at some point in the future.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
4 minutes ago, creedon said:

It is the case that SS treats different inputs differently. Some will process HTML some not. In theory unless the field states that it handles HTML then it shouldn't. SS has been identifying fields that process HTML and removing that unitened feature. So if you put HTML in a field that doesn't explicitly say that it accepts it, it can break at some point in the future.

Haha, awesome. :S

FYI: I solved all my issues with your help earlier. 🙂 Thank you so much!

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.