2. PHPRunner General questions
  3. [SOLVED]  Reduce the size of images in edit page
This topic is locked
[SOLVED]

 Reduce the size of images in edit page

 		7/27/2013 9:04:19 AM
PHPRunner General questions
S
 scoobysteve author

Hi I have a PHPR6.1 application that I need to reduce the size of the images in the edit page, As they were loaded up at a higher resolution when they re appear in the edit page they fill the screen, I only want a smaller image to be displayed, can you help please.
I was told about a hard fix, in one of the files I found the original post but the replies are missing, please this is making the application almost unusable, its fine on a new application but this is a old application and no thumbnails were created on the original uploads so this is not a solution I need the code change in one of the system files to reduce the size of the images in the Edit page.
PLEASE PLEASE someone help me on this.
thanks

Steve
S
 		scoobysteve author 7/30/2013



Hi I have a PHPR6.1 application that I need to reduce the size of the images in the edit page, As they were loaded up at a higher resolution when they re appear in the edit page they fill the screen, I only want a smaller image to be displayed, can you help please.
I was given the code for this about a year ago but I cant find it on this forum anywhere please I could do with some help on this, the images are blowing out the edit screen and making it un useable. Tnx in advance
thanks

Steve


Can someone help me please, there is a way to fix this but I cant seem to find the answer anywhere. How to reduce the size of the images in the Edit page.
N
 		nohope4you 7/30/2013

In the visual editor, before </head>. put:



<style>

.setwidth img {width:200px;}

.setheight img {height:200px;}

</style>


and then go down to where your image is and on the final tag before the image, put class="setwidth setheight"
and to clean it up even more you could do



<style>

.setimg img {width:200px;height:200px;}

</style>
<body>

<img class="setimg">


and if its getting over-ridden as a last resort you could use !important on the settings so it would look like



<style>

.setimg img {width:200px!important;height:200px!important;}

</style>
<body>

<img class="setimg">




Can someone help me please, there is a way to fix this but I cant seem to find the answer anywhere. How to reduce the size of the images in the Edit page.
S
 		scoobysteve author 7/30/2013



In the visual editor, before </head>. put:



<style>

.setwidth {width:200px;}

.setheight {height:200px;}

</style>


and then go down to where your image is and on the final tag before the image, put class="setwidth setheight"
and to clean it up even more you could do



<style>

.setimg {width:200px;height:200px;}

</style>
<body>

<img class="setimg">


and if its getting over-ridden as a last resort you could use !important on the settings so it would look like



<style>

.setimg {width:200px!important;height:200px!important;}

</style>
<body>

<img class="setimg">


Thanks but I have 7 images on the edit page and I tried this but I am not sure where to put the class="setwidth setheight" and I am getting errors. I thought there was a place in one of the system php files I could globally set the size
N
 		nohope4you 7/30/2013

Sorry for not being specific enough. In the editor, if you have the class as .setimg in the style area, click on your image field, then hit the button to display the html code and your field will be highlighted at the bottom. before your field there will be a div tag that looks like <DIV class="fieldcontrolYOUR IMAGE FIELD NAME {$fielddispclassYOUR IMAGE FIELD NAME}">, (mine had a return in the middle so look out for that) So now look at what I did below to add the new class:
before it said: <DIV class="fieldcontrolIMAGE FIELD {$fielddispclassIMAGE FIELD}">

now it says: <DIV class="fieldcontrolIMAGE FIELD {$fielddispclassIMAGE FIELD} setimg">
These classes are delimited by a space. that should do it.
Also, earlier I left out that IMG tag on the style class so it should be

.setimg img {width...height..;}
so your div will pass it down to your img tag
S
 		scoobysteve author 7/30/2013



Sorry for not being specific enough. In the editor, if you have the class as .setimg in the style area, click on your image field, then hit the button to display the html code and your field will be highlighted at the bottom. before your field there will be a div tag that looks like <DIV class="fieldcontrolYOUR IMAGE FIELD NAME {$fielddispclassYOUR IMAGE FIELD NAME}">, (mine had a return in the middle so look out for that) So now look at what I did below to add the new class:
before it said: <DIV class="fieldcontrolIMAGE FIELD {$fielddispclassIMAGE FIELD}">

now it says: <DIV class="fieldcontrolIMAGE FIELD {$fielddispclassIMAGE FIELD} setimg">
These classes are delimited by a space. that should do it.
Also, earlier I left out that IMG tag on the style class so it should be

.setimg img {width...height..;}
so your div will pass it down to your img tag
Thats great thank you so much, it is working but is there any reason why my 2 fields that have date pickers now have reduced in size and when you clcik on them the page goes to the top so I can't enter any dates ???
Kind Regards
Steve
N
 		nohope4you 7/30/2013

You're welcome... now lets hope someone answers my post <img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=71679&image=1&table=forumreplies' class='bbcemoticon' alt='<<' />
S
 		scoobysteve author 7/30/2013



You're welcome... now lets hope someone answers my post <img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=71680&image=1&table=forumreplies' class='bbcemoticon' alt='<<' />


Just so you know I had to revert back to the following to get rid of the strange things with the date fields
<style>

.setwidth img {width:213px;}

.setheight img {height:120px;}

</style>
and
<DIV class="fieldcontrolIMAGE FIELD {$fielddispclassIMAGE FIELD} setwidth setheight">
to get it wo work.
Thanks again.