HOW TO SHOW IMAGE DESCRIPTIONS / Gallery Page / Avenue Template

Site URL: https://www.bengoodmanart.com

I've used the wells template in the past and loved the way it would display the image descriptions in the lower left corner. however, when switching to avenue I've noticed that the descriptions are not displayed. I can't find any way to change this. I love the layout of the site in every other way. I attached an image of where id like to be able to place it, in either of the areas indicated with red boxes.

please let me know how to set this up!

Thank you!

Single image blocks on a page will allow you do put descriptions in a text block on the corner. If you use a gallery block on a page you can put a description of the gallery in the corner but not for each image, that can be added to the image in image settings. Other than those options I don't see a way to do this. If I understand your request asking if there is a way to have a descripton of each image in a corner as it shows up in a slide show. 

On 6/19/2022 at 4:25 AM, bizballs said:

Site URL: https://www.bengoodmanart.com

I've used the wells template in the past and loved the way it would display the image descriptions in the lower left corner. however, when switching to avenue I've noticed that the descriptions are not displayed. I can't find any way to change this. I love the layout of the site in every other way. I attached an image of where id like to be able to place it, in either of the areas indicated with red boxes.

 

please let me know how to set this up!

 

Thank you!

Can you share link to page in screenshot? I tried checking some pages & don't find it.

here's the site landing page:

https://www.bengoodmanart.com

and here's a link to one of the galleries:

https://www.bengoodmanart.com/series-i

the same would apply for all pages. I want to be able to create that wells style lower corner description

Try adding to Design > Custom CSS

.collection-type-gallery #slideshowWrapper .slide:after {
    display: block;
    position: absolute;
    bottom: -100px;
    color: black;
    z-index: 9999999;
    text-align: center !important;
    left: 50%;
    transform: translateX(-50%);
}

.collection-type-gallery #slideshowWrapper .slide {
    overflow: Visible !important;
}

div#slideshow {
    overflow: visible !important;
}
.collection-type-gallery #slideshowWrapper .slide:nth-child(1):after{
    content: "test caption 1";
}
.collection-type-gallery #slideshowWrapper .slide:nth-child(2):after{
    content: "test caption2";
}
.collection-type-gallery #slideshowWrapper .slide:nth-child(3):after{
    content: "test caption 3";
}

Thank you so much! This is going to work I just have a few questions.

How do I set it up so each gallery can have its own descriptions? When I tried this, the first image in each of the galleries had 'test caption 1' under it, and so on. I'll need to have unique descriptions for each gallery.

and if I wanted to play with where the text is aligned, how would I do that? currently it is centered below the images which I don't mind.

again, thank you so much!

On 7/3/2022 at 11:06 PM, bizballs said:

Thank you so much! This is going to work I just have a few questions.

How do I set it up so each gallery can have its own descriptions? When I tried this, the first image in each of the galleries had 'test caption 1' under it, and so on. I'll need to have unique descriptions for each gallery.

and if I wanted to play with where the text is aligned, how would I do that? currently it is centered below the images which I don't mind.

 

again, thank you so much!

Try this code for Series-i page

body#collection-5bf58f266d2a7333a511b400 {
#slideshowWrapper .slide:after {
    display: block;
    position: absolute;
    bottom: -100px;
    color: black;
    z-index: 9999999;
    text-align: center !important;
    left: 50%;
    transform: translateX(-50%);
}

#slideshowWrapper .slide {
    overflow: Visible !important;
}

div#slideshow {
    overflow: visible !important;
}
#slideshowWrapper .slide:nth-child(1):after{
    content: "test caption 1";
}
 #slideshowWrapper .slide:nth-child(2):after{
    content: "test caption2";
}
#slideshowWrapper .slide:nth-child(3):after{
    content: "test caption 3";
}}

To align left, remove these lines

text-align: center !important;
    left: 50%;
    transform: translateX(-50%);

To align right, remove these above line + add this under

 right: 0;

Can you share link to some other pages? I will try testing some code to add different caption

this will work really well!

here's an example of what it looks like.

how would I insert line breaks into the descriptions so it reads like this below? for example:

18” x 24” (45.7cm x 61cm)
Acrylic, Charcoal, Ink, Marker, Oil, Paper, Pastel on Canvas
c.2019

-----

per your question, here are links to other pages:

landing page: https://www.bengoodmanart.com

series ii: https://www.bengoodmanart.com/series-ii

birch: https://www.bengoodmanart.com/birch

etc.

if you tell me how to find the content block ID I think I could figure out copying this code for each gallery.

final question, is there a way to ignore this style for mobile only?

again, thank you so much!

This code for series ii

@media screen and (min-width:901px) {
body#collection-5bf58f266d2a7333a511b400 {
#slideshowWrapper .slide:after {
    display: block;
    position: absolute;
    bottom: -100px;
    color: black;
    z-index: 9999999;
    text-align: center !important;
    left: 50%;
    transform: translateX(-50%);
}

#slideshowWrapper .slide {
    overflow: Visible !important;
}

div#slideshow {
    overflow: visible !important;
}
#slideshowWrapper .slide:nth-child(1):after{
    content: "test caption 1";
}
 #slideshowWrapper .slide:nth-child(2):after{
    content: "test caption2";
}
#slideshowWrapper .slide:nth-child(3):after{
    content: "test caption 3";
}}
}

This code for Ben Goodman page

@media screen and (min-width:901px) {
body#collection-5bf59bb82b6a28025bd0b661 {
#slideshowWrapper .slide:after {
    display: block;
    position: absolute;
    bottom: -100px;
    color: black;
    z-index: 9999999;
    text-align: center !important;
    left: 50%;
    transform: translateX(-50%);
}

#slideshowWrapper .slide {
    overflow: Visible !important;
}

div#slideshow {
    overflow: visible !important;
}
#slideshowWrapper .slide:nth-child(1):after{
    content: "test caption 1";
}
 #slideshowWrapper .slide:nth-child(2):after{
    content: "test caption2";
}
#slideshowWrapper .slide:nth-child(3):after{
    content: "test caption 3";
}}
}

body#collection-5bf59bb82b6a28025bd0b661 is Page ID.

Follow this guide to find Page ID.

thank you kindly!!!