1. Fabrik 3.9 has been released. If you have updated Joomla to 3.9, this is a required update.
    Dismiss Notice

Photo display issue in List after Github update

Discussion in 'Community' started by sunnyjey, Feb 26, 2020.

  1. sunnyjey

    sunnyjey Active Member

    Level: Community
    I just updated Fabrik files from GitHub. Now facing issue of displaying photos in the List. I checked in bootstrap and custom list template but same problem.

    Few photos are not rendering, instead it displaces the title text. It looks due to recent change in library of Fileupload to SLICK, all images are displayed in Slideshow Mode, even if you have just single image. The YES / Slideshow option doesn't work any more.

    The show media in list or Slideshow.

    Screenshot 2020-02-26 at 8.07.39 PM.png
    There is no custom option for Slick in fileupload element similar to what available in Visualisation mode.

    If possible please someone confirm this issue.
     
  2. lousyfool

    lousyfool Active Member

    Level: Community
    Just did a couple test uploads with a fresh Github install on PHP 7.3.15, but can't reproduce.

    What files? Remember, you must not cherrypick but always do a complete update routine as per Wiki.

    What's your PHP version?
    Any errors anywhere (Joomla error reporting, PHP error log, console)?
    Same in backend?

    What, the "alt" text? Are the image files on the server where they belong?

    What tells you this?

    Working fine here.

    ?
     
    Last edited: Feb 27, 2020
  3. sunnyjey

    sunnyjey Active Member

    Level: Community
    Thank you for taking time and doing testing for me. I spent almost 2 hours trying all different setting ( Ajax / Non Ajax / Amazon / Local storage / Bootstrap template / Custom List template / Uploading new files / Deleted cache / Checked in multiple browsers), I came to conclusion, there is definitely some issue with New SLICK-based fileUpload.

    Can you please do it one more small test for me ?

    Upload multiple photos in one row and just single Photo on another row of SAME LIST. Then set your 'Show media in list' option to YES in fileUpload Element; Create ThumbNail to YES, and then look LIST (not detail page) for the photos, all photos will disappear as image source will reset to "".

    Then you change it to the 'Slideshow' setting. You will see all images will re-appear in LIST VIEW with messed up MULTIPLE images alignment.

    Note: Latest J!, Latest F!, PHP 7.3, No error in J! console.
     
    Last edited: Mar 10, 2020
  4. lousyfool

    lousyfool Active Member

    Level: Community
    What do you mean: "multiple photos in one Form and just single Photo on another Form of SAME LIST"? I'm using the same form to create multiple records. Why, do you use different forms? Even if, shouldn't matter if set up correctly.

    Anyway, just did as you described: created two records, one with multiple, one with single image. Switching through all "Show media in list" options, but no problem at all, each does what it's supposed to do, no issues as you described... actually, no issues at all.

    Then you didn't answer all my questions.
     
  5. sunnyjey

    sunnyjey Active Member

    Level: Community
    @cheesegrits

    Thank you for making changes in Slick FileUpload (not sure whether it is related to LIST view fix).

    In case if it was, I would like to inform you that I have updated my Testing site with last Github commits. Created new List with just one Fileupload Element and uploaded couple of images through Ajax Mode. It looks there is still issue of displaying multiple images in LIST view. Please have a look.

    Thank you in Advance.

    (Note: I had contacted to Robbie twice for custom paid work through email & quote form, but still waiting to be added in Paid work system).
     
    Last edited: Mar 15, 2020
  6. juuser

    juuser Active Member

    Level: Community
    Makes kinda sad to read your last note and similar in some other threads. :(
     
  7. sunnyjey

    sunnyjey Active Member

    Level: Community
    Just to prove my claim and to confirm the bug introduced in Slick FileUpload Library in GitHUB mentioned in this thread, I spent another valuable 3-4 hours and created plain vanilla Joomla website with just Fabrik as installed component.

    https://fabrik.jdevcloud.com/

    I have shared Administrator Backend to @troester and @juuser in PM. Please confirm this issue and inform to @cheesegrits

    One more thing, I just noticed new Zoom option as per this Github commit :
    https://github.com/Fabrik/fabrik/commit/3cdf9c6fd018a7f8e5c6b1a8c9e88f5ca1cabecc

    But, I couldnt find any option in backend of FileUpload to enable or disable Zoom.

    Once again requesting Hugh to have a re-look on Slick Library.

    Thank you and regards...
     
    Last edited: Apr 4, 2020
  8. troester

    troester Well-Known Member Staff Member

    Level: Community
    Ok, I did some testing.
    Slideshow in list is working on my site (and on your site, too).
    Setting "Show in list"= Yes (i.e. no slideshow) is working, too (two different ajax fileupload element). It's also working if both are set to "show in list"=slideshow .

    All (list slideshow) is done in the layout file
    plugins\fabrik_element\fileupload\layouts\fabrik-element-fileupload-slick-carousel.php

    In this layout file
    • It's always taking the thumbs, no matter if create thumnails is set or not..
    • It's taking the "Resize" width and height to display the slideshow in list view.
    • It's setting several slick options
    So override this file and adapt it as you need.

    To get the slideshow with the layout file as it is
    • you must enable thumbs (BTW: you can't just turn thumbs on if you have existing records, you must re-upload your image so the thumbs are created; I have created a new record in your "with thumbs" list, slideshow in list is ok)
    • you must set resize width and height
    And yes, this has to be documented.
     
    Last edited: Apr 4, 2020
    sunnyjey and lousyfool like this.
  9. sunnyjey

    sunnyjey Active Member

    Level: Community
    Yes. You are right.

    I too discovered after going through codes. In my case I have almost 2000 records with multiple images in one list with disabled Thumbnail option. The only solution left for me is to manually create thumbnails of all images and put into the respective folders.

    This is new for me. It is going to be boon for all of us having several inbuilt Slick options to the fileUpload Element. Tons of thanks to Hugh.

    I will try to update WIKI for others after testing on my site.

    Big thank you to you for solving this issue.
     
  10. troester

    troester Well-Known Member Staff Member

    Level: Community
    I didn't test but I think it's enough to set just the thumbnail directory to the same as the upload dir. If thumbnail is set to no it won't hurt on new uploads because nothing is done in this case.

    If you are switching thumbnails on for a list with existing records you can copy all upload images to the thumbnail folder (so no thumbs but at least existing files which can be displayed with some CSS).
     
    Last edited: Apr 6, 2020
    sunnyjey likes this.
  11. lousyfool

    lousyfool Active Member

    Level: Community
    ...and, of course, there are many free apps allowing batch-resizing of the full-size images on your local computer. :)
     
    sunnyjey likes this.
  12. sunnyjey

    sunnyjey Active Member

    Level: Community
    Finally, with your help and suggestions, I pushed GitHub to my LIVE server.

    Is it possible to override the fileupload for specific fabrik template ?

    As per Wiki,
    http://fabrikar.com/forums/index.php?wiki/jlayouts/

    /components/com_fabrik/views/form/tmpl/<yourtemplate>/layouts/element/table___my_fileupload_element_name

    AND

    /templates/{my-current-joomla-template}/html/layouts/com_fabrik/element/table___my_fileupload_element_name


    I tried both above, but Fabrik is not picking override for fileupload from custom layout.

    Any suggestion ?
     
    Last edited: Apr 11, 2020

Share This Page