Display Image Dimensions
Displays image width/height next to the file size or filename in the file list.
Instructions
Install this snippet with our free Code Chest plugin. https://gravitywiz.com/gravity-forms-code-chest/
Configure the snippet based on inline instructions.
Code
Filename: gpfup-display-image-dimensions.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
/**
* Gravity Perks // File Upload Pro // Display Image Dimensions
* https://gravitywiz.com/documentation/gravity-forms-file-upload-pro/
*
* Displays image width/height next to the file size or filename in the file list.
*
* Instruction Video: https://www.loom.com/share/ef7c047ada5641bd937365b3f29600bc
*
* Instructions:
*
* 1. Install this snippet with our free Code Chest plugin.
* https://gravitywiz.com/gravity-forms-code-chest/
*
* 2. Configure the snippet based on inline instructions.
*/
gform.addAction( 'gpfup_uploader_ready', function ( gpfup ) {
const store = gpfup.$store;
if ( !store ) {
return;
}
// Configuration: Update these settings to customize the display of image dimensions.
const config = {
displayMode: 'filename', // 'filesize' (2.11MB | 1024x1024 px) or 'filename' (Filename.jpg (1024x1024 px))
enableTooltip: false, // Show original dimensions on hover when image has been cropped
};
if ( !document.getElementById( 'gpfup-dimensions-style' ) ) {
const style = document.createElement( 'style' );
style.id = 'gpfup-dimensions-style';
style.textContent = `
.gpfup__dims-sep { margin: 0 5px; }
.gpfup__dims-filename { color: #999; }
`;
document.head.appendChild( style );
}
function getDimensions( source ) {
if ( !source?.width || !source?.height ) {
return null;
}
return {
width: Math.round( source.width ),
height: Math.round( source.height ),
};
}
function getAllFiles() {
return store.getters?.allFiles || store.state.files || [];
}
function getFileInfoElement( fileId ) {
const root = gpfup.vm?.$el || document;
const fileEl = root.querySelector( `[data-file-id="${ fileId }"]` );
return fileEl?.querySelector( '.gpfup__file-info' ) || null;
}
async function renderDimensions( file ) {
if ( !file?.id || !file.type?.startsWith( 'image/' ) ) {
return;
}
const editor = store.state.editor || {};
const cropped = getDimensions( editor.cropperResults?.[ file.id ]?.coords );
let original = getDimensions( editor.originals?.[ file.id ]?.size );
if ( !original && store.state.storage?.getOriginal ) {
const stored = await store.state.storage.getOriginal( file.id );
original = getDimensions( stored?.size );
}
const display = cropped || original;
if ( !display ) {
return;
}
const infoEl = getFileInfoElement( file.id );
if ( !infoEl ) {
return;
}
const targetSelector =
config.displayMode === 'filename'
? '.gpfup__filename'
: '.gpfup__filesize';
const targetEl = infoEl.querySelector( targetSelector );
if ( !targetEl ) {
return;
}
if ( targetEl.dataset.gpfupDimsRendered === '1' ) {
return;
}
const dimText = `${ display.width }x${ display.height } px`;
let tooltip = '';
if (
config.enableTooltip &&
cropped &&
original &&
( cropped.width !== original.width || cropped.height !== original.height )
) {
tooltip = `Original: ${ original.width }x${ original.height } px`;
}
const titleAttr = tooltip ? ` title="${ tooltip }"` : '';
if ( !targetEl.dataset.gpfupOriginalHtml ) {
targetEl.dataset.gpfupOriginalHtml = targetEl.innerHTML;
}
targetEl.innerHTML =
config.displayMode === 'filename'
? `${ targetEl.dataset.gpfupOriginalHtml } <span class="gpfup__dims-filename"${ titleAttr }>( ${ dimText } )</span>`
: `${ targetEl.dataset.gpfupOriginalHtml }<span class="gpfup__dims-sep"> | </span><span class="gpfup__dims"${ titleAttr }>${ dimText }</span>`;
targetEl.dataset.gpfupDimsRendered = '1';
}
function updateAll() {
getAllFiles().forEach( renderDimensions );
}
updateAll();
store.subscribe( function ( mutation ) {
switch ( mutation.type ) {
case 'ADD_FILE':
case 'REPLACE_FILE':
case 'STORE_ORIGINAL':
case 'STORE_CROPPER_RESULTS':
updateAll();
break;
}
} );
} );