Hey there, Awesome Customers!

Just a heads up: We'll be taking a breather to celebrate International Workers' Day (May 1st and 2nd - Wednesday and Thursday) and Orthodox Easter from Good Friday (May 3rd) through Easter Monday (May 6th). So, from May 1st to May 6th, our team will be off enjoying some well-deserved downtime.

During this time, our customer support will be running on a smaller crew, but don't worry! We'll still be around to help with any urgent matters, though it might take us a bit longer than usual to get back to you.

We'll be back in action at full throttle on May 7th (Tuesday), ready to tackle your questions and requests with gusto!

In the meantime, you can explore our documentation for Amelia and wpDataTables. You'll find loads of helpful resources, including articles and handy video tutorials on YouTube (Amelia's YouTube Channel and wpDataTables' YouTube Channel). These gems might just have the answers you're looking for while we're kicking back.

Thanks a bunch for your understanding and support!

Catch you on the flip side!

Warm regards,

TMS

Okay
  Public Ticket #3333153
showing images on wpDataTables
Closed

Comments

  • Jack Edwards started the conversation

    I have submitted tickets on parts of my issues and have reviewed the documentation - perhaps it would be useful to explain my overall requirements.

    We have an organization with more than 150 "branches" in several locations, all with similar information but different values that we want to store in a table, with one row for each branch.  We want to maintain that data in an Excel spreadsheet external to the website (it is in Office 365)  so that it is an administrative function to update the location information for each branch and not an IT/Webmaster function.  One of the items for each branch is a picture of the location.

    Each location has an event that happens on a different day of the month (e.g., every 2nd Tuesday), so we want to be able to use a dynamic placeholder to select those items.

    We would like to be able to display the whole table.

    We would also like to show selected data in the table and then use the master-detail facility to show additional information.  This is what the sample project showed in your documentation video.

    All the information should be in the Excel spreadsheet; I do not know how to show all this on one wpDataTables table - the images are a big unknown for me.

    Any help you can provide is appreciated.

    Jack

  •  1,693
    Miloš replied

    Hi, Jack.

    Sorry for the delayed reply.


    I will do my best to advise you on all points of this use-case,  but for some details i might missunderstand.

    Please feel free to correct me if that happens.

    1. In regards to working with Excel as data source for our tables, i will share general informations :

     There are two ways to create wpDataTables:

    1a. Create a table linked to an existing Excel file,

    if you choose to Create a wpDataTable and upload the Excel file :

     in which case you get to select the file (upload it) that'll be used to pull the data.

     This file will be stored in ../wp-content/uploads/YEAR/MONTH/ folder. 

    The file on that location can be changed/edited, but the column structure can't. 

    So, if you have the file with the same name,

     the same number of columns, same headers, and the same order of columns - you'd be able to replace the original file with the new file, and wpDataTables would pick that up.

    -

    Alternatively, if you select "URL from any domain"

    5896577008.png

    Creating a table linked to an Excel file by providing its URL is pretty much the same as it is for creating a table by uploading an Excel file. 

    The only difference is that you would choose the URL from any domain option instead of the WordPress Media Library option under File location when creating the table,

    and when you want to edit the source file,   you don't have to edit the one that is now in your Media Library folder,

    but you can edit on the original source file.

    1b. Or If you import the file, the plugin reads the source file and creates a manual table

    Once the table is created, it is no longer linked to the source file, so changing data in the table will not show up in Excel or Google Spreadsheet, and vice-versa. 

    To modify this table, you can either switch to the Excel-like view

    and then select and copy the range of cells you want to paste from the source file, and paste it in the Excel-like view, 

    or you can import a new/edited CSV to update the table, as well, in the following ways :

    • Replace data within an existing table.
    • Add data to an existing table.
    •   Replace the entire table with new data.

    You can see more details on Updating manual tables from source files (CSV, Excel or Google sheet) here.



    2. In regards to maintaining that Spreadsheet stored in Office 365, i don't think that will work,

    because in order for our plugin to "read the data", it needs to be stored somewhere where the link /path will be a full path that ends with the Excel extension,

    something like :

    https://someDomain/someDirectory/yourExcelFile.xls

    So if the URL path to the file does not end with the Excel extension, our plugin won't be able to access it to render the table.

    Alternatively, you can try the second method i described, to import the data.



    3.  In regards to having a picture column in this table,

    you have to format the source data in a certain way.

    It depends if you wish to have a small version of the image showing first as a "thumbnail", then when a user clicks into it, if you wish it to open in a new tab perhaps;

    or in a LightBox, but i will elaborate more :

    -

    "Image” link columns are used to render images in the table, either in full size, or as a link from a thumbnail to a full size image.

    http://domain.com/thumb.png||http://domain.com/fullsize.png
    
    • Rendering rules: If the content of the cells contains a combination of “two sticks” – || – everything to the left of this combination is used as a link to the thumbnail, and everything to the right as a link to the full image size:
      If the “||” combination is not found in the content, the entire content will be used as a link to a full-size image.
    • Issues to note:
      • Sometimes some issues may appear when you’re sorting on image columns, since it’s done alphabetically, and alphabetic sorting of HTML typically doesn’t make sense.
      • Please note that the plugin does not create thumbnails (at least for the moment), so you will need to take care of this yourself.
      • If you would like to open full-size images in lightbox, you can use a plugin for that, e.g. WP Lightbox 2  

    (please note that using LightBox is available only for tables that aren’t editable, such as linked to source data. It is not available for Manual Tables or SQL Tables with server-side processing enabled)



    4. "Each location has an event that happens on a different day of the month (e.g., every 2nd Tuesday), so we want to be able to use a dynamic placeholder to select those items."

    I am sorry but i did not understand this part.  If you can please elaborate more what you mean by that use-case and we can advise?

    If you possible have any screenshots from a working example or a Video.

    Of course, if the media contains any sensitive data, please mark reply as PRIVATE, for security reasons.

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  • Jack Edwards replied

    Thanks for the response.  It appears that I cannot do what I want directly.  Some comments about solutions.

    • I can create an Excel table in M365, including all the fields that I need.
      • the Excel file will have the URL of the image file in a cell for each image that I need
      • the URL will require special handling so that the link is not inadvertently changed
    • The Excel file will be replaced in WordPress, ensuring that it is a replacement into the same place as the original file.  There is now a facility in Elementor that will handle this.
    • Different wpDataTables will be created for the specific filtering I need (e.g., a table for selection of Meeting Days, a table for selected information from the Excel table, a table with the images, etc.)
    • I do not understand how the link is constructed to include both full size and thumbnail sizes of pictures (thumbnails are usually 150x150, what is the recommended size of normal picture?)
    • When I create a page to hold the result of a Master-Detail environment, the table seems to appear in the M-D page.  This does not seem correct.
      • I will perform some more testing

    When going through the video tutorials, the link to a Google table shows a link with now file type.  I do not understand why it would not be able to work with an Excel table.

    My apologies for being a pest and not getting more testing done.  I did want to respond so that you did not close the ticket.

    Jack

  •  1,693
    Miloš replied

    Hi, Jack.

    You're welcome.

    I will do my best to cover any remaining points that are unsolved.

    Please correct me if i don't cover everything/ if i miss some detail unanswered.

    1. 

    • I do not understand how the link is constructed to include both full size and thumbnail sizes of pictures (thumbnails are usually 150x150, what is the recommended size of normal picture?)

    - If you use an Image Column in our plugin, and if you wish to have a 150x150 thumbnail in the initial table view,

    then if a user clicks into an image, to load the full sized image;

    then you have to construct the cell like this, with two links ( One link to the smaller image, and another link to full version, with a "two stick symbol" between them);

    Basically, as explained on our Image Column documentation :

    If the content of the cell contains a combination of “two sticks” ( "||" ) 

    then everything to the left of this combination is used as a link to the smaller thumbnail, 

    and everything to the right of that symbol is used as a link to the full image size:

    So for example,

    http://domain.com/SMALL-image.png||http://domain.com/FULL-image.png
    

    this would render the smaller version of the image in the table cell,

    and if a user clicks into it, it would load the full image in a new tab.

    -

    In regards to a recommended size for either image, ( thumbnail or full version);

    there are no recommended sizes, 

    you can use any image size you need for your use-case,

    it depends on what kind of design you need, etc.

    -

    Typically when we upload an image, in most cases i see users tend to do the 150x150 px for the thumbnail, but for the full image version there are no rules, i saw a lot of different images/sizes, it depends on what the website needs, we are not able to advise on that.


    2. When I create a page to hold the result of a Master-Detail environment, the table seems to appear in the M-D page.  This does not seem correct.

    - I am sorry but i did not quite understand that one.

    Could you show me any screenshots or record a Video of your screen?

    Basically, when you make a template page for Master-Details "more details page";

    if you visit that URL you should see "empty placeholders" for where you place column placeholders,

    and the cell values are only passed when a user clicks through the table row,

    then all data from that row gets passed and the MD placeholders are generated on the template page.

    But if you could elaborate a bit more and show me some screenshots or a Video so that i can see what you meant?


    3. When going through the video tutorials, the link to a Google table shows a link with now file type.  I do not understand why it would not be able to work with an Excel table.

    - That is correct.  

    If we use Google Spreadsheet as a table data source, you can simply paste the URL from the Sheet.

    ( After you Publish the Sheet and set the Share to Anyone with Link/  or for Private sheets use Google API method);

    but for the Excel files, the logic for providing the data source is simply completely different,

    i am not a developer so i can't elaborate in full details why it is like that;

    but in order for our plugin to be able to access an Excel file;

    the path to the Excel file needs to end with any Excel extention.

    As we pointed out on this Documentation about Creating Tables in WordPress from Excel,

    in this important note in the Section for "URL from any Domain";

    The file needs to be accessible online in order to create a table from it,

    5650806606.png

    which means what we mentioned before - if the URL path to the Excel does not lead directly to the file itself,

    our plugin will not be able to access it to render the data/

     or in other words, it has to end with "filename.xls" ( or any other Excel extension at the end like .XLSX or .ODS)

    -

    I hope that i clarified some of the points.

    We will be here if you have any further questions, and the ticket will stay alive,

    even if it closes after a week or so,   you will still be able to write on it, and it will notify me that you have replied, so no worries about the time.

    Thank you.

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables