Okay
  Public Ticket #3301716
Image Size
Closed

Comments

  • Angela Atherton started the conversation

    How do you control the image size when the column type is an image?

    Also, how do you control the image size when the column type is an image and the column is a group column?

  •  1,849
    Miloš replied

    Hi, Angela.

    Sorry for the delay.

    I am not sure exactly what the use-case is.

    1. For example, if you use an attachment Editor type to upload images directly in table cells for an Image column,

    this is one of the current "default behaviour" issues that our devs noted on our "Editor types" Documentation here, regarding the image column being used with attachment editor type.

    - If the Column type is set to Image, and the editor type as an attachment

    the uploader will automatically insert a ‘thumb’ size in the table cell (the resolution is defined in WP config), and link it to a full-size image. 

    If you have a WP Lightbox 2 plugin installed, each image will automatically open in a lightbox.

    -

    If we don't use the "attachment" as the Editor type, for example, if we use one-line edit, or multi-line edit;

    then we can manually implement in the cell, if we wish a thumbnail, or the path to the full image without the thumbnail,

    - As we stated in this documentation about our Image columns;

    the specific rendering rules for image cells are

    : 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:

    http://domain.com/thumb.png||http://domain.com/fullsize.png

    If the “||” combination is not found in the content, the entire content will be used as a link to a full-size image.

    -

    So, unfortunately, this is the current limitation - you can try to change the default "thumb image upload" resolution is defined in WP config.

    - If you wish, you can read more details on how uploading image sizes works in WordPress here.

    I hope this helps.



    2. Or, if you just wish to manipulate the images from a specific column;

    you can use a CSS selector like this :

    td.column-photo img {    
    height: 20px;   
     width: fit-content;
    }

    Just check the origin header of the column, in my test table i just called column "photo",

    but you can check it in the column settings

    5389732283.png

    So basically, after the  td.column-  ( and here the origin header name)  img

    I hope i explained that correctly, let me know if that makes sense.

    -

    Let me know if that helps, or if you need to achieve something else.


    3. For manipulating image size when the Column is used as "Grouped column", you can use this CSS:

    .group>img {
        height: 50px;   
        width: fit-content;
    }

    Here are my sample screenshots from a dummy table, "before" and "after" applied CSS :

    3600139500.png
    1553308648.png

    If you wish to add this only for one table, add it to the table's Customize/Custom CSS,

    or if you wish to add it to all tables, add the CSS to main plugin settings/Custom JS and CSS/Custom CSS.

    Let me know if that helps.smile.png


    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    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