Unknown reporter writes

hi,

i’ve got 2 problems.

1: recoll result list does not show any pdf thumbnails, even though nautilus does (so there should be a thumb)

2: i use a custom result list ([http://www.lesbonscomptes.com/recoll/custom.html](Link URL) Alternating bands, bigger previews, and custom paragraph typesetting ) i think the zoomed thumbnail is the original picture and not the thumbnail (the resolution is far too good) would it be possible toshow and zoom a pdf too??

thanks and greets

medoc writes

A quick look on my Ubuntu 14.04 system shows that not all apps create the thumbnails in the right place (now $HOME/.cache/thumbnails). Some still create thumbnails in the old location ($HOME/.thumbnails).

So before I check the code. could you please tell me:

  • What Recoll version you are using

  • Under what system and desktop environment

  • what application (e.g. Nautilus) is actually creating the thumbnails.

and cut paste somewhere what you have in the result list customisation entries (in the GUI prefs), header and paragraph format.

I don’t think that the result list accesses the original images, but I can check. In any case this would not be possible for pdfs: there is no thumbnail generator in Recoll, it relies on the thumbnails created by Nautilius or others apps which use the appropriate libs. Thumbnails exist in two sizes, maybe you are just seeing the big ones.

aj_aj writes

hi,

thanks for fast responding.

*i’m using recoll 1.21.5

*Ubuntu 14.04 LTS 64bit

*Nautilus is creating the thumbs

ok. thumbs is already fixed. (updated my recoll)

I use the following:

#!python

<!-- Custom Header -- >
<script type="text/javascript" >
  function altRows() {
      var rows = document.getElementsByClassName("rclresult");
      for (i = 0; i < rows.length; i++) {
          if (i % 2 == 0) {
              rows[i].style.backgroundColor = "#f0f0f0";
          }
      }
  }
  window.onload = function() {
      altRows();
  }
</script >

<style type="text/css" >
.thumbnail {
   display:block;
   position:relative;
   padding: 4px;
   width: auto; /* set width of thumbnail image in 'paragraph' code - not here */
   border:none;
   z-index:0;
   }
.thumbnail:hover {
   border:none;
   background-color: transparent;
   z-index: 50;
   }
.thumbnail span {
   position: absolute;
   left: -9999px;
   visibility: hidden;
   }
.thumbnail span img {
   max-width:256px;  /* set 'large image' max width/height - advise keeping these  */
   max-height:256px; /* the same to avoid inadvertently changing the aspect ratio  */
   width:auto;   /* leave set to auto */
   height:auto;  /* leave set to auto */
   background-color: gray;
   padding: 1px;
   border: 1px solid black;
   }
.thumbnail:hover span {
   visibility: visible;
   top: 4px;   /* top/left positions 'large image' relative to top left */
   left: 88px; /* of parent thumbnail (plus padding)                    */
   }
</style >
<!-- End of Custom Header -- >

And the paragraph format:

#!python

<!-- Custom Paragraph -- >
<table >
  <tr >
    <td >
      <a class="thumbnail" href="#" >
        <img src="%I" width="64px" height="auto" >   <!-- set width of thumbnail -- >
        <span >
          <img src="%U" >
        </span >
      </a >
    <td >
      <table >
        <tr >
          <td >
            <div >
              <b >%T</b ></br >
              %L</br >
              <p ><font color="grey" >%A </font ><font color="#CD6688" ><i >%K</i ></font ></p >
              <font color="green" ><font size=1 >
              %U</br >
              %R — %S—%D — %M
              </font ></font ></br >
            </div >
          </td >
        </tr >
      </table >
    </td >
  </tr >
</table >
<!-- End Custom Paragraph -- >

![pic.png](https://bitbucket.org/repo/LoKMq/images/1681587859-pic.png) ![pdf.png](https://bitbucket.org/repo/LoKMq/images/2076621197-pdf.png)

Here you can see that the image is zoomed in pretty good quality (i can even make it bigger at about 1024 pixels and it is still good quality - > no thumb)

Is it possible to preview pdf’s the same way?

Is it possible to preview pdf’s (with pictures) in any way? (maybe recoll WebUI??)

thanks for your help

medoc writes

As far as I can see (not really a CSS expert here), you are using the actual image url ( %U), not the thumbnail (%I), as a source for the zoomed version, so, of course, you have the full resolution.

This does not work for PDF though, because Webkit does not recognize the PDF URL as something which it can display in an IMG tag.

For PDF, you can at most zoom to the size of the large thumbnail (256px) (and this would suppose switching to %I).

The preview in the WebUI only displays text (it’s the same code as the Recoll preview, meant to show text content just in case it’s enough to get the info you want).

There is no easy solution, only a PDF interpreter can generate a thumbnail from a PDF.

To solve this, I think that, in any case, you’d need Javascript to fix the URL in the <span > depending on the MIME type (either keep whatever %I produced, or use the source URL for images, or something else for PDF).

Then you need to generate bigger first page images for the PDFs.

I guess that importing a javascript PDF interpreter in the result list would be a bit heavy, so, probably, the right approach would be to generate the images in batch somewhere (I’m quite sure that you’ll find something in poppler or pdftk to do it), and then generate an appropriate URL to access the image for the PDF result list entries.

I can’t see why this wouldn’t work, but it’s obviously not trivial either, and it would be nice if you could share the recipee if you succeed in doing this !

aj_aj writes

I finally solved it.

I’m now using WebUI for searching.

I had to change the result.tpl file frpm WebUI

#!html

<embed src="{{os.path.dirname(url)}}/{{d['label']}}" width="600" height="400" type='application/pdf' >

I also changed other parts of this file for better overview.

result.tpl:

#!html


%import shlex, unicodedata, os



<div class="search-result" >
<!--
    %number = (query['page'] - 1)*config['perpage'] + i + 1
    <div class="search-result-number" ><a href="#r{{d['sha']}}" >#{{number}}</a ></div >
    %url = d['url'].replace('file://', '')
    %for dr, prefix in config['mounts'].items():
        %url = url.replace(dr, prefix)
    %end
-- >

    <div class="search-result-title" id="r{{d['sha']}}" title="{{d['abstract']}}" >
    <a href="download/{{number-1}}?{{query_string}}" >{{d['label']}}</a >
    </div >
    %if len(d['ipath'])  > 0:
        <div class="search-result-ipath" >[{{d['ipath']}}]</div >
    %end


    <div class="search-result-url" >
        %urllabel = os.path.dirname(d['url'].replace('file://', ''))
        %for r in config['dirs']:
            %urllabel = urllabel.replace(r.rsplit('/',1)[0] + '/' , '')
        %end
        <a href="{{os.path.dirname(url)}}" >{{os.path.dirname(url)}}</a >
        <span >
<embed src="{{os.path.dirname(url)}}/{{d['label']}}" width="600" height="400" type='application/pdf' >


        </span >
    </div >





    <div class="search-result-snippet" >{{!d['snippet']}}</div >
</div >

After that i had to change the channel-prefs.js file from Firefox to allow Firefox to access lokal Files. You have to add:

#!html

user_pref("capability.policy.policynames", "localfilelinks");
user_pref("capability.policy.localfilelinks.sites", "http://localhost:8080");
user_pref("capability.policy.localfilelinks.checkloaduri.enabled", "allAccess");

Hope someone else can use it.

medoc writes

Thanks ! I’m taking note of this in case someone wonders how to do it.