Topic on Extension talk:Title Icon

Love the Concept, but need it to work in the Foreground skin

37
Christharp (talkcontribs)

Hi

Love the concept of this extension. Would like it to work inside the Foreground skin. The problem is that the Foreground skin doesn't use the "firstHeading" id, but instead labels the class:"title". I'm thinking it shouldn't be that hard to change the code to reflect that, but before I set out down that route I thought I would ask if you see any problems, etc., with doing that.

All the best to you. And thanks for the extensions (using semantic rating also).

Cindy.cicalese (talkcontribs)

Thank you for the feedback! I would love to see TitleIcon work for additional skins.

For the short term, I would think that what you suggest would work: changing the code so that instead of looking for id "firstHeading" it looks for class "title". That would just be a matter of changing occurrences of "jQuery('#firstHeading')" to "jQuery('.title')" (or something similar). In fact, this could be done in a general way by specifying the CSS selector in a LocalSettings.php configuration variable that defaults to "#firstHeading" rather than hardcoding it. The only danger I can see is that it is possible that the class "title" might be used elsewhere in the page, causing the icon to appear in unanticipated locations. One might actually consider that a feature, if you wanted to be able to embed an icon elsewhere in the page.

If you would like to propose a patch to give you this functionality, feel free. Otherwise, I will try to update the code very soon.

I'm glad to hear that you are using Semantic Rating as well. We are getting ready to open source a couple of other extensions in the next couple of weeks.

Christharp (talkcontribs)

Hi thanks for the replying (some extension writers take a while). I'll hopefully be playing with making it work with Foreground before the weekend ends.

I could be wrong on this, but I didn't see in the documentation if the property "Title Icon" is created automatcally by the extension, or if one needs to create it. A small thing, but thought it should be mentioned. (Some of SM Extensions -- like SemanticACL, I think , do create the properties automatically).

And since I'm in the middle of redesigning my whole site in the Foreground skin I have to ask: what wonderful new extensions are you releasing? Actual statements on what's coming is best, but I'll take hints too.

All the best to you.

128.29.43.2 (talkcontribs)

I have submitted a patch for review that I believe provides the functionality you requested to support the Foreground skin: https://gerrit.wikimedia.org/r/#/c/168019/. There is now a configuration variable $TitleIcon_CSSSelector that defaults to "#firstHeading" but can be changed to ".title" to support Foreground. I tested on one of my wikis using a div, and it appears to work. Could you please test with Foreground and let me know if it works for you? If it does, could you please review and +1 the change in gerrit at the link provided above? Once I receive confirmation from you, I will merge the change and update the documentation. (The patch also includes some modifications that do not affect the functionality that make it conform more closely to MediaWiki coding style guidelines.)

I have gone back and forth on whether to add the properties automatically, but there are arguments on both sides, and I have so far decided not to do so.

We are preparing to release several new extensions in the next few weeks, including an extension that displays an interactive network graph of wiki page linkages and an extension for rendering, editing, and selecting from wiki page hierarchies. We will probably also be releasing a pluggable authentication/authorization extension supporting OpenID Connect and SimpleSAML.

This post was posted by 128.29.43.2, but signed as Cindy.cicalese.

Christharp (talkcontribs)

I should be able to check it within a few days. After that I'll report back. All the best to you.

Christharp (talkcontribs)

Hi

So it worked, but not well. It made the actual title disappear, and it showed up in other places in the page, which could be dealt with, but it also came up with this BACK thing.

With TitleIcon:

Without TitleIcon:

So I think it could work, but clearly it needs to be played with.

Cindy.cicalese (talkcontribs)

Weird. I can't think of anything in the TitleIcon code that would have made the BACK thing appear. If you could please post the generated HTML for that section of the page both with and without TitleIcon, it may shed some light into what is going on and whether or not an accommodation can be made in TitleIcon to deal with it. Thanks!

Christharp (talkcontribs)

Not sure if that makes anything clear since I don't see anything.

Any possibility that the extension could add the Icon next to the tagline? I'm thinking that tagline will be less likely used again, unlike "title">


Sorry here it is without TitleIcon: (I don't see the differences):

Cindy.cicalese (talkcontribs)

It looks like that is the HTML before it is modified by the extension. You'll need to convince your browser to show you the HTML after modification.

Christharp (talkcontribs)

So just make sure I came to the page via a different browser that had never been to the page before. The HTML still looks the same.

If you want to check it out I could email you a link. The site I'm redesigning is currently on a dynamic ip (hosted On Amazon) and can be accessed. (Only during times I'm working on it. I turn off the server when I'm not working on it).

All the best to you

Cindy.cicalese (talkcontribs)

OK, I found the problem. I was not correctly handling the case where there were multiple elements matching the CSS selector in the HTML. That was never the case with Vector. However, in your example, there was a hidden div with class title that contained the Back link. That text was being copied to every element with class title. I now correctly loop through each matching element. Please pull a new copy of the code and see if it works for you. I tested locally with multiple matching selectors and confirmed that the behavior was incorrect with the old code but correct with the new code.

Cindy.cicalese (talkcontribs)

Also, I think if you use 'h2.title' instead of '.title' as your CSS selector, it will only match the page title, rather than all of the other items that are currently being transformed.

Christharp (talkcontribs)

So it worked great. Thank you for the work.

But now the bad news I found another problem. It's not keeping to size dimensions of 36 by 36. The image seems to be any size the native size of the photo is.

Christharp (talkcontribs)

Let me restate the problem. It works some of the time and other times it doesn't resize to the correct size.

128.29.43.1 (talkcontribs)

Have you noticed a pattern to which icons do not resize? There is a problem resizing SVG images in IE.

This post was posted by 128.29.43.1, but signed as Cindy.cicalese.

Christharp (talkcontribs)

Sadly and unfortunately I have no pattern to which icons do not resize. It has happened with jpgs and it happens in Chrome, Foxfire, and IE. Once again I would be happy to send you a link to see it.

It happens with both local source photos and wikimedia commons photos. For example this photo, which I use a lot for testing purposes (easy to remember), from wikimedia commons:

sunset.jpg

Prints out on the page only in Godzilla size dimensions.

Cindy.cicalese (talkcontribs)

Interesting. I uploaded that image, and it displays nicely scaled down as a title icon on my wiki with Vector. The perhaps unsatisfying workaround, of course, is to use images that are already scaled to 36x36 until we can track down what the issue is. If that is the only remaining issue, if you would +1 the patch at https://gerrit.wikimedia.org/r/#/c/168019/, I'll go ahead and merge it. Then, when you get a chance, if you could show me an example where the image does not scale, I will continue to try to fix the scaling issue.

Christharp (talkcontribs)

Hi

I'll one plus the patch in a few hours after I play with it a little more.

Unfortunately I can't use the extension if it doesn't scale since I would need to trust the end users to only upload 36x36, which is not a wise choice with end users. My main purpose of using the extension was to allow end users to have a pic of themselves on user pages, and company logos on main pages. My wiki contains the entire United States yellow pages (about 10 Million Pages or so) so may hope for the extension was to allow each organization to have their logo next to their name on their page, and their sub-pages.

Under time pressure to get the redesign done since we're launching a Veteran's directory. Basically a sub-directory that every Organization can join for free to list if they do, or can, help Veterans. So naturally it has to be done before Veteran's day.

I'll email you shortly with a page (use the same login info I gave you before) with Title Icon in place and a note about which images don't size.

Cindy.cicalese (talkcontribs)

Thanks! Could you please try pulling another copy? It seems to be ignoring the height parameter on the img tag. I modified it from "36" to "36px" to see if that would help.

Christharp (talkcontribs)

Hi

That didn't fix it. But I just had a thought -- I allow the img tag to be used inside the wiki: Manual:$wgAllowImageTag. Could that be causing the problem?

Cindy.cicalese (talkcontribs)

We use $wgAllowImageTag, too, and it does not cause any trouble.

As far as I can tell, there's some JavaScript that comes along after TitleIcon has inserted the image and removes the size attribute. Although it is clearly present in the HTML at one point, it then is not used for the computed layout. It could be that the code is part of the skin.

The only other fix I can think of might be a pretty sizable rewrite - using the MediaWiki mechanism to generate a resized image, which may actually have some other advantages. I will look into that.

Cindy.cicalese (talkcontribs)

Well, that was easier than I thought it would be. The tooltip is not working, but the rest of the functionality seems to be intact. This fix has made SVG images resize correctly in IE for me, so I am hopeful it will work for you as well. Give it a try and let me know.

Cindy.cicalese (talkcontribs)

I submitted an additional set of patches yesterday that fix the tooltip and perform some additional code cleanup. If you have an opportunity, I would appreciate if you could test and +1 before I merge. Thanks!

Christharp (talkcontribs)

Hi Something went badly wrong. The new patch blanks out my wiki. No pages would render at all. Had to comment out the extension to get everything working again.

Cindy.cicalese (talkcontribs)

That is very strange. I just did a fresh clone and check out of the latest copy of the patch, and it loads with no issues for me. It is possible, with some of the coding style updates(parameter type hints, for example), that it could give problems if you are running a different version of PHP or MediaWiki, I suppose. I hope that is not the case. Could you please check the web server error log (/var/log/httpd/error_log for Apache) to see what error message it is producing? Thank you!

Christharp (talkcontribs)

Hi Agreed it's very strange. Unfortunately now I'm tied up the next few days. I'll re-check it Saturday and send you the error logs.

All the best to you

Chris

Cindy.cicalese (talkcontribs)

Upon further investigation, I saw something odd that I am surprised was not giving me trouble, since I had exactly that problem elsewhere yesterday. I had used String as a type hint in two places. I have removed that. I again deleted the extension and did a fresh clone and checkout. All still works fine on this end. Hopefully that was what was causing the issue for you.

Cindy.cicalese (talkcontribs)

Thanks, Chris. To investigate further, I went ahead and installed Foreground. It worked great, except the icons had some weird spacing due to a table I embedded to hold them. I removed the table, and the formatting now looks good in both Foreground and Vector. All icons are resizing correctly, including the sunset. Hopefully when you get a chance to look at this again on the weekend it will work for you as well.

Cindy

Christharp (talkcontribs)

Thanks. I've been too beep busy. I'll try to squeeze in the test tomorrow morning before I do anything else. Otherwise I'll check it this weekend.

By the way, no matter if works or not, your great for spending all this time on this issue.

All the best.

Christharp (talkcontribs)

Hi Cindy

Got a minute to test the new. I just pulled a new copy from the front page. That version did nothing. It showed as being installed, but nothing happened when I tested it.

Thought maybe that was an old version so I pulled a version from the last patch. That one again blanked out my wiki.

Cindy.cicalese (talkcontribs)

Well, that's progress at least, I guess. If you let me know when your wiki is up again, I can try to figure out what's going on. Since the extension loads, I should be able to figure out where it's having issues.

Christharp (talkcontribs)

Hi

Sorry been too, too busy not meeting deadlines. Found some major bugs on the site I was developing so basically I'm re-styling some things. I've set up a new site and will be re-trying this beautiful extension soon. All the best to you.

Cindy.cicalese (talkcontribs)

Thanks for the update. I hope all goes well with the rework of your site! I'm looking forward to hearing whether the new TitleIcon version works for you and appreciate your feedback.

Christharp (talkcontribs)

Hi

So I finally back to testing the extension. Worked great in vector, but the moment I switched to Foreground it stopped working. Just to make sure it's not something stupid please post exactly how you did the TitleIcon_CSSSelector.

All the best to you.

Cindy.cicalese (talkcontribs)

What works perfectly for me with Foreground is:

     $TitleIcon_CSSSelector = "h2.title";

That adds the icon to only the page title. I also tried:

     $TitleIcon_CSSSelector = ".title";

which adds the icon the page title and any other element of class .title.

I hope that works for you, too!

Christharp (talkcontribs)

Hi

So I did have it exactly as you did. I realized my error -- I assumed the Download snapshot had been updated. AS soon as I grabbed a new version from git everything worked great.

Thanks for this great extension and the help.

By the way, I mentioned to Yaron Koren in an email that he should add Semantic Rating and TitleIcon in the Semantic Bundle. Not that he will do so, but I gave my plug. Love both extensions.

Thanks again. All the best

Cindy.cicalese (talkcontribs)

Wonderful!! I'm so glad that it worked for you! And thank you for the plug for the extensions :-) Don't hesitate to let me know if you have any further questions.

Reply to "Love the Concept, but need it to work in the Foreground skin"