How to add a post link button along with lightbox in portfolio/blog

[livemesh]

Make a small modification to the file {theme directory}/framework/functions/thumbnail-functions.php. Modify the link 115 from

$image_info .= 'Preview';

to

$image_info .= 'Preview';
$image_info .= 'View Post';

.

Replace the CSS line numbers 154 to 167 for .image-info class in style.css to –

/*---------- Image Info Hover --------------------------*/
.image-info { display: block; z-index: 120; position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center;
    background: #10A8B5; background: rgba(16, 168, 181, 0.8); opacity: 0; filter: alpha(opacity=0); }
.image-info h3 { position: relative; top: 15%; padding: 10px; margin: 0; font-size: 18px; font-weight: 500; line-height: 28px; }
.image-info:hover h3 a { color: #fff !important; }
.image-info .terms { position: relative; top: 10%; display: block; }
.type-portfolio .image-info .terms { display: none; }
.image-info .image-info-buttons { position: absolute; /* center the buttons */ width: 104px; margin: 0 auto; top: 50%; left: 50%; margin-left: -52px; margin-top: -24px; }
.image-info .terms a { position: relative; display: inline; zoom: 1; font-size: 13px; line-height: 22px; color: #fff !important; }
.image-info a.lightbox-link, .image-info a.post-link { float: left; margin: 0; text-align: center; }
.image-info a.post-link { margin-left: 8px; }
.image-info a.lightbox-link, .image-info a.post-link { padding: 14px; border-radius: 25px; z-index: 110;
    background-color: #888; /* IE */ background-color: rgba(0, 0, 0, 0.5); }
.image-info a.lightbox-link span, .image-info a.post-link span { display: block; text-indent: -9999px; height: 20px; width: 20px;
    background-image: url(images/image-info-buttons.png); background-repeat: no-repeat; }
.image-info a.lightbox-link span { background-position: -28px 1px; }
.image-info a.post-link span { background-position: 1px -28px; }

You should see a link button along with the lightbox on when you hover over a portfolio item or a blog post in the archive pages. Thanks

[davidsneal]

I’d like to go ahead and use this myself, but will this change be overwritten or incorporated in future releases?

[livemesh]

I am in two minds about this. If I have a link already at the top why have another icon? Can’t say for sure if this will be part of next release.

Anyway, worst case, you can include the change again if you need to. I do not expect any change to the above code that will make this change invalid. If I make changes, I will post the changed code for including the link icon here again. Thanks.

[Author]

Posts