Level Image different sizes

Question

Hi guys,

I want to insert different level description in ACBC.
Look at my following description

1) BYO: Number
2) Rest of ACBC: Number + Image

I followed the guide there: https://legacy.sawtoothsoftware.com/forum/30275/how-can-customize-attribute-labels-after-byo-section-in-acbc?show=30275#q30275

Everything works for BYO and Screening, but the image in unacceptable is nearly 10 times size from usual. Must Haves and Calibration Section as well.
Why? And how can i solve this problem?

Many Thanks.

Comments

Lighthouse Studio can shrink images to fit certain questions, so I'm guessing what is happening is that the image is displaying at its normal size in the Calibration and similar questions, but getting compressed in the BYO and Screeners.  If it's an option for you, the simplest change would probably be to just replace the images in your study with lower-resolution versions.  If that doesn't work, we could create some CSS for the later questions to change how the images display on those pages.

---

Hey Zachary, thanks for the fast answer. This works, but picture now is bad quality.

Another idea should be to insert two different levels, I want to include a customer rating with a star scale

1) 3,8 Sterne
2) 3,8 + Image (without word "Sterne")

And afterwards just show 1 of the 2 possible levels?

---

The image doesn't look good at the size you want it displayed?  That would seem more a design matter than a programming one: either the image needs to be larger or the image needs to be generated anew to look better at the chosen size.

I'm not sure what you mean about star scales.  Do you want to change the level code to have BYO text, Screener text, and a third text for the other question types?

---

I don't know how to deal with it.
If I add height="50%"; width="50%" the image would be a bit too small in screening and choice tournament, but way too big in calibration and unacceptable...

---

I'm a bit lost on where we ended up.  The image at half of its full size looks fine?  Can we just change the size of the actual image file itself in your study's /graphics/ folder?

---

Thanks for your fast answers. I got now the perfect size which fits at every section. And BYO just shows text - fine, everything looks great!

But now I got a new problem - image and text aren't at the same alignement.
Therefore I add the following code to the attribute list where the image is inserted.

<style type="text/css">
img {
    vertical-align: middle;
}

</style>

This leads to perfect alignement between image and text - but now the BYO-Section not only show the right text, also shows img{vertical-align:middle;}

How can I hide this additional comment?

Thanks!!!

---

Does adding the CSS to the relevant ACBC questions rather than to the level text itself work?

---

It works!!! Thank you :)