Detail button on hover and at bottom

[Chase_Jones]

I use the portfolio widget to display in-stock trailer inventory on my website. A lot of my customers do not understand that they need to click on the image to view more information about the trailer. I am hoping to get some code written for 2 things:

1. A “more details” button (that looks like a load more button) to be displayed centered below each portfolio item
2. On hover, a “more details” button (that looks like a load more button) to be displayed centered horizontally and vertically on the image

[Sina]

Hi @Chase_Jones

The first layout is suitable for your project.
You can also test the others to see if you like them. You can change the button style later.

Enter a simple button in the code editor as shown.

Choose here the Project Layout (1st, 2nd or 3rd)

1st Project Style

2nd Project Style

3rd Project Style

Add this code as needed to the Custom CSS field on the Appearance tab of your Portfolio widget’s settings:

/*2nd Layout Your Project*/
[class*="ProjectLookCard__Info-sc"]{
  text-align: center !important;
}
/*2nd Layout Project details*/
[class*="TextLabelGroup__Container-sc"]{
 justify-content: center !important;
}
/*3rd Layout Your Project*/
[class*="ProjectLookBottomOverlay__Name-sc"]{
  text-align: center !important;
}
/*2nd 3rd Layout load more button*/
.eapp-portfolio-shortened-container{
  text-align: center !important;
  align-items: center;
}

Please try it out and let me know if you like the result

[Chase_Jones]

Thank you for the quick response. However, that did not work for me. I added the code as you described and all it did was center the title information under the picture and show a load more button once you click on item.

I added a rough paint sketch of what I am shooting for. Pardon the kindergarten art;)

[Sina]

Hi @Chase_Jones
I can forgive the kindergarten drawing

Which Layout and which Project Style do you use ?

Would you share the link to your widget ?

[Chase_Jones]

I am using grid layout and the 2nd project style option

PWC, Jet Ski, Raft Trailers (Triton+X-Treme)

[Sina]

Hi @Chase_Jones

OK, I’ll take a look. Copy that into the custom CSS area as well. This will only show one line of the description on the overview.

[class*="ShortenedText__Component-sc"]{
-webkit-line-clamp: 1;/*1 line*/
}

[Chase_Jones]

Ok, I look forward to hearing back from you

[Sina]

Hi @Chase_Jones

Project Details is now used as a heading in the overview.
All of this is explained again in the description.

Add the button code in the first line

[class*="ShortenedText__Component-sc"]{
-webkit-line-clamp: 1;/*1 line*/
}

.global-styles,
.eapp-portfolio-project-detailed-description button{
  display:none;
}

We’ll get rid of those 3 points somehow.

https://bd1edfdc682c46b3a9e8bf7498fed829.elf.site
please try

[Sina]

Replace

[class*="ShortenedText__Component-sc"]{
-webkit-line-clamp: 1;/*1 line*/
}

with

[class*="ShortenedText__Component-sc"] {
max-height: calc(1.33em * 2);
display: block;
line-height: 1.33;
max-height: 2.66em;
overflow: hidden;
}

the 3 points are now gone

[Chase_Jones]

Thanks for your help. I still can’t get it to work. Here is what I have in the custom CCS and what it is showing:

[Sina]

Hi @Chase_Jones

what does this look like?
have you add the button ?

[Chase_Jones]

Yep, it looks just like your screenshot

[Max]

Hi there, @Chase_Jones

Would you like to open the popup only using these buttons or clicking the project title and image should also trigger the popup?

[Chase_Jones]

Both. I would like to be able to click the button as well as the picture and project title to open it. Thanks!

[Max]

Got it, thanks!

I’ve passed your request on to the devs and will update you once the solution is ready

[Max]

Thank you for waiting, @Chase_Jones

Please add this code to the Custom CSS field on the Style tab of your widget’s settings:

.eapp-portfolio-project-look-card-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.es-details-button {
  background: rgb(0, 29, 255);
  color: white;
  padding: 7px 28px;
  font-size: 15px;
  font-weight: bold;
  border-radius: 4px;
  width: fit-content;
  margin: 0 auto;
  transition: background 0.1s;
}

.es-details-button:hover {
  background: rgb(0, 23, 204);
}

.eapp-portfolio-picture-container .es-details-button {
  display: none;
}

.eapp-portfolio-picture-container:hover img {
  filter: grayscale(100%);
}

.eapp-portfolio-picture-container:hover .es-details-button {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

And this script should be placed in the Custom JS field on the Style tab:

const waitForElement = (selector, root = document) => new Promise(res => {
  let i = 0;

  const check = () => {
      const component = root.querySelector(selector);

      if (component) {
          res(component);
      } else if (i !== 50) {
          setTimeout(check, 100);
          i++;
      }
  };

  check();
});

waitForElement(".eapp-portfolio-project-list-layout-grid-list").then(({ childNodes }) => {
  const items = [...childNodes];
  
  const button = document.createElement("div");
  button.classList.add("es-details-button");
  button.textContent = "More Details";
  items.forEach((item) => {
    const details = item.querySelector(".eapp-portfolio-project-look-card-info");
    details.append(button.cloneNode(true));
    
    const imageContainer = item.querySelector(".eapp-portfolio-picture-container");
    imageContainer.append(button.cloneNode(true));
  });
});

Please try it out and let me know if you like the result

[Chase_Jones]

This code worked awesome! Thank you!

[Max]

Perfect, you’re always welcome