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

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! 

#1. Zoom effect

The page doesn't exist

#2. Title/Subtitle

You mean like this?

#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)

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!

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!

#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

#3. Add to Design > Custom CSS

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

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

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

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

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;
}

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?

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

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;
}

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

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