[2.0] Resize an Image
Follow the steps and tips below to properly resize image components added to a bucket funnel. Images can be added to Pre-Quiz Pages, Lead Capture Pages, and Post-Quiz Pages. Note that the instruction below doesn’t apply to background images or images added in questions.
Fixed Size
In the Properties section of the selected image element, it will display the Size option that contains Width, Height, Max Width, and Min Height options. If a specific image size is required, the width and height options can be configured so that the image always has a specific size. For instance, let’s say that an image landscape-oriented is added, and the desired size is Width: 500px and Height: 300px
It is important to know that if a fixed size is applied to an image in the Desktop view, this size configuration will be carried to the Tablet and Mobile view, and might not display properly for all Mobile devices since 500px width will exceed the available space. Therefore, it is highly recommended to modify the size of the image in the Mobile view and Table view if required. Note that these changes will not be reflected back in the initial Desktop configuration for the image.
Lastly, If you do not want to configure the size of an image and let the page auto-size the image regardless of the dimensions of the device used to open the funnel, please check the Auto Size option below.
Auto Size
In the Properties section of the selected image element, it will display the Size option that contains Width, Height, Max Width, and Min height options. In order to let the system auto-size an image based on the available space, the Width and Height need to be set as Auto. Note that if the image is still too big for the page section in the Desktop view, you could use the Max-width option to fix this. For instance, the Max-width is set to 50%, meaning that the image will take 50% of the available space, and not 100%.
It is important to acknowledge that the Max-width effect applied to the image in the Desktop view will be carried to the Tablet and Mobile view, and may not be needed for those views. Therefore, if you want the image to take the available space for Tablet and Mobile, you could set the Max-width to 100% in the Table view, and this change will affect the Mobile view as well, or change it directly in the Mobile view. Note that these changes will not be reflected back in the initial Desktop configuration for the image.
Related Articles
[2.0] Adding Images to Answer Choices
This article aims to give a step-by-step on how to add images to answer choices in your funnel. Note: This is only applicable to answer choices of radio and checkbox questions. STEP # 1 From the Canvas, select the Radio or Checkbox Question where ...[2.0] Adjust Logo Size Using Properties
Follow the steps and tips below to properly resize the logo image added to a bucket.io funnel. IMPORTANT: Images can be added to Pre-Quiz Pages, Lead Capture Pages, and Post-Quiz Pages. Note that the instruction below doesn’t apply to background ...[2.0] Pre-Quiz Page Builder Components
COMPONENTS BUILDING A NEW PAGE The Pre-Quiz page is similar to the Welcome page in bucket.io 1.0, which is the first thing your audience sees when they enter the funnel link on their browser. When you start to build a new Pre-Quiz Page, you are taken ...[2.0] Lead Capture Page Builder: Components
COMPONENTS BUILDING A NEW LEAD CAPTURE PAGE The Lead Capture page is where you collect essential contact information from your participants. When you start to build a new Lead Capture page, you will be prompted to select either an empty layout or ...[2.0] Post-Quiz Page Builder: Components
COMPONENTS BUILDING A NEW PAGE The Post-Quiz page is the last page in your funnel and comes after the Lead Capture page or, if you skip the Lead Capture page, the internal Quiz Results page. To your participants, the Post-Quiz page comes after the ...