This topic is locked
[SOLVED]

 Display one photo intrinsic size

10/25/2019 3:48:48 PM
ASPRunner.NET General questions
Pete K author

This should be so simple but I can't make it work for some reason. See this page: https://dna.fcps.net/veterans/honorgallery/view?editid1=7
The photo is in a File/Image upload. I want it to display at its intrinsic size which in this case happens to be 319x500, but it's getting stretched on larger monitors. How can I force it to not stretch beyond its actual size? The Documentation for the View as settings are confusing, with all the stuff about multiple images and thumbnails. I have tried different settings and nothing seems to work to just display the one image at its natural size.

admin 10/25/2019

The page is asking for username/password.

jadachDevClub member 10/25/2019

Need credentials to view that page

Pete K author 10/28/2019
jadachDevClub member 10/28/2019

Set your view as width and height to 0px and deselect everything else.

Pete K author 10/29/2019



Set your view as width and height to 0px and deselect everything else.


Thanks for the suggestion, Jerry. This is what I have:


Everything is deselected. I assume nothing on the right side matters for single images but I have tried various settings with no luck.

jadachDevClub member 10/29/2019

Your view image settings dialog box looks a little different than mine. Are you using 10.3? Are you storing the image in a database table?

Pete K author 10/29/2019

Playing around with Dev Tools in Chrome, I think I found the offending CSS:



[data-pageid="1"][data-itemid="integrated_edit_field4"] .r-images > img {

width: 100%;


Deleting that entry or changing the width to auto fixes the sizing issue in the dev tools, but I can't figure out how to implement it in my project. My understanding is that we are to use the Custom CSS button in the designer and edit the host: rule. So I tried:



/* Put your custom CSS code here */
:host {

width: auto;

}


But that didn't help; it was getting overridden. Adding !Important only screwed it up worse. It shouldn't be hard to get a phot to display at its inherent size on a large screen and only scale downward on smaller screens. You'd think that would be the default.

Pete K author 10/29/2019



Your view image settings dialog box looks a little different than mine. Are you using 10.3? Are you storing the image in a database table?


I am using 10.3 but the image is a file upload. You wouldn't think that would matter.

jadachDevClub member 10/29/2019

Wow, I am simply not having this issue at all. Maybe I should try an image upload to a folder instead of an image in the database, but like you said, it shouldn't matter. But this is the only difference in what we are doing.

jadachDevClub member 10/29/2019

Pete, I just did a quick test with both image stored in the database and image stored as a file. Both images were the same on my view page, both displaying in the actual pixel size.

Pete K author 10/30/2019



Pete, I just did a quick test with both image stored in the database and image stored as a file. Both images were the same on my view page, both displaying in the actual pixel size.



Thanks for taking the time to test this, Jerry. I did make some minor modifications to the page, such as removing labels and centering the page's elements, including the photo. I must have broken something. I'll make a standard view page and see if it works as expected, then add my tweaks one a time & see what breaks it. This is another great use case for being able to make multiple versions a page. Nice feature to have.

Pete K author 10/30/2019

I guess it was something I did, but I haven't been able to replicate it. I had centered each cell, dragged labels and fields around, applied some formatting to the fields & labels (font weight, style, and size), and made a few edits in the editor (deleted the footer block and set the theme for the page to Darkly). Somewhere along the line, I must have done something that broke the formatting for the photo. I just recreated the view page step-by-step and this time the photo is displaying as expected.
Lesson learned: when making page modifications -- especially when images are involved -- it pays to build and view the page often during the process.