Highlighted

Mark pdf, word, excel files in search results

Adobe Community Professional ,
Dec 18, 2016

Copy link to clipboard

Copied

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

TOPICS
HTML5 layout

Views

541

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Mark pdf, word, excel files in search results

Adobe Community Professional ,
Dec 18, 2016

Copy link to clipboard

Copied

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

TOPICS
HTML5 layout

Views

542

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 18, 2016 0
LEGEND ,
Dec 31, 2016

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 31, 2016 0
Adobe Community Professional ,
Jan 02, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 02, 2017 1
LEGEND ,
Jan 03, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 03, 2017 0
Adobe Community Professional ,
Jan 03, 2017

Copy link to clipboard

Copied

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");

}

External-link-icon.png

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

other-docs-icons.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 03, 2017 0
LEGEND ,
Jan 03, 2017

Copy link to clipboard

Copied

Sweet!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 03, 2017 0
Amebr LATEST
Adobe Community Professional ,
Jan 10, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 10, 2017 0
New Here ,
Jan 04, 2017

Copy link to clipboard

Copied

Love it!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 04, 2017 0