Add a footer to photo gallery

Ask the Community Customization
1

For me I would like to show text below the photo gallery so I can keep my photos at the top, closer to my header page right above it. I am trying to achieve one cohesive look from the header image to the photo gallery as one view when entering my website. The heading pushes the images down enough that they do not remain in sight.

Would you please add a position for the header above or below the photo gallery? Or add a footer field for text to be put at the bottom of the photo gallery.

I will only have one row of images ever, with locations that link to an individual location page

2 Likes
3

Hi there, @Michelle_Clune :waving_hand:

Could you please send me a link to the page, where your widget is installed? I’ll be happy to check what can be done :wink:

1 Like
4

here is the link, website is not published on their domain yet. Per image below, the heading ‘Click on image for parish page’ pushes the images down and you can’t see the images within the view of entering the website. If I don’t have the heading then yes, the images will move up and are more visible.

Having the heading beneath the images will still allow me to instruct the audience to click on images but keep the images in first initial view

681d37db8016d.site123.me

image.png
image.png3812×1850 780 KB

2 Likes
5

Also, you may see a scroll bar with the images because I am trying to close the gap with the section below it, so I have a height restriction on this section with the ElfSight widget, so right now it is forcing the scroll bar on your widget

2 Likes
6

Hi there, @Michelle_Clune :waving_hand:

We’ve added this code to the Custom CSS field on the Style tab of your widget’s settings:

.elfsight-custom-heading {
  text-align: center;
  color: rgb(10, 49, 102);
  font-size: 16px;
}

.eapp-photo-gallery-photo-gallery-heading {
  display: none;
}

And this script was placed in the Custom JS section on the Style tab:

const WIDGET_ID = '9e194b3c-cf78-4869-b217-86e3bfcb95c2';

const translateHeading = () => {
  const galleryComponent = document.querySelector(
    `.elfsight-app-${WIDGET_ID} .eapp-photo-gallery-photo-gallery-component`
  );

  const itemDataElement = galleryComponent?.querySelector(
    '.eapp-photo-gallery-item-data-component'
  );

  if (!itemDataElement) {
    setTimeout(translateHeading, 250);
    return;
  }

  const heading = galleryComponent.querySelector(
    '.eapp-photo-gallery-photo-gallery-heading'
  );

  const newHeading = document.createElement('div');
  newHeading.className = 'elfsight-custom-heading';
  newHeading.textContent = heading.textContent;

  galleryComponent.append(newHeading);
};

translateHeading();

Check it out and let me know if you like the result :slightly_smiling_face:

2 Likes
7

Thank you for adding the heading position to the settings, that is what I was looking for. Another request, is for photo titles to be centered to the photos. Any chance you can help with that?

2 Likes
8

Hi @Michelle_Clune :waving_hand:

Sure, this CSS code will do the trick :wink:

.eapp-photo-gallery-info-title {
  text-align: center;
}
1 Like