Can I get photo title to appear on the Mosaic module?

[tonyhanf32]

Hello Codeasily,

I love this mosaic layout and it looks great on both desktop and mobile. However, I would like to be able to have the photo title appear on the photo so that my visitors can easily identify and navigate where they would like to browse. I don’t just want the title to come up on hover, I would like it to be static in a transparent grey background along the bottom of the photo. Is that possible with some clever coding?

Thanks in advance and great work with this plugin.

Best
Tony

[Rattus]

Go to edit your Mosaic gallery -> Advanced Settings tab -> in Custom CSS add this code:

.gmediaMosaic a[title]::after {
    background-color: #000;
    bottom: 0;
    color: #fff;
    content: attr(title);
    display: block;
    left: 0;
    opacity: 0.6;
    overflow: hidden;
    padding: 4px 8px;
    position: absolute;
    width: 100%;
    z-index: 20;
}

Save changes. Now on thumb which have filled titles you should see titles.

[tonyhanf32]

Thanks so much. I went through with your code and it looks fantastic. However a few minor glitches I’m curious about.

When I put the short code into two different widgets (visual editor widget and short code widget) using the page builder plugin to build my pages, the gallery doesn’t come through and instead shows this in about 5 lines:

Warning: Illegal string offset ‘size’ in /home4/hanant/public_html/wp-content/plugins/t4p-core/shortcodes.php on line 1753

However, when using just the regular editor it comes out great. BUT, not on mobile. :( It’s really large and covers the whole photo on mobile. Is there anything else you can do to help these situations? I would like to continue using page builder since I’m a novice at coding.

Thanks so much and if I can just get this to look right I’m definitely going to buy the upgrade because I want to take the Gmedia banner off (no offense) and be able to use more features.

Best
Tony

[Rattus]

Well I think the problem is in “t4p-core” plugin, but not in Gmedia. I need FTP access to your server and WP Dashboard access, so I can see what’s happens and try to fix it.
Also send link to your gallery page, so I can look on mobile and give you updated CSS code.

[tonyhanf32]

Ok, I see thanks for getting back to me!

Ok here is the link to my page with the gallery. It looks great on desktop but on mobile it covers about half the photo so I would like it to look similar to the desktop view in terms of ratios.

Also, is it possible to center the text in that box instead of having it all sit on the left side?

http://yogichogi.net/restaurants/

Thanks in advance!

[Rattus]

Here is updated CSS code:

.gmediaMosaic a[title]::after {
    font-size: 100%;
    line-height: 100%;
    text-align: center;
    background-color: #000;
    bottom: 0;
    color: #fff;
    content: attr(title);
    display: block;
    left: 0;
    opacity: 0.6;
    overflow: hidden;
    padding: 4px 8px;
    position: absolute;
    width: 100%;
    z-index: 20;
}
.is_mobile .gmediaMosaic a[title]::after {
    font-size: 60%;
    line-height: 100%;
}

You can play with font-size: 60% to fit your needs.

[tonyhanf32]

Wow thank you so much! It looks amazing and exactly how I wanted it to be. You are the best!

[Rattus]

If it’s not hard for you, please rate my plugin at WordPress repository: http://wordpress.org/support/view/plugin-reviews/grand-media
It’s very important to me. Thanks.

[Author]

Posts