Fix thumbnail size for Gallery View. · loftuxab/share-community-loftux@69fa620

stevejordi · 2018-01-24T09:37:53Z

We have 5.2.0 and this fix does not work.
It works on the folder icons (folders grow/shrink accordingly) but not the thumbnails themselves.
Even with freshly uploaded images (no thumbnail caches). Only folders and filename banners grow/shrink.
Before this fix, nothing responded to the zoom handle bar.

jpbuttet · 2019-06-10T18:31:25Z

Hello, this fix doesn't work for me. I confirm what stevejordi wrote.
Any hints ?
Thanks in advance.

We run docker based app. :
Alfresco Share v6.0.a
(r2a78a24905db2648e00947a037064cde02c390fc-b36, Aikau 1.0.101.10, Spring Surf 6.0.a, Spring WebScripts 6.15, Freemarker 2.3.20-alfresco-patched, Rhino 1.7R4-alfresco-patched, Yui 2.9.0-alfresco-20141223)
Alfresco Community v6.1.2
(r589dc49b-b205) schema 13001

jpbuttet · 2019-07-30T19:23:43Z

We have 5.2.0 and this fix does not work.
It works on the folder icons (folders grow/shrink accordingly) but not the thumbnails themselves.
Even with freshly uploaded images (no thumbnail caches). Only folders and filename banners grow/shrink.
Before this fix, nothing responded to the zoom handle bar.

Hello stevejordi,
I'am still looking for a fix, did you manage to get one ?

Best regards.

Lilian-v · 2019-10-24T09:07:49Z

Hi,
Thanks for this fix, it works fine (Alfresco 5.2.5). jpbuttet you need to modify file documentlist-view-gallery-min.js too.

jpbuttet · 2019-10-24T09:44:39Z

Hi.

@Lilan-V. I think I modified both files, I will check again.... which Share version are you running ? Best regards.

Lilian-v · 2019-10-24T11:24:37Z

I'm using Share 5.2.5.

If it doesn't work you can try to create a new view renderer, extending the default gallery view : https://docs.alfresco.com/5.1/concepts/share-customizing-document-library-views.html
With this method you don't need to modify existing files in Share

<view-renderer id="gallery" iconClass="gallery" label="button.view.gallery" index="30" widget="YourNamespace.DocumentListGalleryViewRendererFix">
	<dependencies>
			<js src="components/documentlibrary/documentlist-view-detailed.js" />
			<js src="components/documentlibrary/documentlist-view-gallery.js" />
			<js src="yui/slider/slider.js" />
					
			<js src="components/documentlibrary/gallery-view-fix.js" />
			<css src="components/documentlibrary/gallery-view-fix.css" />
	</dependencies>
</view-renderer>

In "gallery-view-fix.js" :

// Declare namespace...
if (typeof YourNamespace == undefined || !YourNamespace) {
	var YourNamespace = {};
}

(function()
{
   var Dom = YAHOO.util.Dom;
   
   var $html = Alfresco.util.encodeHTML;

   YourNamespace.DocumentListGalleryViewRendererFix = function(name, parentDocumentList, commonComponentStyle, galleryColumns)
   {
	  YourNamespace.DocumentListGalleryViewRendererFix.superclass.constructor.call(this, name, parentDocumentList, commonComponentStyle, galleryColumns);
      return this;
   };
   
   YAHOO.extend(YourNamespace.DocumentListGalleryViewRendererFix, Alfresco.DocumentListGalleryViewRenderer);
   
   YourNamespace.DocumentListGalleryViewRendererFix.prototype.renderCellThumbnail = function DL_GVR_renderCellThumbnail(scope, elCell, oRecord, oColumn, oData, imgIdSuffix, renditionName)
   {
      var containerTarget; // This will only get set if thumbnail represents a container
      
      var thumbnail = this.getThumbnail(scope, elCell, oRecord, oColumn, oData, imgIdSuffix, renditionName);
      var record = oRecord.getData();

      // Just add the data table thumbnail once
      if (!document.getElementById(thumbnail.id))
      {
         if (thumbnail.isContainer || (thumbnail.isLink && record.jsNode.linkedNode.isContainer))
         {
            elCell.innerHTML += '<span class="folder">' + (thumbnail.isLink ? '<span class="link"></span>' : '') + 
                  (scope.dragAndDropEnabled ? '<span class="droppable"></span>' : '') + 
                  Alfresco.DocumentList.generateFileFolderLinkMarkup(scope, record) + thumbnail.html + '</a>';
            containerTarget = new YAHOO.util.DDTarget(thumbnail.id); // Make the folder a target
         }
         else
         {
        	// FIX HERE !
            /*elCell.innerHTML += '<span class="thumbnail">' + (thumbnail.isLink ? '<span class="link"></span>' : '') + 
                  Alfresco.DocumentList.generateFileFolderLinkMarkup(scope, record) + thumbnail.html + '</a></span>';*/
        	elCell.innerHTML += '<span class="alf-gallery-item-thumbnail">' + (thumbnail.isLink ? '<span class="link"></span>' : '') + 
            Alfresco.DocumentList.generateFileFolderLinkMarkup(scope, record) + thumbnail.html + '</a></span>';
         }
         var thumbnailElement = document.getElementById(thumbnail.id);
         if (thumbnailElement)
         {
            var tempImg = new Image();
            tempImg.onload = function()
            {
               if(tempImg.width > tempImg.height)
               {
                  Dom.addClass(thumbnailElement, 'alf-landscape');
               }
            }
            tempImg.src = thumbnailElement.src;
         }
      }
   };
})();

In gallery-view-fix.css :

.doclist .alf-gallery span.folder
{
   height: 99%;
   width: 99%;
}

.alf-gallery-item .alf-gallery-item-thumbnail
{
   height: 100%;
}

jpbuttet · 2019-10-28T06:34:22Z

Hello, Thank your for you reply. I will try your solution and keep you informed. Best regards. Jean-Pierre Buttet Envoyé de mon iPhone

…

Le 24 oct. 2019 à 11:07, Lilian ***@***.***> a écrit : Hi, Thanks for this fix, it works fine (Alfresco 5.2.5). jpbuttet you need to modify file documentlist-view-gallery-min.js too. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

jpbuttet · 2019-11-28T13:34:04Z

@Lilian-v

Hello,

I implemented the fix you suggested, but it doesn't work.
I confirmed what stevejordi said: "It works on the folder icons (folders grow/shrink accordingly) but not the thumbnails themselves."

By the way I run now this version:

https://github.com/Alfresco/alfresco-docker-installer

Alfresco Share v6.1.0
(rfc7f986e4267e4e4d9c7572b73ab200a6a578c93-b6, Aikau 1.0.101.16, Spring Surf 6.1.0, Spring WebScripts 6.20, Freemarker 2.3.20-alfresco-patched, Rhino 1.7R4-alfresco-patched, Yui 2.9.0-alfresco-20141223)
Alfresco Community v6.1.2
(r589dc49b-b205) schema 13001

but the result is the same than with my old version

Lilian-v · 2019-11-28T20:53:39Z

Hello,

Have you tried with another web browser (Firefox or/and Chrome) ?
If you add the CSS directly on your browser, does it work ?
If you open an image (right click on the preview => show image), what is the size of the image ?

If it works on folders, it must be a problem with the previewed image.

jpbuttet · 2019-11-29T09:52:57Z

Hello Lilian

Thank you for your reply.
I use Firefox, I tried with Chrome and it gives same results.
Right click on preview then show image --> image size 960 x 720 pixel, looks good ..

Yous says: "If you add the CSS directly on your browser, does it work ?" ... how can I do this (Alfresco run on a server, and I am on a HP Windows 10 remote workstation.).

Regards.

Lilian-v · 2019-11-29T13:26:38Z

Hello,

With Firefox, you can do a right click on an image and "Inspect Element".
A console will be opened in the bottom of your browser, in this one you can see the HTML of the page, and the CSS rules available on the selected HTML element.

Your image must be in a div (div > span > a > img) with class "alf-gallery-item-thumbnail".
If you click on this div, you can add CSS on the rules tab. If you had a rule for the element : "height :99%", the preview must fill all the div. Does it work ?

jpbuttet · 2019-11-29T15:49:28Z

Hello I added this rule, nothing happened. Any idea ? Best regards. Jean-Pierre Buttet Le ven. 29 nov. 2019 à 14:26, Lilian <notifications@github.com> a écrit :

…

Hello, With Firefox, you can do a right click on an image and "Inspect Element". A console will be opened in the bottom of your browser, in this one you can see the HTML of the page, and the CSS rules available on the selected HTML element. Your image must be in a div (div > span > a > img) with class "alf-gallery-item-thumbnail". If you click on this div, you can add CSS on the rules tab. If you had a rule for the element : "height :99%", the preview must fill all the div. Does it work ? [image: image] <https://user-images.githubusercontent.com/11089271/69871266-9f0b0680-12b2-11ea-8fc5-d814c9260937.png> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <69fa620?email_source=notifications&email_token=ABZ5ZYSXBCTWTM5AXYSJ3P3QWEKA5A5CNFSM4ENL3RJ2YY3PNVWWK3TUL52HS4DFVVBW63LNNF2EG33NNVSW45FKMNXW23LFNZ2F62LEZYBCQRLT#commitcomment-36193651>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABZ5ZYWWT3CURRR34R5TNF3QWEKA5ANCNFSM4ENL3RJQ> .

jpbuttet · 2019-11-29T15:58:37Z

Interestingly, frame shrinks when reducing the height, but thumbnail stays the same. Regards. Jean-Pierre Buttet Le ven. 29 nov. 2019 à 14:26, Lilian <notifications@github.com> a écrit :

…

Hello, With Firefox, you can do a right click on an image and "Inspect Element". A console will be opened in the bottom of your browser, in this one you can see the HTML of the page, and the CSS rules available on the selected HTML element. Your image must be in a div (div > span > a > img) with class "alf-gallery-item-thumbnail". If you click on this div, you can add CSS on the rules tab. If you had a rule for the element : "height :99%", the preview must fill all the div. Does it work ? [image: image] <https://user-images.githubusercontent.com/11089271/69871266-9f0b0680-12b2-11ea-8fc5-d814c9260937.png> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <69fa620?email_source=notifications&email_token=ABZ5ZYSXBCTWTM5AXYSJ3P3QWEKA5A5CNFSM4ENL3RJ2YY3PNVWWK3TUL52HS4DFVVBW63LNNF2EG33NNVSW45FKMNXW23LFNZ2F62LEZYBCQRLT#commitcomment-36193651>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABZ5ZYWWT3CURRR34R5TNF3QWEKA5ANCNFSM4ENL3RJQ> .

jpbuttet · 2019-11-29T16:02:04Z

few screenshots taken during these tests:

Lilian-v · 2019-11-29T16:06:03Z

If the span containing the image has a class "thumbnail", you can try to rename it "alf-gallery-item-thumbnail" (the modification in "documentlist-view-gallery.js" file).
Then you can add again the "height:: 100%" on the div.

I tried it on an Alfresco out of the box, with these two modifications (on Firefox after an inspect) it works.

Lilian-v · 2019-11-29T16:08:33Z

Yes, on your screenshot the span element still has a class "thumbnail". The new class defined in file documentlist-view-gallery.js doesn't work.

If you rename the class on the span to alf-gallery-item-thumbnail* it must works.

Now you have to find why the customization JS doesn't work and doest'n add this class automaticaly...

jpbuttet · 2019-11-29T16:10:30Z

screenshot taken with height 99% with more info

jpbuttet · 2019-11-29T16:11:31Z

Thank you, I will try ..

Best regards.

jpbuttet · 2019-12-02T07:56:07Z

Hello,

You wrote „ If you rename the class on the span to alf-gallery-item-thumbnail* it must works.“
.... yes it does, but unfortunately, debugging this file is beyond my knowledge, at least for today.

I need a view with thumbnails larger than 100px; as a fallback solution, could you give me some hints how I could simply customize the standard document detailed view in order to increase the size of thumbnails from 100 to 200pix ?

I followed this:
https://docs.alfresco.com/6.0/concepts/share-customizing-document-library-views.html
I could add the “minimalist” view as an example but have now idea how to simply customize and increase the thumbnail size of the existing detailed library view.

Best regards.

jpbuttet · 2019-12-02T09:47:50Z

I will also post this question on this forum:
https://hub.alfresco.com/t5/alfresco-content-services-forum/bd-p/forum-ECM-software

Best regards

jpbuttet · 2019-12-02T22:13:53Z

Hi,

You wrote:

"Hi,
Thanks for this fix, it works fine (Alfresco 5.2.5). jpbuttet you need to modify file documentlist-view-gallery-min.js too."

I checked again all the files and could see that this file wasn't updated in my server. I put the updated file in the server again and it works !!

(update this file by replacing '' with '' in one place)

The gallery view is now back fully functional , thank you very much for your help that improved my understanding of the Alfresco solution.

jpbuttet · 2019-12-03T08:20:20Z

Just to clarify, 3 files need to be updated (and not only 2):

documentlist-view-gallery.js
documentlist_v2.css
documentlist-view-gallery-min.js

In order to update the last file, just replace one time: span class="thumbnail" with : span class="alf-gallery-item-thumbnail"

Hope it helps others.

-Original file line number
+Diff line change
@@ Expand Up / @@ -987,11 +987,13 @@ body .doclist tr.yui-dt-highlighted @@
     .doclist .alf-gallery span.folder
     {
-       height: 100%;
+       height: 99%;
+       width: 99%;
     }
     .alf-gallery-item .alf-gallery-item-thumbnail
     {
+       height: 100%;
        border: none;
        overflow: hidden;
        position: relative;
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Commit

There are no files selected for viewing

22 comments on commit `69fa620`

stevejordi commented on `69fa620` Jan 24, 2018

jpbuttet commented on `69fa620` Jun 10, 2019

jpbuttet commented on `69fa620` Jul 30, 2019

Lilian-v commented on `69fa620` Oct 24, 2019

jpbuttet commented on `69fa620` Oct 24, 2019

Lilian-v commented on `69fa620` Oct 24, 2019

jpbuttet commented on `69fa620` Oct 28, 2019 via email

jpbuttet commented on `69fa620` Nov 28, 2019

Lilian-v commented on `69fa620` Nov 28, 2019

jpbuttet commented on `69fa620` Nov 29, 2019

Lilian-v commented on `69fa620` Nov 29, 2019

jpbuttet commented on `69fa620` Nov 29, 2019 via email

jpbuttet commented on `69fa620` Nov 29, 2019 via email

jpbuttet commented on `69fa620` Nov 29, 2019

Lilian-v commented on `69fa620` Nov 29, 2019

Lilian-v commented on `69fa620` Nov 29, 2019

jpbuttet commented on `69fa620` Nov 29, 2019

jpbuttet commented on `69fa620` Nov 29, 2019

jpbuttet commented on `69fa620` Dec 2, 2019

jpbuttet commented on `69fa620` Dec 2, 2019

jpbuttet commented on `69fa620` Dec 2, 2019

jpbuttet commented on `69fa620` Dec 3, 2019

Commit

There are no files selected for viewing

22 comments on commit 69fa620

stevejordi commented on 69fa620 Jan 24, 2018

Choose a reason for hiding this comment

jpbuttet commented on 69fa620 Jun 10, 2019

Choose a reason for hiding this comment

jpbuttet commented on 69fa620 Jul 30, 2019

Choose a reason for hiding this comment

Lilian-v commented on 69fa620 Oct 24, 2019

Choose a reason for hiding this comment

jpbuttet commented on 69fa620 Oct 24, 2019

Choose a reason for hiding this comment

Lilian-v commented on 69fa620 Oct 24, 2019

Choose a reason for hiding this comment

jpbuttet commented on 69fa620 Oct 28, 2019 via email

Choose a reason for hiding this comment

jpbuttet commented on 69fa620 Nov 28, 2019

Choose a reason for hiding this comment

Lilian-v commented on 69fa620 Nov 28, 2019

Choose a reason for hiding this comment

jpbuttet commented on 69fa620 Nov 29, 2019

Choose a reason for hiding this comment

Lilian-v commented on 69fa620 Nov 29, 2019

Choose a reason for hiding this comment

jpbuttet commented on 69fa620 Nov 29, 2019 via email

Choose a reason for hiding this comment

jpbuttet commented on 69fa620 Nov 29, 2019 via email

Choose a reason for hiding this comment

jpbuttet commented on 69fa620 Nov 29, 2019

Choose a reason for hiding this comment

Lilian-v commented on 69fa620 Nov 29, 2019

Choose a reason for hiding this comment

Lilian-v commented on 69fa620 Nov 29, 2019

Choose a reason for hiding this comment

jpbuttet commented on 69fa620 Nov 29, 2019

Choose a reason for hiding this comment

jpbuttet commented on 69fa620 Nov 29, 2019

Choose a reason for hiding this comment

jpbuttet commented on 69fa620 Dec 2, 2019

Choose a reason for hiding this comment

jpbuttet commented on 69fa620 Dec 2, 2019

Choose a reason for hiding this comment

jpbuttet commented on 69fa620 Dec 2, 2019

Choose a reason for hiding this comment

jpbuttet commented on 69fa620 Dec 3, 2019

Choose a reason for hiding this comment

22 comments on commit `69fa620`

stevejordi commented on `69fa620` Jan 24, 2018

jpbuttet commented on `69fa620` Jun 10, 2019

jpbuttet commented on `69fa620` Jul 30, 2019

Lilian-v commented on `69fa620` Oct 24, 2019

jpbuttet commented on `69fa620` Oct 24, 2019

Lilian-v commented on `69fa620` Oct 24, 2019

jpbuttet commented on `69fa620` Oct 28, 2019 via email

jpbuttet commented on `69fa620` Nov 28, 2019

Lilian-v commented on `69fa620` Nov 28, 2019

jpbuttet commented on `69fa620` Nov 29, 2019

Lilian-v commented on `69fa620` Nov 29, 2019

jpbuttet commented on `69fa620` Nov 29, 2019 via email

jpbuttet commented on `69fa620` Nov 29, 2019 via email

jpbuttet commented on `69fa620` Nov 29, 2019

Lilian-v commented on `69fa620` Nov 29, 2019

Lilian-v commented on `69fa620` Nov 29, 2019

jpbuttet commented on `69fa620` Nov 29, 2019

jpbuttet commented on `69fa620` Nov 29, 2019

jpbuttet commented on `69fa620` Dec 2, 2019

jpbuttet commented on `69fa620` Dec 2, 2019

jpbuttet commented on `69fa620` Dec 2, 2019

jpbuttet commented on `69fa620` Dec 3, 2019