Well in my haste to work out how to display full file names in the Image Library (File) view I made a rookie mistake and forgot to first copy it before making changes. I've back-tracked and reset the Format to unformatted list but I've lost the correct Settings.

Can someone give me the correct settings so it displays properly, (plus field settings in case I've messed them up too).

Finally, can anyone advise on how to display full file names so I can pick the correct images for my paragraphs - because my file names all start with a manufacturer name (say, Creaks_Advertising) that's often all I get displaying under each thumbnail image and my eyesight ain't that great now I'm in my 70s!

Accepted answer

Sometimes, even with CSS cache disabled you sometimes still need to clear the cache (I often find this if I introduce a new CSS file).

I'm a bit short of time to try and delve into the CSS today I'm afraid though may be able to look again later this week if you or someone else hasn't figured it out by then.

I'm guessing that when you changed the display method to a more suitable one, the default CSS messed it up?

Was the idea of modifying the view to include the full filename as a title tooltip for the image:

  • Add an extra filename to the view
  • Move it above File: File ID
  • Include it in the rewrite of File: File ID
<img class="image-library-image" src="[uri]" data-file-url="[uri_1]" data-fid="[fid]" title="[filename_1]" />

I tried this and it works so well I'm going to keep it for my sites as many of my filenames are long

 

Comments

Hi @ian If you go on the admin bar to Configuration > Development > Configuration manager > Single Import/Export > Import Then paste in this:

{
    "_config_name": "views.view.image_library",
    "name": "image_library",
    "description": "Displays recently uploaded images for selection when creating content.",
    "module": "filter",
    "storage": 2,
    "tag": "default",
    "disabled": false,
    "base_table": "file_managed",
    "human_name": "Image Library",
    "core": "1.7",
    "display": {
        "default": {
            "display_title": "Master",
            "display_plugin": "default",
            "display_options": {
                "query": {
                    "type": "views_query",
                    "options": []
                },
                "access": {
                    "type": "perm"
                },
                "cache": {
                    "type": "none"
                },
                "exposed_form": {
                    "type": "basic",
                    "options": {
                        "reset_button": 0,
                        "reset_button_label": "Reset",
                        "exposed_sorts_label": "Sort by",
                        "expose_sort_order": 1,
                        "sort_asc_label": "Asc",
                        "sort_desc_label": "Desc",
                        "autosubmit": 0,
                        "autosubmit_hide": 1
                    }
                },
                "pager": {
                    "type": "mini",
                    "options": {
                        "items_per_page": "20",
                        "offset": "0",
                        "id": "0",
                        "total_pages": "",
                        "tags": {
                            "previous": "‹ previous",
                            "next": "next ›"
                        },
                        "expose": {
                            "items_per_page": 1,
                            "items_per_page_label": "Items per page",
                            "items_per_page_options": "5, 10, 20, 40, 60",
                            "items_per_page_options_all": 0,
                            "items_per_page_options_all_label": "- All -",
                            "offset": 0,
                            "offset_label": "Offset"
                        }
                    }
                },
                "style_plugin": "default",
                "row_plugin": "fields",
                "fields": {
                    "uri": {
                        "id": "uri",
                        "table": "file_managed",
                        "field": "uri",
                        "relationship": "none",
                        "group_type": "group",
                        "ui_name": "File: Path (thumbnail)",
                        "label": "",
                        "exclude": 1,
                        "alter": {
                            "alter_text": 0,
                            "text": "",
                            "make_link": 0,
                            "path": "",
                            "absolute": 0,
                            "external": 0,
                            "replace_spaces": 0,
                            "path_case": "none",
                            "trim_whitespace": 0,
                            "alt": "",
                            "rel": "",
                            "link_class": "",
                            "prefix": "",
                            "suffix": "",
                            "target": "",
                            "nl2br": 0,
                            "max_length": "",
                            "word_boundary": 1,
                            "ellipsis": 1,
                            "more_link": 0,
                            "more_link_text": "",
                            "more_link_path": "",
                            "strip_tags": 0,
                            "trim": 0,
                            "preserve_tags": "",
                            "html": 0
                        },
                        "element_type": "",
                        "element_class": "",
                        "element_label_type": "",
                        "element_label_class": "",
                        "element_label_colon": false,
                        "element_wrapper_type": "",
                        "element_wrapper_class": "",
                        "element_default_classes": 1,
                        "empty": "",
                        "hide_empty": 0,
                        "empty_zero": 0,
                        "hide_alter_empty": 1,
                        "link_to_file": 0,
                        "file_download_path": 1,
                        "image_style": "thumbnail",
                        "thumbnail_style": "thumbnail"
                    },
                    "uri_1": {
                        "id": "uri_1",
                        "table": "file_managed",
                        "field": "uri",
                        "relationship": "none",
                        "group_type": "group",
                        "ui_name": "File: Path (full)",
                        "label": "",
                        "exclude": 1,
                        "alter": {
                            "alter_text": 0,
                            "text": "",
                            "make_link": 0,
                            "path": "",
                            "absolute": 0,
                            "external": 0,
                            "replace_spaces": 0,
                            "path_case": "none",
                            "trim_whitespace": 0,
                            "alt": "",
                            "rel": "",
                            "link_class": "",
                            "prefix": "",
                            "suffix": "",
                            "target": "",
                            "nl2br": 0,
                            "max_length": "",
                            "word_boundary": 1,
                            "ellipsis": 1,
                            "more_link": 0,
                            "more_link_text": "",
                            "more_link_path": "",
                            "strip_tags": 0,
                            "trim": 0,
                            "preserve_tags": "",
                            "html": 0
                        },
                        "element_type": "",
                        "element_class": "",
                        "element_label_type": "",
                        "element_label_class": "",
                        "element_label_colon": false,
                        "element_wrapper_type": "",
                        "element_wrapper_class": "",
                        "element_default_classes": 1,
                        "empty": "",
                        "hide_empty": 0,
                        "empty_zero": 0,
                        "hide_alter_empty": 1,
                        "link_to_file": 0,
                        "file_download_path": 1,
                        "image_style": ""
                    },
                    "fid": {
                        "id": "fid",
                        "table": "file_managed",
                        "field": "fid",
                        "relationship": "none",
                        "group_type": "group",
                        "ui_name": "",
                        "label": "",
                        "exclude": 0,
                        "alter": {
                            "alter_text": 1,
                            "text": "<img class=\"image-library-image\" src=\"[uri]\" data-file-url=\"[uri_1]\" data-fid=\"[fid]\" />",
                            "make_link": 0,
                            "path": "",
                            "absolute": 0,
                            "external": 0,
                            "replace_spaces": 0,
                            "path_case": "none",
                            "trim_whitespace": 0,
                            "alt": "",
                            "rel": "",
                            "link_class": "",
                            "prefix": "",
                            "suffix": "",
                            "target": "",
                            "nl2br": 0,
                            "max_length": "",
                            "word_boundary": 1,
                            "ellipsis": 1,
                            "more_link": 0,
                            "more_link_text": "",
                            "more_link_path": "",
                            "strip_tags": 0,
                            "trim": 0,
                            "preserve_tags": "",
                            "html": 0
                        },
                        "element_type": "0",
                        "element_class": "",
                        "element_label_type": "",
                        "element_label_class": "",
                        "element_label_colon": false,
                        "element_wrapper_type": "0",
                        "element_wrapper_class": "",
                        "element_default_classes": 0,
                        "empty": "",
                        "hide_empty": 0,
                        "empty_zero": 0,
                        "hide_alter_empty": 1,
                        "link_to_file": 0
                    },
                    "filename": {
                        "id": "filename",
                        "table": "file_managed",
                        "field": "filename",
                        "relationship": "none",
                        "group_type": "group",
                        "ui_name": "",
                        "label": "",
                        "exclude": 0,
                        "alter": {
                            "alter_text": 0,
                            "text": "",
                            "make_link": 0,
                            "path": "",
                            "absolute": 0,
                            "external": 0,
                            "replace_spaces": 0,
                            "path_case": "none",
                            "trim_whitespace": 0,
                            "alt": "",
                            "rel": "",
                            "link_class": "",
                            "prefix": "",
                            "suffix": "",
                            "target": "",
                            "nl2br": 0,
                            "max_length": "",
                            "word_boundary": 0,
                            "ellipsis": 0,
                            "more_link": 0,
                            "more_link_text": "",
                            "more_link_path": "",
                            "strip_tags": 0,
                            "trim": 0,
                            "preserve_tags": "",
                            "html": 0
                        },
                        "element_type": "p",
                        "element_class": "image-library-filename",
                        "element_label_type": "",
                        "element_label_class": "",
                        "element_label_colon": false,
                        "element_wrapper_type": "",
                        "element_wrapper_class": "",
                        "element_default_classes": 0,
                        "empty": "",
                        "hide_empty": 0,
                        "empty_zero": 0,
                        "hide_alter_empty": 1,
                        "link_to_file": 0
                    }
                },
                "filters": {
                    "filemime": {
                        "id": "filemime",
                        "table": "file_managed",
                        "field": "filemime",
                        "relationship": "none",
                        "group_type": "group",
                        "ui_name": "",
                        "operator": "starts",
                        "value": "image/",
                        "group": "1",
                        "exposed": false,
                        "expose": {
                            "operator_id": false,
                            "label": "",
                            "description": "",
                            "use_operator": false,
                            "operator": "",
                            "identifier": "",
                            "required": false,
                            "remember": false,
                            "multiple": false,
                            "remember_roles": {
                                "authenticated": "authenticated"
                            }
                        },
                        "is_grouped": false,
                        "group_info": {
                            "label": "",
                            "description": "",
                            "identifier": "",
                            "optional": true,
                            "widget": "select",
                            "multiple": false,
                            "remember": 0,
                            "default_group": "All",
                            "default_group_multiple": [],
                            "group_items": []
                        }
                    },
                    "uri": {
                        "id": "uri",
                        "table": "file_managed",
                        "field": "uri",
                        "relationship": "none",
                        "group_type": "group",
                        "ui_name": "",
                        "operator": "starts",
                        "value": "public://",
                        "group": "1",
                        "exposed": false,
                        "expose": {
                            "operator_id": false,
                            "label": "",
                            "description": "",
                            "use_operator": false,
                            "operator": "",
                            "identifier": "",
                            "required": false,
                            "remember": false,
                            "multiple": false,
                            "remember_roles": {
                                "authenticated": "authenticated"
                            }
                        },
                        "is_grouped": false,
                        "group_info": {
                            "label": "",
                            "description": "",
                            "identifier": "",
                            "optional": true,
                            "widget": "select",
                            "multiple": false,
                            "remember": 0,
                            "default_group": "All",
                            "default_group_multiple": [],
                            "group_items": []
                        }
                    },
                    "filename": {
                        "id": "filename",
                        "table": "file_managed",
                        "field": "filename",
                        "relationship": "none",
                        "group_type": "group",
                        "ui_name": "",
                        "operator": "contains",
                        "value": "",
                        "group": "1",
                        "exposed": true,
                        "expose": {
                            "operator_id": "filename_op",
                            "label": "Filename",
                            "description": "",
                            "use_operator": false,
                            "operator": "filename_op",
                            "identifier": "filename",
                            "required": false,
                            "remember": false,
                            "multiple": false,
                            "remember_roles": {
                                "authenticated": "authenticated"
                            }
                        },
                        "is_grouped": false,
                        "group_info": {
                            "label": "",
                            "description": "",
                            "identifier": "",
                            "optional": true,
                            "widget": "select",
                            "multiple": false,
                            "remember": 0,
                            "default_group": "All",
                            "default_group_multiple": [],
                            "group_items": []
                        }
                    }
                },
                "sorts": {
                    "timestamp": {
                        "id": "timestamp",
                        "table": "file_managed",
                        "field": "timestamp",
                        "relationship": "none",
                        "group_type": "group",
                        "ui_name": "",
                        "order": "DESC",
                        "exposed": false,
                        "expose": {
                            "label": ""
                        },
                        "granularity": "second"
                    }
                },
                "style_options": {
                    "grouping": [],
                    "row_class": "image-library-choose-file",
                    "default_row_class": 0,
                    "row_class_special": 0
                },
                "use_ajax": true,
                "header": [],
                "row_options": {
                    "default_field_elements": 0,
                    "inline": [],
                    "separator": "",
                    "hide_empty": 0
                },
                "empty": {
                    "area": {
                        "id": "area",
                        "table": "views",
                        "field": "area",
                        "relationship": "none",
                        "group_type": "group",
                        "ui_name": "",
                        "label": "",
                        "empty": true,
                        "content": "<p>No available images.</p>\r\n",
                        "format": "filtered_html",
                        "tokenize": 0
                    }
                },
                "hide_admin_links": true
            }
        }
    }
}

Thanks! I've done that and restored everything back to the original condition.

I'm  not sure I understand all that is in the snippet but I'll work on understanding what is happening.

Can you enlighten me as to where the template file is (if there is one) or is it managed by css?

If you install the Devel module, you can easily enable "Theme debug" and then you can see where everything is coming from and also get hints for what to call a template in your theme to override it.

I think you can probably do what you need with CSS, but you may need a different display format.  Or in the view, maybe add a title to the image that is the filename so it shows on hover?

@yorkshirepudding - Already had the Devel module installed and active so I activated "Theme Debug".

Had a look at the resulting code comments and "think" the two files that are impacting this area would be views-view-unformatted.tpl.php and views-view-fields.tpl.php. 

Not much in them to point a possible way forward so I tried a css approach. My problem is I have very loooong filenames and my attempts to change the css via local.css (the last css file to be loaded in my sub-theme) have failed so far. I was able to change the output via Firefox's Inspect feature by editing the css directly and viewing the changes on screen.

I started by modifying the view to use a class called TNZ. Then I added css code to change p.image-library filename in my local.css to the same settings I used when directly editing the css in Firefox Inspect. I then worked my way back through the page source and ended up with:


/********  Image Library  ********/
.view-image-library.TNZ.view-content.image-library-choose-file p.image-library-filename {
  margin: 0;
  max-width: 150px;       <-- changed from 125px
  max-height: 54px;       <-- changed from 18px
  font-size: 0.7rem;
  overflow: auto;         <-- changed from hidden
  text-align: center;
  position: absolute;
  top: 110px;             <-- changed from  bottom: 0;
  left: 0;
  right: 0;
}
/**********************************/

But it doesn't seem to change anything as Firefox still shows the css to be coming from "filter.css:120" rather than "local.css". I'm assuming I either need more in my css (shown above) or I need to add css to alter classes view-image-library, view-content, image-library-choose-file, and TNZ.

Got any hints on what could be wrong?

Sometimes, even with CSS cache disabled you sometimes still need to clear the cache (I often find this if I introduce a new CSS file).

I'm a bit short of time to try and delve into the CSS today I'm afraid though may be able to look again later this week if you or someone else hasn't figured it out by then.

I'm guessing that when you changed the display method to a more suitable one, the default CSS messed it up?

Was the idea of modifying the view to include the full filename as a title tooltip for the image:

  • Add an extra filename to the view
  • Move it above File: File ID
  • Include it in the rewrite of File: File ID
<img class="image-library-image" src="[uri]" data-file-url="[uri_1]" data-fid="[fid]" title="[filename_1]" />

I tried this and it works so well I'm going to keep it for my sites as many of my filenames are long

 

That worked well and saved me a lot of hassle trying to reformat the view and css! Brilliant!! I hadn't thought of adding a tooltip... makes so much more sense once its pointed out.

Neat thing is I've been using it all day today to find and replace images that couldn't be found by direct requests to the server.