Jump to content

Gallery Titles: adding a line + subtitle, adjusting font size

Recommended Posts

Site URL: https://sentimentstudios.com

Hi @tuanphan, for my the showcase gallery on the homepage of sentimentstudios.com (pw: concept) I am looking to do the following adjustments, as to make the text work as well as on sentimentstudios.com/work;

- adding a text row in the title (half of each title disappears on mobile)
- adding a subtitle (client name)
- changing font size of title
- create hover effect "zoom" like on portfolio (sentimentstudios.com/zoom)

Could you help me achieve this? Much thanks in advance! 

Link to comment
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

#1. Zoom effect

The page doesn't exist

#2. Title/Subtitle

You mean like this?

Screenshot_4.thumb.png.f69ae1053003ef041ca798b6ad48fc1d.png

#3. I don't quite understand. Can you describe in more detail?

adding a text row in the title (half of each title disappears on mobile)

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
  • 2 weeks later...

Hi @tuanphan! Thank you for your efforts! All questions regard the gallery block "Work" on my homepage https://www.sentimentstudios.com (pw: concept). Allow me to clarify my questions.

1. Zoom effect: as seen on my portfolio page https://www.sentimentstudios.com/work (pw: concept) I chose squarespace's hover effect "zoom". Is this effect or a similar effect possible on the Gallery block of my homepage? 

2. Title and Subtitle: my wish would be to have a larger font title than currently and a smaller font below with the client name. Like this:

Project title 
Client name

3. Adding a text row for the title: As seen on attached screenshot, the largest part of the project title is invisible in mobile view. As such, I would like to add a text line for the titles to make sure the titles can be read. Would that be possible?

Much thanks in advance for your help!

Screenshot 2022-07-17 at 11.54.11.png

Link to comment
22 hours ago, elwinstevelink said:

Hi @tuanphan! Thank you for your efforts! All questions regard the gallery block "Work" on my homepage https://www.sentimentstudios.com (pw: concept). Allow me to clarify my questions.

1. Zoom effect: as seen on my portfolio page https://www.sentimentstudios.com/work (pw: concept) I chose squarespace's hover effect "zoom". Is this effect or a similar effect possible on the Gallery block of my homepage? 

2. Title and Subtitle: my wish would be to have a larger font title than currently and a smaller font below with the client name. Like this:

Project title 
Client name

3. Adding a text row for the title: As seen on attached screenshot, the largest part of the project title is invisible in mobile view. As such, I would like to add a text line for the titles to make sure the titles can be read. Would that be possible?

Much thanks in advance for your help!

Screenshot 2022-07-17 at 11.54.11.png

#1. Add to Design > Custom CSS

/* Homepage Images Zoom */
body.homepage .slide:hover img {
    transform: scale(1.3);
    transition: all 0.3s;
}
body.homepage .slide img {
    transition: all 0.3s;
}

#2. First, add this to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".image-slide-title").each(function(){
    $(this).html($(this).text());
  });
});
</script>
<style>
  body.homepage .image-slide-title {
    font-size: 18px !important;
}
body.homepage .image-slide-title em {
    font-style: normal;
    display: block;
    font-size: 12px;
}
</style>

Next, edit your Image Title, from this text

Placing human needs at the heart of a fintech company

to this

Placing human needs at the heart of a fintech company <em> here is line 2</em>

You will have

image.thumb.png.70155c4f27ecb27424407cc30f9883d4.png

#3. Add to Design > Custom CSS

@media screen and (max-width:640px) {
.image-slide-title {
    white-space: initial !important;
}
}

 

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
  • 1 month later...

Thank you a lot @tuanphan!

#1 Zoom effect: has worked!
#2 Title and Subtitle: I can not seem to use code injection in my 'personal plan' subscription. Is there another way to do this? I do not need any options from the higher payment plans otherwise.
#3 Adding a text row for the title: has worked for mobile, but now the title is cut off on desktop instead (see image), could you help me fix this?

Thanks so much in advance! 

P.S.: this still concerns the homepage of my website sentimentstudios.com

image.png

Edited by elwin5000
Link to comment
On 9/7/2022 at 4:13 AM, elwin5000 said:

Thank you a lot @tuanphan!

#1 Zoom effect: has worked!
#2 Title and Subtitle: I can not seem to use code injection in my 'personal plan' subscription. Is there another way to do this? I do not need any options from the higher payment plans otherwise.
#3 Adding a text row for the title: has worked for mobile, but now the title is cut off on desktop instead (see image), could you help me fix this?

Thanks so much in advance! 

P.S.: this still concerns the homepage of my website sentimentstudios.com

image.png

#3. I think you placed code in wrong position (maybe you added code before a } symbol, make it doesn't work properly).

Can you send all code after you added the code?

#2. If Personal Plan, you will use a lot of code to handle this. I will send this after solving #3.

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

Hi @tuanphan, thank you for your help! Please find all code here! Can you see what I did wrong regarding #3? 
 

/* Add subtitle */
h3.portfolio-title:after {
    font-size: 15px;
    color: white;
    display: block;
}
a.grid-item[href="/work/backbase"] h3:after {
    content: "Backbase";
}
a.grid-item[href="/work/ajax"] h3:after {
    content: "Ajax / MTG";
}

a.grid-item[href="/work/close"] h3:after {
    content: "Close";
}

a.grid-item[href="/work/listnride"] h3:after {
    content: "ListNRide";
}

a.grid-item[href="/work/daimler"] h3:after {
    content: "Daimler / Ignore Gravity";
}

a.grid-item[href="/work/backbasekickoff"] h3:after {
    content: "Backbase";
}

a.grid-item[href="/work/siemens"] h3:after {
    content: "Siemens / Non-Profit Event";
}

a.grid-item[href="/work/wonderfeel"] h3:after {
    content: "Wonderfeel Festival";
}

a.grid-item[href="/work/healthbox"] h3:after {
    content: "Healthbox";
}

a.grid-item[href="/work/dancevalley"] h3:after {
    content: "Dance Valley";
}

a.grid-item[href="/work/neonsplash"] h3:after {
    content: "Neonsplash";
}

a.grid-item[href="/work/trycatch"] h3:after {
    content: "Try Catch";
}

a.grid-item[href="/work/beyond"] h3:after {
    content: "Beyond Festival";
}

a.grid-item[href="/work/eenmedia"] h3:after {
    content: "EEN Media";
}

a.grid-item[href="/work/holifestival"] h3:after {
    content: "Holi Festival Of Colours";
}

a.grid-item[href="/work/tommartin"] h3:after {
    content: "Universal Music NL / Tom Martin";
}

a.grid-item[href="/work/3fmawards"] h3:after {
    content: "3FM Awards";
}

a.grid-item[href="/work/marcanthony"] h3:after {
    content: "Marc Anthony";
}

/* 100% (auto) */

/*insert Page collection id here]*/ [class^="portfolio-grid-"] {

  grid-template-columns: auto;
  
  }

/* Homepage Images Zoom */
body.homepage .slide:hover img {
    transform: scale(1.3);
    transition: all 0.3s;
}
body.homepage .slide img {
    transition: all 0.3s;
}

@media screen and (max-width:640px) {
.image-slide-title {
    white-space: initial !important;
}
}

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1638272182429_57131 .slide {
    width: 25% !important;
}
}.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
   font-size: 20px; 
}

/*display full grid gallery image title at all times*/ 

.sqs-gallery-design-strip img { margin-right: 10px; }

.sqs-lightbox-slideshow img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}

Link to comment
On 9/14/2022 at 2:49 PM, elwin5000 said:

Hi @tuanphan, thank you for your help! Please find all code here! Can you see what I did wrong regarding #3? 
 

/* Add subtitle */
h3.portfolio-title:after {
    font-size: 15px;
    color: white;
    display: block;
}
a.grid-item[href="/work/backbase"] h3:after {
    content: "Backbase";
}
a.grid-item[href="/work/ajax"] h3:after {
    content: "Ajax / MTG";
}

a.grid-item[href="/work/close"] h3:after {
    content: "Close";
}

a.grid-item[href="/work/listnride"] h3:after {
    content: "ListNRide";
}

a.grid-item[href="/work/daimler"] h3:after {
    content: "Daimler / Ignore Gravity";
}

a.grid-item[href="/work/backbasekickoff"] h3:after {
    content: "Backbase";
}

a.grid-item[href="/work/siemens"] h3:after {
    content: "Siemens / Non-Profit Event";
}

a.grid-item[href="/work/wonderfeel"] h3:after {
    content: "Wonderfeel Festival";
}

a.grid-item[href="/work/healthbox"] h3:after {
    content: "Healthbox";
}

a.grid-item[href="/work/dancevalley"] h3:after {
    content: "Dance Valley";
}

a.grid-item[href="/work/neonsplash"] h3:after {
    content: "Neonsplash";
}

a.grid-item[href="/work/trycatch"] h3:after {
    content: "Try Catch";
}

a.grid-item[href="/work/beyond"] h3:after {
    content: "Beyond Festival";
}

a.grid-item[href="/work/eenmedia"] h3:after {
    content: "EEN Media";
}

a.grid-item[href="/work/holifestival"] h3:after {
    content: "Holi Festival Of Colours";
}

a.grid-item[href="/work/tommartin"] h3:after {
    content: "Universal Music NL / Tom Martin";
}

a.grid-item[href="/work/3fmawards"] h3:after {
    content: "3FM Awards";
}

a.grid-item[href="/work/marcanthony"] h3:after {
    content: "Marc Anthony";
}

/* 100% (auto) */

/*insert Page collection id here]*/ [class^="portfolio-grid-"] {

  grid-template-columns: auto;
  
  }

/* Homepage Images Zoom */
body.homepage .slide:hover img {
    transform: scale(1.3);
    transition: all 0.3s;
}
body.homepage .slide img {
    transition: all 0.3s;
}

@media screen and (max-width:640px) {
.image-slide-title {
    white-space: initial !important;
}
}

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1638272182429_57131 .slide {
    width: 25% !important;
}
}.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
   font-size: 20px; 
}

/*display full grid gallery image title at all times*/ 

.sqs-gallery-design-strip img { margin-right: 10px; }

.sqs-lightbox-slideshow img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}

The code looks fine. Do you use Personal/Business Plan or higher?

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
23 hours ago, elwin5000 said:

Personal plan currently. What could I change to fix the image titles being cut off?

Add to Design > Custom CSS

.image-slide-title {
    white-space: initial !important;
}

image.png.a9d824ddd83c6822b4fe6136d4360bcc.png

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
  • 2 weeks later...
18 hours ago, elwin5000 said:

Thank you @tuanphan, it works great!! You're amazing!

Last unsolved question from the topic above is #2; would I be able to add a smaller subtitle (client name) to these gallery items within the personal plan? Like this:

Project title 
Client name

I see you achieved this?

https://www.sentimentstudios.com/work

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

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.