Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Image Captions on Thumbnail View #77

Open
wants to merge 8 commits into
base: improve-build
Choose a base branch
from
Open

Add Image Captions on Thumbnail View #77

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d395588
Adjust formatting
jyoung-uf Dec 20, 2023
260970d
Conditionally render captions under images (grid and single)
jyoung-uf Dec 20, 2023
ac142db
Fix formatting
jyoung-uf Dec 20, 2023
6b611ba
Update guide with image caption setting
jyoung-uf Dec 20, 2023
e1d8c84
Fix typo
jyoung-uf Dec 20, 2023
17a38a1
Replace *all* instances of newline chars with line break element...
jyoung-uf Feb 6, 2024
d628eac
Use grid layout for thumbnail view wrapper
jyoung-uf Feb 6, 2024
aec6702
Bump line height for improved readability
jyoung-uf Feb 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 51 additions & 51 deletions PortalApp/app/model/SettingsModel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,54 +18,54 @@
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
Ext.define('SpWebPortal.model.SettingsModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'version', type: 'string', defaultValue: '2.0'}, //this is the web portal product version!
{name: 'portalInstance', type: 'string', defaultValue: 'spwp'},
{name: 'solrURL', type: 'string'},
{name: 'solrPageSize', type: 'int', defaultValue: 50},
{name: 'maxSolrPageSize', type: 'int', defaultValue: 5000},
{name: 'imageBaseUrl', type: 'string'},
{name: 'collectionName', type: 'string'},
{name: 'collCodeSolrFld', type: 'string'},
{name: 'imagePreviewSize', type: 'int', defaultValue: 200}, //when this setting is changed in settings.json, the height and width for *.tv-thumb should be set to about 7 px greater than this setting in resources/css/thumb-view.css
{name: 'imageViewSize', type: 'int', defaultValue: 500}, //<= 0 for actual size
{name: 'defInitialView', type: 'string', defaultValue: 'grid'},
{name: 'defMapType', type: 'string', defaultValue: 'roadmap'},
{name: 'backgroundURL', type: 'string', defaultValue: 'resources/images/specify128.png'},
{name: 'bannerURL', type: 'string'},
{name: 'bannerTitle', type: 'string', defaultValue: 'Specify Web Portal'},
{name: 'bannerHeight', type: 'int', defaultValue: 120},
{name: 'bannerWidth', type: 'int', defaultValue: 250},
{name: 'imageInfoFlds', type: 'string'},
{name: 'topBranding', type: 'string'},
{name: 'topHeight', type: 'int'},
{name: 'topMarginLeft', type: 'string'},
{name: 'topMarginRight', type: 'string'},
{name: 'topWidth', type: 'int'},
{name: 'bottomBranding', type: 'string'},
{name: 'bottomHeight', type: 'int'},
{name: 'bottomMarginLeft', type: 'string'},
{name: 'bottomMarginRight', type: 'string'},
{name: 'bottomWidth', type: 'int'},
{name: 'imagePageSize', type: 'int', defaultValue: 100},
{name: 'allowExportToFile', type: 'int', defaultValue: 1},
{name: 'collections', type: 'json', defaultValue: []},
{name: 'doClusterFx', type: 'boolean', defaultValue: false},
{name: 'clusterMinPoints', type: 'int', defaultValue: 3000},
{name: 'clusterGridSize', type: 'int'},
{name: 'clusterMaxZoom', type: 'int'},
{name: 'clusterZoomOnClick', type: 'boolean'},
{name: 'clusterImagePath', type: 'string', defaultValue: 'resources/images/m'},
{name: 'clusterImageExtension', type: 'string'},
{name: 'clusterAverageCenter', type: 'boolean', defaultValue: true},
{name: 'clusterMinimumClusterSize', type: 'int'},
{name: 'clusterIgnoreHiddenMarkers', type: 'boolean', defaultValue: true},
{name: 'clusterStyles', type: 'json'}
],

validations: [
{type: 'inclusion', field: 'defInitialView', list: ['grid', 'image', 'map']},
{type: 'inclusion', field: 'defMapType', list: ['roadmap', 'satellite', 'hybrid', 'terrain']}
]
});
extend: 'Ext.data.Model',
fields: [
{name: 'version', type: 'string', defaultValue: '2.0'}, //this is the web portal product version!
{name: 'portalInstance', type: 'string', defaultValue: 'spwp'},
{name: 'solrURL', type: 'string'},
{name: 'solrPageSize', type: 'int', defaultValue: 50},
{name: 'maxSolrPageSize', type: 'int', defaultValue: 5000},
{name: 'imageBaseUrl', type: 'string'},
{name: 'collectionName', type: 'string'},
{name: 'collCodeSolrFld', type: 'string'},
{name: 'imagePreviewSize', type: 'int', defaultValue: 200}, //when this setting is changed in settings.json, the height and width for *.tv-thumb should be set to about 7 px greater than this setting in resources/css/thumb-view.css
{name: 'imageViewSize', type: 'int', defaultValue: 500}, //<= 0 for actual size
{name: 'defInitialView', type: 'string', defaultValue: 'grid'},
{name: 'defMapType', type: 'string', defaultValue: 'roadmap'},
{name: 'backgroundURL', type: 'string', defaultValue: 'resources/images/specify128.png'},
{name: 'bannerURL', type: 'string'},
{name: 'bannerTitle', type: 'string', defaultValue: 'Specify Web Portal'},
{name: 'bannerHeight', type: 'int', defaultValue: 120},
{name: 'bannerWidth', type: 'int', defaultValue: 250},
{name: 'imageInfoFlds', type: 'string'},
{name: 'topBranding', type: 'string'},
{name: 'topHeight', type: 'int'},
{name: 'topMarginLeft', type: 'string'},
{name: 'topMarginRight', type: 'string'},
{name: 'topWidth', type: 'int'},
{name: 'bottomBranding', type: 'string'},
{name: 'bottomHeight', type: 'int'},
{name: 'bottomMarginLeft', type: 'string'},
{name: 'bottomMarginRight', type: 'string'},
{name: 'bottomWidth', type: 'int'},
{name: 'imagePageSize', type: 'int', defaultValue: 100},
{name: 'allowExportToFile', type: 'int', defaultValue: 1},
{name: 'collections', type: 'json', defaultValue: []},
{name: 'doClusterFx', type: 'boolean', defaultValue: false},
{name: 'clusterMinPoints', type: 'int', defaultValue: 3000},
{name: 'clusterGridSize', type: 'int'},
{name: 'clusterMaxZoom', type: 'int'},
{name: 'clusterZoomOnClick', type: 'boolean'},
{name: 'clusterImagePath', type: 'string', defaultValue: 'resources/images/m'},
{name: 'clusterImageExtension', type: 'string'},
{name: 'clusterAverageCenter', type: 'boolean', defaultValue: true},
{name: 'clusterMinimumClusterSize', type: 'int'},
{name: 'clusterIgnoreHiddenMarkers', type: 'boolean', defaultValue: true},
{name: 'clusterStyles', type: 'json'},
{name: 'displayImgCaption', type: 'boolean', defaultValue: false}
],
validations: [
{type: 'inclusion', field: 'defInitialView', list: ['grid', 'image', 'map']},
{type: 'inclusion', field: 'defMapType', list: ['roadmap', 'satellite', 'hybrid', 'terrain']}
]
})
20 changes: 16 additions & 4 deletions PortalApp/app/view/ImageSingleView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,21 @@ Ext.define('SpWebPortal.view.ImageSingleView', {
this.superclass.initComponent.apply(this, arguments);
},

getImgHtml: function() {
var src = this.getIsActualSize() ? this.getImageRecord().get('Src') : this.getImageRecord().get('StdSrc');
return '<table class="deadcenter"> <tr><td><img src='+ src + '></td></tr></table>'; //caller will have filled-in the src.
}
getImgHtml: function () {
var src = this.getIsActualSize()
? this.getImageRecord().get('Src')
: this.getImageRecord().get('StdSrc')

var displayImgCaption = Ext.getStore('SettingsStore').getAt(0).get('displayImgCaption')
var caption = this.getImageRecord().get('AttachedToDescr').replace('\n', '<br>')
var captionHtml = displayImgCaption ? '<tr><td>' + caption + '</td></tr>' : ''

return (
'<table class="deadcenter">' +
'<tr><td><img src=' + src + '></td></tr>' +
captionHtml +
'</table>'
) //caller will have filled-in the src.
}

});
63 changes: 34 additions & 29 deletions PortalApp/app/view/ThumbnailView.js
View file
Open in desktop
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apologies, but we realized that the previous change was not working properly for cases where more than two fields were configured for imageInfoFlds. This should address that.

Original file line number Diff line number Diff line change
Expand Up @@ -41,35 +41,40 @@ Ext.define('SpWebPortal.view.ThumbnailView', {
Ext.create('Ext.ux.DataView.DragSelector', {}),
Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'})
],*/
prepareData: function(data) {
Ext.apply(data, {
shortName: Ext.util.Format.ellipsis(data.Title, 15)
});
return data;
},
prepareData: function (data) {
Ext.apply(data, {
shortName: Ext.util.Format.ellipsis(data.Title, 15),
AttachedToDescrFormatted: data.AttachedToDescr.split('\n').join('<br>')
})
return data
},


initComponent: function () {
var displayImgCaption = Ext.getStore('SettingsStore').getAt(0).get('displayImgCaption')

initComponent: function() {
var settingsStore = Ext.getStore('SettingsStore');
var settings = settingsStore.getAt(0);
Ext.apply(this, {
tpl: [
'<tpl for=".">',
'<div class="tv-thumb-wrap" id="{AttachmentID}">',
//'<div class="tv-thumb"><img src="' + settings.get('imageBaseUrl') + '/{AttachmentLocation}" title="{AttachedToDescr} - {Title}"></div>',
//'<div class="tv-thumb"><img src="{ThumbSrc}" title="{AttachedToDescr} - {Title}"></div>',
'<table class="tv-thumb"><tr><td><img src="{ThumbSrc}" title="{AttachedToDescr}"></td></tr></table>',
//'<span class="x-editable">{shortName}</span>
'</div>',
'</tpl>',
'<div class="x-clear"></div>'
]
});

// this.callParent(arguments);
this.superclass.initComponent.apply(this, arguments);
}

});
Ext.apply(this, {
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="tv-thumb-wrap" id="{AttachmentID}">',
//'<div class="tv-thumb"><img src="' + settings.get('imageBaseUrl') + '/{AttachmentLocation}" title="{AttachedToDescr} - {Title}"></div>',
//'<div class="tv-thumb"><img src="{ThumbSrc}" title="{AttachedToDescr} - {Title}"></div>',
'<table class="tv-thumb"><tr><td class="tv-cell"><img src="{ThumbSrc}" title="{AttachedToDescr}"></td></tr></table>',
'<tpl if="this.displayCaption()">',
'<table class="tv-desc"><tr><td>{AttachedToDescrFormatted}</td></tr></table>',
'</tpl>',
//'<span class="x-editable">{shortName}</span>
'</div>',
'</tpl>',
'<div class="x-clear"></div>',
{
displayCaption: function() {
return displayImgCaption
}
}
),
})

// this.callParent(arguments);
this.superclass.initComponent.apply(this, arguments)
}
})
1 change: 1 addition & 0 deletions PortalApp/doc/RoughGuideToWebPortalSetup.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,6 +294,7 @@ bottomHeight: height in pixels of the bottomBranding area.
bottomMarginLeft: CSS setting for bottomBranding content.
bottomMarginRight: CSS setting for bottomBranding content.
bottomWidth: width in pixels of bottomBranding content.
displayImgCaption: when set to true, the fields (as configured in imageInfoFlds, see above) will render underneath preview views and the image detail view.


###################################################################
Expand Down
3 changes: 2 additions & 1 deletion PortalApp/resources/config/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,5 +24,6 @@
"bottomHeight": null,
"bottomMarginLeft": null,
"bottomMarginRight": null,
"bottomWidth": null
"bottomWidth": null,
"displayImgCaption": false
}]
9 changes: 7 additions & 2 deletions PortalApp/resources/css/thumb-view.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
float: left;
/*margin: 4px;*/
margin-right: 0;
//padding: 1px;
max-width: 207px;
}
*.tv-thumb-wrap span {

Expand Down Expand Up @@ -89,4 +89,9 @@
}.ext-strict .ext-ie .x-tree .x-panel-bwrap{
position:relative;
overflow:hidden;
}
}

.tv-desc {
padding: 0.5rem 0.5rem 1rem;
display: table-cell;
}