image formatting

Ensure you are not changing the dimensions while uploading the image to library or while inserting it into the question.

Hi ​@PRIYABHARDWAJ ,

You might wish to consider uploading all images with a similar dimension or restrict the size of the images to a certain dimension height and width so that the display window is more consistent.

for example, 

<figure style="max-width: 100%; max-height: 100%;">
  <img 
    src="Qualtrics library link for image" 
    alt="Descriptive text of the image if required" 
    style="max-width: 100%; max-height: 100%; object-fit: contain;" 
    width="460" 
    height="460"
  >
  <figcaption style="text-align: center; font-size: 14px; color: #555;">
    Your caption goes here
  </figcaption>
</figure>

​@Chee Heng_SZ , yes, all the images are set for the same dimensions. But I am still facing the issue of displaying the image caption text in the next piped question that displays only the selected items. 

Hi ​@PRIYABHARDWAJ ,

Can you check if your first question’s image is set up correctly?

If you copy paste on the choice without entering the source code, Qualtrics might sometimes interpret wrongly and cause the structure to change.

I select choice 1, select rich content editor, select source code icon, then paste the code.

Giving something like this:

Linking to your other question:

the image may be “push” to be smaller, or a horizontal scroll bar may appear due to the limited width but the caption is still below the image.

​@jbk  yes I kept the image dimensions the same

​@Chee Heng_SZ where do I paste the source code?- 

​@Chee Heng_SZ where do I paste the source code?- 

 

click on the arrow on the right of each choice, select rich content editor and follow the rest which i mentioned in my previous post.

Hi ​@PRIYABHARDWAJ ,

 

Can you check if your first question’s image is set up correctly?

If you copy paste on the choice without entering the source code, Qualtrics might sometimes interpret wrongly and cause the structure to change.

 

I select choice 1, select rich content editor, select source code icon, then paste the code.

Giving something like this:

Linking to your other question:

the image may be “push” to be smaller, or a horizontal scroll bar may appear due to the limited width but the caption is still below the image.

 

​@Chee Heng_SZ as I open rich content editor, this is what I see-

 should I paste the source code there and remove everything else that we can see in the screenshot currently?

​@PRIYABHARDWAJ, 

There are no screenshots in your last post and I wouldn’t be able to tell if anything inside is required for other purpose of your survey.

Please refer to the information below for reference:

1) Accessing Rich Content Editor for choice

2) Source Code

​@Chee Heng_SZ pleases see now, thanks I will follow the hyperlink that you have shared-

​@Chee Heng_SZ pleases see now, thanks I will follow the hyperlink that you have shared-

 

 

you can copy the src and caption of this image and replace them inside the code.

For example,

<figure style="max-width: 100%; max-height: 100%;">
  <img 
/* Replace Qualtrics library link for image with your image link*/
    src="Qualtrics library link for image" 
    alt="Descriptive text of the image if required" 
    style="max-width: 100%; max-height: 100%; object-fit: contain;" 
    width="460" 
    height="460"
  >
  <figcaption style="text-align: center; font-size: 14px; color: #555;">
/* Replace text below for your caption*/
    Coles peanuts...
  </figcaption>
</figure>