New to the community? Start here

Gallery options in different themes?

Hi there,

We are finally starting to build the wp sites for our yoga studio. We initially chose the Sprit as our theme to develop on, but now that you have released new ones, we really liked the masonry gallery in Luke + Sara. We will be using the masonry / tiled gallery a lot on our pages in different ways, so it would be nice that it worked well and would be as easy as possible to customise for us.

So is the masonry gallery available as a normal upfront tool or is it only for Luke + Sara?

Also, in any case, we need to tweak it a bit at least for our front page, which should be looking like the one in the front page here: http://www.breatheyoga.com

Is it possible to use solid colour as the hover background in the masonry gallery? Is it possible to not use solid colour in some “tiles” of the gallery instead of an image?

I’m guessing this would require some CSS formatting :slight_smile:, which I am not an expert in. But our CSS expert can contact you for more detailed support, if needed.

For now, I would just like to make the decision about the theme, Spirit or Luke + Sara? Which one would you recommend when the masonry gallery is used in many of the pages, not only front page and not only portfolio?

Thanks so much,

Lotta from HIMA Happiness

Fri, 9 Oct 2015 10:16:00
  • Sajid
    • DEV MAN’s Sidekick

    Hi @Laura Janger-Laitio

    Hope you are doing good today :slight_smile:

    I can see Enable label sorting option in spirit theme too. Is it not what you are looking for ?

    For solid color of background on hover, replace following code:

    .page-template-home-php .landing-pic-nav .img-link a > div:hover, .page-template-home-php .landing-pic-nav .img-link > div:hover {
    
background-color: rgba(255, 0, 73, 0.84);
    
}

    With this one:

    .page-template-home-php .landing-pic-nav .img-link a > div:hover, .page-template-home-php .landing-pic-nav .img-link > div:hover {
    
background-color: rgba(255, 0, 73, 1);
    
}

    Hope that helps :slight_smile: or feel free to post a reply if needed.

    Cheers, Sajid

  • Laura Janger-Laitio
    • Site Builder, Child of Zeus

    Hello, and thank you for your reply!

    – I am not sure what Enable Label sorting actually means, what does it do? I found the short description, but it does not sound like what we are looking for? We are hoping to have only 3 square images per gallery row, the size of which would be relative to the screen and window size. This way we could have 9 images with 3 by 3 rows and columns. How could we achieve this?

    – Thank you for the code as well! However, I’m not sure where I can find the original code that I need to replace the new code with? Could you tell me where to find the .page-template-home-php code?

    Thank you!

  • Sajid
    • DEV MAN’s Sidekick

    Hi @Laura Janger-Laitio

    Hope you are doing good today :slight_smile:

    Enable Label sorting option will let you organize your gallery images like in different categories. To add new label click on tag button of gallery image (first screenshot) and add your own label. Same with all other images. Now it will work like attached animated gif (second one, click on image to see animation). You can use this gallery also to display three images in one row but as stated earlier it would work somewhat like Luke + Sara. Here are the steps to make it like Luke + Sara gallery.

    1. Create a gallery with Gallery element.

    2. Click on settings of gallery.

    3. Chose 2:3 thumbnail ratio for images.

    4. Thumbnail size full ( 250×379).

    5. Padding 0 pixels.

    6. Check "Even padding"

    7. Caption Style: Over Image

    8. Show caption on hover: Yes

    9. Height of captions (in px). should be 20.

    10. Now click on click on styles and anchor settings > add new style.

    11. Copy following code and paste in the text box.

    .upfront-gallery {
    
padding: 0 !important;
    
}
    
.ugallery {
    
width: 100% !important;
    
display: block;
    
}
    
.ugallery_item {
    
width: 33.333333% !important;
    
height: 450px !important;
    
max-height: 450px !important;
    
overflow: hidden;
    
}
    
.ugallery_link {
    
height: 450px;
    
display: block;
    
position: relative;
    
margin-bottom: 0;
    
transform-style: preserve-3d;
    
-ms-transform-style: preserve-3d;
    
-moz-transform-style: preserve-3d;
    
-webkit-transform-style: preserve-3d;
    
}
    
img.ugallery-image {
    
width: 100% !important;
    
height: auto !important;
    
display: block;
    
position: relative;
    
top: 50% !important;
    
margin-top: 0 !important;
    
margin-bottom: 0 !important;
    
transform: translateY(-50%);
    
-ms-transform: translateY(-50%);
    
-moz-transform: translateY(-50%);
    
-webkit-transform: translateY(-50%);
    
}
    
.ugallery_link p:before {
    
margin-top: 53%;
    
margin-bottom: 24%;
    
}

    12. Name the style for example "ls-gallery" and save settings.

    This will make the gallery look exactly like luke + Sara gallery.

    For second questions: Is this your website http://www.breatheyoga.com ? If yes then I the code I posted above will be in style.css file. If not then can you post the link of your own site where I can see the hover effect background color and suggest you code to add in custom CSS section ?

    Take care and have a nice day :slight_smile:

    Cheers, Sajid

    [attachments are only viewable by logged-in members] [attachments are only viewable by logged-in members]

  • Laura Janger-Laitio
    • Site Builder, Child of Zeus

    Hi! Thank you for this, but I don't think the Enable label sorting is not what we are looking for.

    I have been trying different codes and probably ended up with a mess, and it looks like in the picture I attached.

    – The problem seems to be that the images are not squares, instead they are higher than their width.

    – I managed to make a solid hover color but cannot get the text horizontally AND vertically centered.

    I know there is probably useless code and problems in this, but here is the code I am using now:

    .ugallery {

    backface-visibility: hidden;

    }

    .ugallery_item:hover img {

    opacity:1;

    color: #fff;

    }

    .ugallery-thumb-title {

    background-color:gray;

    width: 450px;

    height: 450px;

    text-align:center;

    line-height:400px;

    }

    .ugallery-thumb-title a {

    color: black;

    text-align:center;

    line-height:400px;

    }

    {

    text-align: center;

    line-height:400px;

    }

    .ugallery_item {

    margin-left: 0px !important;

    margin-right: 0px !important;

    margin-top: 0px;

    margin-bottom: 0px;

    width: 100%;

    height: 100%;

    }

    .ugallery_item a {

    overflow: hidden;

    display: block;

    text-decoration: none;

    width: 450px;

    height: 450px;

    }

    .ugallery_item a img.ugallery-image {

    width: 450px;

    height: 450px;

    }

    .ugallery_item a:hover img.ugallery-image {

    -webkit-filter: blur(2px);

    -moz-filter: blur(2px);

    -o-filter: blur(2px);

    -ms-filter: blur(2px);

    filter: blur(2px);

    filter:progid:smiley:XImageTransform.Microsoft.Blur(PixelRadius=2);

    }

    .ugallery_item a:hover:before, .ugallery_item a:hover:after {

    position: absolute;

    left: 0;

    top: 0;

    width: 450px;

    height: 450px;

    display: block;

    }

    .ugallery_item a:hover:before {

    content: " ";

    background: rgba(48,48,48,0.4);

    }

    .ugallery_item a:hover:after {

    content: " " ;

    background: url("/Upfront/wp-content/themes/uf-spirit/images/plus.png":wink: center center no-repeat;

    }

    .ugallery-thumb-title {

    box-sizing: border-box;

    line-height:400px;

    font: 14px/15px Open Sans, Arial;

    }

    .ugallery_labels {

    padding: 0px 0px 20px;

    }

    .ugallery_labels a {

    background-color: #69A8A6;

    color: #FFF;

    border-radius: 4px;

    font: 14px/16px 'Open Sans', Arial;

    text-align: center;

    line-height:400px;

    padding: 4px 41px;

    padding-top: 200px;

    display: inline-block;

    text-decoration: none;

    text-transform: capitalize;

    border: 2px solid #69A8A6;

    }

    .ugallery_labels a:hover {

    background: #4F7E7D;

    border-color: #4F7E7D;

    }

    .ugallery_labels a.filter_selected {

    color: #4F7E7D;

    background: #FFFFFF;

    }

    .upfront-gallery {

    padding: 0 !important;

    }

    .ugallery {

    width: 100% !important;

    display: block;

    }

    .ugallery_item {

    width: 33.333333% !important;

    height: 450px !important;

    max-height: 450px !important;

    overflow: hidden;

    }

    .ugallery_link {

    height: 450px;

    display: block;

    position: relative;

    margin-bottom: 0;

    transform-style: preserve-3d;

    -ms-transform-style: preserve-3d;

    -moz-transform-style: preserve-3d;

    -webkit-transform-style: preserve-3d;

    }

    img.ugallery-image {

    width: 100% !important;

    height: auto !important;

    display: block;

    position: relative;

    top: 50% !important;

    margin-top: 0 !important;

    margin-bottom: 0 !important;

    transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    -moz-transform: translateY(-50%);

    -webkit-transform: translateY(-50%);

    }

    .ugallery_link p:before {

    margin-top: 53%;

    margin-bottom: 24%;

    }

    breatheyoga.com is not our site, and I am only doing test coding locally on my computer using MAMP, so unfortunately I cannot give a link. We are just trying to make our site look like something similar to breatheyoga.com. Thank you so much!

    [attachments are only viewable by logged-in members]

  • Sajid
    • DEV MAN’s Sidekick

    Hi @Laura Janger-Laitio

    Hope you are doing good today :slight_smile:

    For images size issue, you can adjust the height and width according to your requirements by adjust the size as mentioned above in step four.

    I am sorry but its not possible for us to tell you what code is the culprit without having access to your site. If you can somehow upload your site on a remote server then I could try to find the issue and give you exact code to make the text center on hover with solid color.

    If you still can’t upload then try to use text-align center for text alignment without left right padding to align vertically center. To make it center you can either make the element position absolute and then use top:50% or simple give some padding-top:50px and adjust it accordingly.

    Hope that helps :slight_smile:

    Cheers, Sajid