Image size in the Backend

nurbs65
(@nurbs65)

11 years, 3 months ago
Hi xnau thanks for the awesome plugin!

I have one question to the image field. I would like to have a bigger image in the backend page “participants-database-edit_participant”. I found the css code in the participants-database.css:
```
.image-field-wrap img {
    height: 50px;
    width: auto;
}
```
This I wanted to override with the child theme in style.css:
```
#pdb-foto .image-field-wrap img {
    height: 150px !important;
}
```
But that did not work. Can you please help me?

https://wordpress.org/plugins/participants-database/

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Author Roland Barker
(@xnau)

11 years, 3 months ago
try
```
.pdb-foto .img-field-wrap img{
   height: 150px;
}
```
“pdb-foto” is a classname, not an ID, so you use the dot. No need for the “important”
Thread Starter nurbs65
(@nurbs65)

11 years, 3 months ago
That doesn’t work. The selector is an id. Here is the HTML code:
```
<td id="pdb-foto">
  <input type="hidden" value="4194304" name="MAX_FILE_SIZE"></input>
  <input type="hidden" value="xyz.jpg" name="foto"></input>
  <div class="pdb-upload">
    <span class="image-field-wrap basename pdb-image image-field-wrap">
      <img src="http: ...."></img>
      <span class="image-filename"></span>
    </span>
    <input type="file" value="xyz.jpg" name="foto"></input>
    <span class="file-delete"></span>
  </div>
  <span class="helptext"></span>
</td>
```
I tried various ways. I do not know, how can I select the class object “image-field-wrap”. The image size should be valid only for this participants site and not for all images.
Plugin Author Roland Barker
(@xnau)

11 years, 3 months ago

Ah, different context…yes it’s an id in that form.

So can you see what rule might be overriding yours? It’s working fine in my tests.

Thread Starter nurbs65
(@nurbs65)

11 years, 3 months ago

I found no other rule that overrides this class.

I have no idea what’s the reason is.

Plugin Author Roland Barker
(@xnau)

11 years, 3 months ago

Are you using the browser developer tools to inspect the element? That will show you the currently active rule, and from that you can see how to override it.

Thread Starter nurbs65
(@nurbs65)

11 years, 3 months ago

I use the Firefox object inspector. I don’t find the overriding class. I know, it’s no clean solution, but I will change the value in participants-database.css. And next time I have to remember me, to do this again.

It’s also possible that I can find the solution. For your support, help and the plugin I am very thankful.

Thank you very much.

Plugin Author Roland Barker
(@xnau)

11 years, 3 months ago

Glad you found a way to make it work…you just have to remember to re-instate your changes when you upgrade.

tkalfaoglu
(@tkalfaoglu)

10 years, 9 months ago

I have an odd problem:
if you look at this page with chrome, you will find the photos long and tall.
http://arf.iyte.edu.tr/?page_id=184&lang=tr
..but firefox shows them fine..

so I added
.image-field-wrap img {
height: 150px;
width: 400px;
}
..to participants-database.css, and chrome shows the pictures fine, but firefox shows them verry fat..
what can I do?
Plugin Author Roland Barker
(@xnau)

10 years, 9 months ago
When resizing images, it’s best to only set one dimension of the image, then set the other dimension to “auto”
```
.image-field-wrap img {
height: auto;
width: 400px;
}
```

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Image size in the Backend’ is closed to new replies.

Tags