Hey there!

For my study I need to present images on a screen. Unfortunately, I don't know the exact size. The picture I want to present also have different sizes. Some of them have a vertical format, others a horizontal. I want to present them in the following way: All pictures should have the same hight (80 % of screen hight), the picture ratio should stay the same. So the picture shouldn't be cut. Furthermore, the picture should be presented in the middle of the screen.

I tried already tried it with the following code:
<picture japanese>
/items = japanese
/select = noreplace
/position = (50%, 50%)
/height = 80%
/select = noreplace
</picture>

but that doesn't really work...
Has anybody an idea?

Best,

Julia

Hey there,
just an additional question: Is it possible, to set the width only for horizontal pictures to 80% and make here the height flexible. For vertical pictures the height should than be 80% and the width flexible. I just don't have a clue how to do that...

The only thing you can do is encode the height you need for each individual image item in a <list> and then set the <picture> element to that width dynamically. I.e.

<block myblock>
/ trials = [1-2 = mytrial]
</block>

<trial mytrial>
/ ontrialbegin = [picture.mypicture.width = list.widths.nextvalue;]
/ stimulusframes = [1=mypicture]
/ validresponse = (57)
</trial>

<picture mypicture>
/ items = myitems
/ height = 80%
/ width = 0%
/ position = (50%, 50%)
</picture>

<list widths>
/ items = (80%, 40%)
/ selectionmode = picture.mypicture.nextindex
</list>

<item myitems>
/ 1 = "01.jpg"
/ 2 = "02.jpg"
</item>

Hey Dave, thanks a lot for your answer. I think, I don't really get what you are doing in your code.
Especially this peace of code: 
/ items = (80%, 40%)
What are you doing here and where are the 40% from?
How does Inquisit know which picture is vertical, which horizontal and when to set the hight to 80% (for vertical pictures) and when to set the width to 80% (for horizontal pictures).

Thanks for your help!!!!!

Julia

<list widths>
/ items = (80%, 40%)
/ selectionmode = picture.mypicture.nextindex
</list>

The <list> is tied to the <picture> element. The 1st item in the list -- 80% -- indicates the width for the 1st item in the <picture> element, 01.jpg. The 2nd item in the <list> indicates the width for the <picture> element's 2nd item -- 02.jpg. In essence, this is the same as https://www.millisecond.com/support/docs/v4/html/howto/howtopairs.htm

Great, thanks, I think I have got it. :)
But then the height of both pictures is 80%, isn't it? I only want it to be 80% for vertical images. 

Maybe I will try it differently: I want to fix only the longest dimension 
of every painting at a standard size (say 1000 pixels), the other dimension should be set to default (so that the proportions of the image don't change)...

Thanks and sorry for asking so much!

Best regards

Julia

If it helps, here is my code :)

**************************************************************************************************************
**************************************************************************************************************
Stimulus Items

**************************************************************************************************************
**************************************************************************************************************

<item resonant_masterpieces>
/1 = "Campbell_soup_can.jpg"
/2 = "Der_Wanderer_über_dem_Nebelmeer.jpg"
/3 = "Fünfzehn_Sonnenblumen.jpg"
/4 = "The_Birth_of_Venus.jpg"
/5 = "The_creation_of_Adam.jpg"
/6 = "The_Kiss.jpg"
/7 = "The_Persistence_of_Memory.jpg"
/8 = "The_Scream.jpg"
/9 = "The_starry_night.jpg"
/10 = "The_Water_Lily_Pond.jpg"
</item>

<item nonresonant_masterpieces>
/1 = "Armored_Train.jpg"
/2 = "Bacchus_and_Ariadne.jpg"
/3 = "Ballet_Rehearsal.jpg"
/4 = "Bonjour_Monsieur_Courbet.jpg"
/5 = "Boulevard_des_Italiens_Morning_Sunlight.jpg"
/6 = "Boy_Bitten_by_a_Lizard.jpg"
/7 = "Chalk_Cliffs_on_Rügen.jpg"
/8 = "Cornelia_Presenting_Her_Children_as_Her_Treasure.jpg"
/9 = "Cut_with_the_Kitchen_Knife.jpg"
/10 = "Dido_building_Carthage.jpg"
/11 = "Interieur_au_violon.jpg"
/12 = "La_Montagne_Saint_Victoire_Barnes.jpg"
/13 = "Laokoon.jpg"
/14 = "Les_Glaneuses.jpg"
/15 = "Les_Majas_at_the_balcony.jpg"
/16 = "Oath_of_the_Horatii.jpg"
/17 = "pier-and-ocean.jpg"
/18 = "Quince_Cabbage_Melon_and_Cucumber.jpg"
/19 = "Raft_of_the_Medusa.jpg"
/20 = "Raphael_Galatea.jpg"
/21 = "Self-Portrait_with_Vanitas_Symbols.jpg"
/22 = "Suprematist_Composition.jpg"
/23 = "Swing-Renoir.jpeg"
/24 = "The_Annunciation.jpg"
/25 = "The_Banquet_of_Cleopatra.jpg"
/26 = "The_Coronation_of_Napoleon.jpeg"
/27 = "The_Daughters_of_Edward_Darley_Boit.jpg"
/28 = "The_Embarakation_for_Cythera.jpg"
/29 = "The_Hay_Wain.jpg"
/30 = "The_Thankful_Poor.jpg"
/31 = "The_Third_Class_Carriage.jpg"
/32 = "The_Valpincon_Bather.jpg"
/33 = "Three_Philosophers.jpg"
/34 = "View_from_Mount_Holyoke.jpg"
/35 = "Vision_after_the_Sermon.jpg"
</item>

<item japanese>
/1 = "8_Famous_Sights_of_Xiao_&_Xiang_Rivers.jpg"
/2 = "Actor_Ichikawa_Danjuro.jpg"
/3 = "Autumn_and_Winter_Landscapes.jpg"
/4 = "Cypress_Trees.jpg"
/5 = "Eight_Famous_Sights_of_Omi.jpg"
/6 = "Hawk_on_a_pine_tree.jpg"
/7 = "Maiko.jpg"
/8 = "Merrymaking_Under_the_Cherry_Blossoms_-_Google_Art_Project.jpg"
/9 = "Morning_view_of_the_Uji_River.jpg"
/10 = "Narrow_ivy_road.jpg"
/11 = "Popular_Geisha_at_the_Pleasure_Quarters.jpg"
/12 = "Portrait_of_Ashikaga_Yoshimasa.jpg"
/13 = "Spring_Ridge.jpg"
/14 = "Sundial_of_Young_Women.jpg"
/15 = "Yoroboshi.jpg"
/16 = "Zhou_Maoshu_Appreciating_Lotuses.jpg"
</item>

<text fixationCross>
/ items = ("+")
/ fontstyle = ("Arial", 300px)
/ color = (0, 0, 0)
</text>

<picture resMas>
/items = resonant_masterpieces
/select = noreplace
/position = (50%, 50%)
/size = (90%, 90%)
/select = noreplace
</picture>

<picture nonresMas>
/items = nonresonant_masterpieces
/select = noreplace
/position = (50%, 50%)
/size = (90%, 90%)
/select = noreplace
</picture>

<picture japanese>
/items = japanese
/select = noreplace
/position = (50%, 50%)
/size = (90%, 90%)
/select = noreplace
</picture>

<radiobuttons ratingquestionLiking>
/ caption="Wie gefällt Ihnen das Kunstwerk?"
/ options=("Sehr gut", "Gut", "Durchschnittlich", "Weniger", "Gar nicht")
/ optionvalues = ("1", "2", "3", "4", "5")
/ required=true
</radiobuttons>

<radiobuttons ratingquestionUnderstanding>
/ caption="Wie gut verstehen Sie das Kunstwerk?"
/ options=("Sehr gut", "Gut", "Durchschnittlich", "Weniger", "Gar nicht")
/ optionvalues = ("1", "2", "3", "4", "5")
/ required=true
</radiobuttons>

<radiobuttons ratingquestionWTP>
/ caption="Wie groß ist Ihre Bereitschaft Geld dafür zu zahlen, dieses Kunstwerk im Museum zu sehen?"
/ options=("Sehr hoch", "Hoch", "Durschnittlich hoch", "Weniger hoch", "Gar nicht hoch")
/ optionvalues = ("1", "2", "3", "4", "5")
/ required=true
</radiobuttons>

<radiobuttons questionPaintingFamilarity>
/ caption="Wie stark sind Sie mit dem Kunstwerk vertraut?"
/ options=("Sehr hoch", "Hoch", "Durschnittlich hoch", "Weniger hoch", "Gar nicht hoch")
/ optionvalues = ("1", "2", "3", "4", "5")
/ required=true
</radiobuttons>


**************************************************************************************************************
**************************************************************************************************************
TRIALS
**************************************************************************************************************
**************************************************************************************************************

<trial resMas>
/ stimulustimes = [0=fixationCross; 2000=resMas]
/branch = [surveypage.ratingPage]
/timeout = 10000
/ pretrialpause=3000
</trial>

<trial nonresMas>
/ stimulustimes = [0=fixationCross; 2000=nonresMas]
/branch = [surveypage.ratingPage]
/timeout = 10000
/ pretrialpause=3000
</trial>

<trial japanese>
/ stimulustimes=[0=fixationCross; 2000=japanese]
/branch = [surveypage.ratingPage]
/timeout = 10000
/ pretrialpause=3000
</trial>

<surveypage ratingPage>
/caption = "Please answer the following items to the best of your ability"
/ fontstyle = ("Verdana", -12, true, false, false, false, 5, 0)
/questions=[1=ratingquestionLiking; 2=ratingquestionUnderstanding; 3=ratingquestionWTP; 4=questionPaintingFamilarity]
/finishlabel="Weiter"
/caption = "Bitte beantworten Sie folgende Fragen über das zuletzt gezeigte Bild:"
</surveypage>

<block EXP>
/trials = [1-61 = noreplace(resMas, resMas, resMas, resMas, resMas, resMas, resMas, resMas, resMas, resMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, nonresMas, japanese, japanese, japanese, japanese, japanese, japanese, japanese, japanese, japanese, japanese, japanese, japanese, japanese, japanese, japanese, japanese)]
</block>

<expt>
/blocks = [1 = EXP]
</expt>

If you want the width to be fixed, but the height to vary, that works in the same way.

Ah, so I will create another list element, so that I have in sum two list elements: on for the width and one for the height. 

I just have problems to understand this pice of code:

<picture mypicture>
/ items = myitems
/ height = 80%
/ width = 0%
/ position = (50%, 50%)
</picture>

<list widths>
/ items = (80%, 40%)
/ selectionmode = picture.mypicture.nextindex
</list>

For the first item ("01.jpg"; so the horizontal image) the height is set to 80% and the width also to 80%. But that shouldn't be so: The width should be set to 80% and the hight should be allowed to vary... For the second item ("02.jpg"; so the horizontal image) the height is set to 80% and the width to 40%. That also shouldn't be so: The hight should be set to 80% and the width should be allowed to vary and shouldn't be fixed to 40%...

Is there a possibility to do that?

Best Julia

Thanks for your code!
I think your code only works because your image 1 is a square, but in my case image 1 looks like "The Annuciation.jpg" and image 2 like "Eight_Famous_Sights_of_Omi.jpg". In your case image 1 is a square, so a hight of 40% and a width of 40% works...

Sorry, the second image cant be loaded, here is the link: https://upload.wikimedia.org/wikipedia/commons/2/2c/Eight_Famous_Sights_of_Omi_by_Imamura_Shiko_%28Tokyo_National_Museum%29.jpg

You should adjust the values in the list such that they suit *your* images.

I'm sorry for being so silly but that still doesn't make sense to me. Let's take this code:

<block myblock>
/ trials = [1-2 = mytrial]
</block>
<trial mytrial>
/ ontrialbegin = [picture.mypicture.width = list.widths.nextvalue;]
/ stimulusframes = [1=mypicture]
/ validresponse = (57)
</trial>
<picture mypicture>
/ items = myitems
/ height = 80%
/ width = 0%
/ position = (50%, 50%)
</picture>
<list widths>
/ items = (80%, 40%)
/ selectionmode = picture.mypicture.nextindex
</list>
<item myitems>
/ 1 = "01.jpg"
/ 2 = "02.jpg"
</item>
---------------------------------------------------------------------------------
For both items the hight is 80% of the screen right? And only the widths varies (80% for the first picture and 40% for the second picture)?

> For both items the hight is 80% of the screen right? And only the widths varies (80% for the first picture and 40% for the second picture)?

Yes. The height of the <picture> element is set to 80% here


<picture mypicture>
/ items = myitems
/ height = 80%
/ width = 0%
/ position = (50%, 50%)
</picture>

and nowhere is it changed. The width is set on a trial-by-trial basis here

<trial mytrial>
/ ontrialbegin = [picture.mypicture.width = list.widths.nextvalue;]
/ stimulusframes = [1=mypicture]
/ validresponse = (57)
</trial>

and it is sampled from the <list> element. Which value, i.e. width, the list returns depends on the picture item the trial will display.

Do keep in mind one thing: Inquisit will not, under any circumstances, distort the original image's dimensions. They will remain intact, i.e. Inquisit will not "stretch" an image just because you set an excessive width or height. I.e. suppose you have an image that is 400 pixels wide, and 300 pixels high, then -- not matter what you do, the 4:3 width/height ratio will always be preserved, even if you set the <picture> element's dimensions to something absurd like width = 5% & height = 90%.