Mark pdf, word, excel files in search results

[Amebr]

Hi all,

I'm using RH11, Multiscreen HTML5 output in a merged structure, hosted on a webserver.

I couldn't see anything obvious, but is there any way to mark search results that aren't html files?

For example, if the search results include a pdf document, can I turn on something so that a little pdf icon appears next to the link?

Regards,

Amber

[Willam_van_Weelden]

Well, how much effort would you like to put into it?

The file search.js (template/scripts) has a function called writeResult that writes the search results to the pane. It generates the HTML of the search results and you can manipulate that any wat you want.

By adding a check for the resulting filename, you should be able to figure out the filetype and change the generated HTML accordingly. I haven't tried it though, but I expect it to work. It may be a pain to format though.

[Amebr]

Ah, so no built-in way. Thanks.

I figured out a way in CSS using :before and :after, although I'm still debating the pros and cons of this method.

I pasted relevant images into the screen layout directory, and to make sure the images appear in RH and get included in the build, I created fake html tags in the screen layout css (I suppose I could have used baggage file, too).

/* fake tags so the images appear in RH, which doesn't seem to know about content urls yet */
rh-word {
  background-image: url('word.png');
}
rh-pdf {
  background-image: url('PDF.gif');
}

Then I created a complex selector for the search results, to detect ".pdf" or ".doc" in the hyperlink. I had to use the developer console to figure out what the output code was doing:

/* find ".doc" or ".pdf" inside the href value and set an image before the a tag. Add a little padding so it's separate from the link text. */
.wSearchResultItem a[href*=".doc"]:before {
  content: url('word.png');
  padding-right: 5px;
}
.wSearchResultItem a[href*=".pdf"]:before {
  content: url('PDF.gif');
  padding-right: 5px;
}

I also had to change the div which displays the text to display: inline-block, otherwise the image was pushed into a separate paragraph. I had to set this on both .wSearchResultTitle and .wSearchResultTitleHover.

This is with RH11, Multiscreen HTML5 in a simple test project, targeting desktop output only. I haven't tried in my live merged output yet. I also haven't tried in Responsive HTML5, nor looking at phone or tablet output, so no idea if this would work in those environments.

Regards,

Amber

[Willam_van_Weelden]

That's a clever solution. Thanks for sharing! I can already see some uses for this

[Amebr]

Maybe you'll like this one I've put in my topic stylesheet, to add a little icon after links to external websites (I made the assumption that all external links would start with 'http', but your situation may vary.)

/* fake tag so the image appears in RH, which doesn't seem to know about content urls yet */  
weblink-ph {
  background-image: url("../Images/web-link.png");
}
/* In the topic area only, find href values beginning with http (external sites) and set an image after the a tag. */  
.wTopic a[href^='http']:after {
  content: url("../Images/web-link.png");
}

Oh, and here's how the word/pdf icons look:

[Captiv8r]

Sweet!

[Amebr]

Update:

The attribute selectors are checked case-sensitively, so you may need to add variations to cover different capitalisations. For example:

.wSearchResultItem a[href*=".pdf"]:before, .wSearchResultItem a[href*=".PDF"]:before, .wSearchResultItem a[href*=".Pdf"]:before {
  content: url('PDF.gif');
  padding-right: 5px;
}

There's a new setting in a W3C working draft that will check the values case-insensitively, but it's not finalised and thus not that well supported yet *cough* IE and Edge *cough*

http://caniuse.com/#feat=css-case-insensitive

[JonathanSmith]

Love it!