Title of the image instead of the Link icon

Hi there,
is it possible to modify the widget in order to have what in the subject??

See below example with Steak Pie:

Schermata-2013-07-11-alle-11.23.10.jpg

Thanks
Stefano
www.movi-menti.it

Hey.
Please send me a PM with:
1. URL to your website
2. login and password of user with admin/super-admin privileges (please create one for me)
3. ftp data (host, user, password)
4. link to this thread

Bey,

Any updated on this topic?

Did you receive my PM?

Cheers
Stefano

Sorry, didnt get it :/
Could You send it again - I'll work on this matter in monday.

Changes made .

For those who would like to know how - it is a customization that requires editing of few files and have to be done again after updating template.
Files to edit:
/wp-content/themes/Creativity/js/widgets/portfolio.js
/wp-content/themes/Creativity/css/extensions.css

portfolio.js - replace:

Code: Select all

   // add overlays
   widget.find('.gk-image').each(function(i, img) {
      img = jQuery(img);
      if(img.find('.gk-img-overlay').length == 0) {
         // create overlays
         var overlay = jQuery('<div class="gk-img-overlay"></div>');
         overlay.html('<span></span>');
         img.append(overlay);
         // add overlay events
         img.mouseenter( function() {
            var overlay = img.find('.gk-img-overlay');
            var realImg = img.find('img');
            overlay.css({
               'margin-left': (-1.0 * (realImg.width() / 2.0)) + "px",
               'width': realImg.width() + "px"
            });
            overlay.attr('class', 'gk-img-overlay active');
         });

         img.mouseleave(function() {
            var overlay = img.find('.gk-img-overlay');
            overlay.attr('class', 'gk-img-overlay');
         });
      }
   });


with:

Code: Select all

   // add overlays
   widget.find('.gk-image').each(function(i, img) {
      var img = jQuery(img);
      var title = jQuery(img).attr('title');
      if(img.find('.gk-img-overlay').length == 0) {
         // create overlays
         var overlay = jQuery('<div class="gk-img-overlay"></div>');
         overlay.html('<span><i>'+title+'</i></span>');
         img.append(overlay);
         // add overlay events
         img.mouseenter( function() {
            var overlay = img.find('.gk-img-overlay');
            var realImg = img.find('img');
            overlay.css({
               'margin-left': (-1.0 * (realImg.width() / 2.0)) + "px",
               'width': realImg.width() + "px"
            });
            overlay.attr('class', 'gk-img-overlay active');
         });

         img.mouseleave(function() {
            var overlay = img.find('.gk-img-overlay');
            overlay.attr('class', 'gk-img-overlay');
         });
      }
   });


(the code block exist in two places at the end of the .js file)

extensions.css - replace:

Code: Select all

.gk-portfolio .gk-images-wrapper > a > .gk-img-overlay > span:before {
   border: 2px solid #fff;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   color: #fff;
   content: "\f0c1";
   font-family: FontAwesome;
   font-size: 22px;
   height: 52px;
   left: 50%;
   line-height: 50px;
   margin: -32px 0 0 -32px;
   opacity: 0; filter: alpha(opacity=0);
   position: absolute;
   text-align: center;
   top: 65%;
   -webkit-transition: all .2s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
   width: 52px;
}


with:

Code: Select all

.gk-portfolio .gk-images-wrapper > a > .gk-img-overlay > span > i {
   color: #fff;
   font-size: 22px;
   height: 52px;
   line-height: 50px;
   margin: -32px 0 0 0;
   left: 0px;
   opacity: 0; filter: alpha(opacity=0);
   position: absolute;
   text-align: center;
   top: 65%;
   -webkit-transition: all .2s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
   width: 100%;
}


and

Code: Select all

.gk-portfolio .gk-images-wrapper > a > .gk-img-overlay.active span:before {
   opacity: 1; filter: alpha(opacity=100);
   top: 50%;
}


with:

Code: Select all

.gk-portfolio .gk-images-wrapper > a > .gk-img-overlay.active i {
   opacity: 1; filter: alpha(opacity=100);
   top: 50%;
}


What it does - it puts links title in adidional <i> element inside of the span, removes fontawesome from :before the span, and replaces the :before with our i element giving it some styling.

Thank you very much! Now it's fantastic

Did you like how I changed the Image show CSS?

Again, thanks!

Stefano
http://movi-menti.it

Its nice to see work of people who knows a lot about css3 - nice effect indeed.

That doesn't work for me. And I Don't know why.
I changed the code like provided and now the portfolio is vanished.

www.obornik.de/wordpress

Probably you did something wrong. I would suggest trying to restore oryginal files and use html/php enabled editor to edit the files. Perhaps sever error log will help to find the cause of the problem.

I tried it 10 times, with differentkinds of editors and iit just didn't work. Sorry.

Is it possiible that you fix that? I would pay for it, of course.

Please do 2 things:
1. Bring back the original files of the widget
2. PM me FTP access to your hosting server and login/password for wp user with admin privileges (create one for me).

If you will be able to do it today, I'll check it tomorrow.

Hi, did you get my PM?

Sorry, no please send it again.

OK, it says "SENT: MON JAN 27, 2014 4:02 PM" but it's still in the outbox.
I don't know if yo got it.

I did the change and it works fine. Please remember to backup the template files, because if you will update it someday, the changes will disappear.

Tanks a lot!!!

I was able to make the changes, but now the image shows nothing (no title or icon) when I hover. I don't think I did anything wrong, but nothing is being loaded within the <span> tags now.

Any help is appreciated!

The only thing that is possible is that you have made the changes wrong.
Could You please post an url to your site?

The only thing that is possible is that you have made the changes wrong.
Could You please post an url to your site?

Sure http://wp.paulgiordano.com/#gk-header

I've attached the extensions.css and portfolio.js that I'm using.

Thanks for your help.

Any update on this?

It seems you have found a bug in our template .
Please provide an information how would you modify the background - what colour should it be, Ill provide correct override.css declaration to fix that.
Ill also inform you when the fix for template will be ready.

It seems you have found a bug in our template .
Please provide an information how would you modify the background - what colour should it be, Ill provide correct override.css declaration to fix that.
Ill also inform you when the fix for template will be ready.

Interesting, thanks for looking into that.

I'm going to leave the background hover color the default color II (#67b5ff).

Ok, that above responce should not go to this post :/
I have checked the js file and it seems to be working fine.
Could you post a link to a site, where those changes was made?

Ok, that above responce should not go to this post :/
I have checked the js file and it seems to be working fine.
Could you post a link to a site, where those changes was made?

Sure http://wp.paulgiordano.com/#gk-header

I'm hoping to have this fixed ASAP, thanks

Now I see where the problem lies.
In your portfolio.js you will find same block of code added twice. You have modified it in first block of code, but scroll down few lines and same code will be there again - please correct it also there.

Now I see where the problem lies.
In your portfolio.js you will find same block of code added twice. You have modified it in first block of code, but scroll down few lines and same code will be there again - please correct it also there.

I just tried this, and it did not fix anything. Here is the live code I see for the image when I hover. Notice that there is no title within the SPAN tags. It seems there's an issue calling the title in the JS.


<a href="http://wp.paulgiordano.com/?p=1016" title="TWC About Us Technology" class="gk-image animate_queue_element active loaded">
<img src="http://wp.paulgiordano.com/wp-content/themes/Creativity/gavern/cache_nsp/technology-widget_gk_portfolio-2.png" alt="TWC About Us Technology">
<div class="gk-img-overlay" style="margin-left: -167px; width: 334px;">
<span></span>
</div>
</a>


I had a similar issue with a lightbox plugin due to the latest version of Wordpress. I was forced to add code to the functions.php to allow the title of the image to show up.

Please check this file:
http://wp.paulgiordano.com/wp-content/t ... ?ver=3.8.1
Scroll it to the bottom, and slowly up. Find this block:

Code: Select all

// add overlays
        widget.find('.gk-image').each(function (i, img) {
            img = jQuery(img);
            if (img.find('.gk-img-overlay').length === 0) {
                // create overlays
                var overlay = jQuery('<div class="gk-img-overlay"></div>');
                overlay.html('<span></span>');
                img.append(overlay);
                // add overlay events
                img.mouseenter(function () {
                    var overlay = img.find('.gk-img-overlay');
                    var realImg = img.find('img');
                    overlay.css({
                        'margin-left': (-1.0 * (realImg.width() / 2.0)) + "px",
                        'width': realImg.width() + "px"
                    });
                    overlay.attr('class', 'gk-img-overlay active');
                });

                img.mouseleave(function () {
                    var overlay = img.find('.gk-img-overlay');
                    overlay.attr('class', 'gk-img-overlay');
                });
            }
        });


It is still not changed.

Please check this file:
http://wp.paulgiordano.com/wp-content/t ... ?ver=3.8.1
Scroll it to the bottom, and slowly up. Find this block:

Code: Select all

// add overlays
        widget.find('.gk-image').each(function (i, img) {
            img = jQuery(img);
            if (img.find('.gk-img-overlay').length === 0) {
                // create overlays
                var overlay = jQuery('<div class="gk-img-overlay"></div>');
                overlay.html('<span></span>');
                img.append(overlay);
                // add overlay events
                img.mouseenter(function () {
                    var overlay = img.find('.gk-img-overlay');
                    var realImg = img.find('img');
                    overlay.css({
                        'margin-left': (-1.0 * (realImg.width() / 2.0)) + "px",
                        'width': realImg.width() + "px"
                    });
                    overlay.attr('class', 'gk-img-overlay active');
                });

                img.mouseleave(function () {
                    var overlay = img.find('.gk-img-overlay');
                    overlay.attr('class', 'gk-img-overlay');
                });
            }
        });


It is still not changed.

Sorry, didn't save the change before....

Made the change now, and nothing shows up for the portfolio at all

Showing the following errors:

Uncaught ReferenceError: title is not defined - portfolio.js?ver=3.8.1:127
(anonymous function) - portfolio.js?ver=3.8.1:127
gkPortfolioInit - portfolio.js?ver=3.8.1:125
(anonymous function) - portfolio.js?ver=3.8.1:10
(anonymous function) - portfolio.js?ver=3.8.1:5

In both places please replace:

Code: Select all

title = img.attr('title');


with:

Code: Select all

title = jQuery(img).attr('title');


In both places please replace:

Code: Select all

title = img.attr('title');


with:

Code: Select all

title = jQuery(img).attr('title');


Unfortunately, this didn't fix the issue either

However, when I click the More Work button, it reveals the images, but the hover does not work.

Code: Select all

var img = jQuery(img);
var title = jQuery(img).attr('title');


and this way?

Code: Select all

var img = jQuery(img);
var title = jQuery(img).attr('title');


and this way?

FIXED!

Thanks, that seemed to work.

Ok, Ill update info in thread.

Ok, Ill update info in thread.

Great,

One more question. The "Data source settings" in the widget settings, is there a way to make the images load in random order that changes each refresh?

No, there is no such functionality right now.

Hi Cyberek!

I allready made the changes in the 2 files...
But I have a question, I have to add and additional format in the title of the images or in the post?? or how it works?

Thanks

You need to add a tittle to an image (via media editor for example). But this is quite old solution and I'm not sure if it will work with updated wp.