Jump to content

Can I add a caption to Wells gallery section with custom code?

Recommended Posts

@Circle001 Hi, It can be done with custom code. However, we've to add the caption on the code for each image. And if you want to update the caption, it'll have to be done on the code. I can help with the code if you can provide the captions for each image. Let me know if you would still like to follow the custom code approach.  Thanks!

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
  • 2 weeks later...
On 9/1/2023 at 3:54 PM, Circle001 said:

Hi Sam, following up on your offer to help withe captions. Can you help with that please?

 

Caption like this?

image.thumb.png.76b02f9423d97ad0d04680497ed15c55.png

Add to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
    $('.thumb').each(function(){
        var text = $(this).find('img').attr("alt");
        console.log(text);
        $(this).append('<div class="wells-caption">' + text + '</div>');
    })
})
</script>
<style>
  .wells-caption {
    background-color: violet;
    margin-top: -20px;
    z-index: 999999;
    position: absolute;
    width: 100%;
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
  • 1 month later...

Very interesting solution! Would it be possible to have the same with Title + caption for the gallery slides? If I'm changing the CSS to


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
    $('.slide').each(function(){
        var text = $(this).find('img').attr("alt");
        console.log(text);
        $(this).append('<div class="wells-caption">' + text + '</div>');
    })
})
</script>
<style>
  .wells-caption {
    background-color: gray;
    margin-top: -20px;
    z-index: 999999;
    position: absolute;
    width: 100%;
  }
</style>

unfortunately, I'm getting a screen mess with a lot of "undefined" text blocks... Anyone with a solution? Also, is it possible with this solution to print the Tittle + caption outside the image borders?

Markus Gröteke

Architectural, interior, art and exhibition photography.
Web: architectureshooting.com | Instagram: architectureshooting

Link to comment
On 10/26/2023 at 4:27 PM, architectureshooting said:

Very interesting solution! Would it be possible to have the same with Title + caption for the gallery slides? If I'm changing the CSS to


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
    $('.slide').each(function(){
        var text = $(this).find('img').attr("alt");
        console.log(text);
        $(this).append('<div class="wells-caption">' + text + '</div>');
    })
})
</script>
<style>
  .wells-caption {
    background-color: gray;
    margin-top: -20px;
    z-index: 999999;
    position: absolute;
    width: 100%;
  }
</style>

unfortunately, I'm getting a screen mess with a lot of "undefined" text blocks... Anyone with a solution? Also, is it possible with this solution to print the Tittle + caption outside the image borders?

Can you share link to page where you use slide?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
On 12/5/2023 at 9:26 PM, architectureshooting said:

Sorry, i missed your reply some time ago. This is my page with a slider

https://architectureshooting.com/architekturfotografie/sfvv-berlin-marte-marte-freitreppe

Kind regards

Markus

The text already exist, but it is invisible on desktop, you can add this to Website Tools (under Not Linked) > Custom CSS to make it visible

.collection-type-gallery #slideshow .slide .image-title-mobile, .collection-type-gallery #slideshow .slide .image-desc-mobile {
    display: block !important;
    position: relative;
    top: -100px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

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.