[Solved] Image in RadPictureRotatorHubTile does not automatically resize

[Manuel Henry II]

How do I set the image to automatically resize base on the size of the RadPictureRotatorHubTile ?

[Tsvetina]

Hello Manuel,

I am not sure if I completely understand your requirement. Is it to dynamically resize the RadPictureRotatorHubTile and get the contained image to resize as well to fit the new size? If so, this is currently not among the features of the control but you could suggest it in our Ideas & Feedback portal.

In case it is something different, could you please elaborate a bit more on what you need to achieve? By default, the control does resize the images to fit the tile width and height. An image demonstrating your requirement and how it is different from the default behavior would help.

All the best,
Tsvetina
the Telerik team

[Manuel Henry II]

I have RadPictureRotatorHubTile which has a dimension of 100x100 and the image that I load is around 300x300. the problem is doesn't resize the image to 100x100, what is does is show the portion of the image. is there anyway you can help me with this?

[Tsvetina]

Hi Manuel,

I tried the scenario you described but on my side the image gets automatically resized. I am sending you a sample project. Before running it, make sure you have a working reference to RadControls for Windows 8 HTML in the References section. In the sample I tried defining the hub tile both in HTML and JavaScript and it appears ok both times. The code looks like this:

<div id="pictureRotatorHubTile2" style="width: 100px; height: 100px" data-win-control="Telerik.UI.RadPictureRotatorHubTile" data-win-options="{
    picturesSource: DefaultData.foodImagePaths
}">
</div>

DefaultData.foodImagePaths contains paths to images that are all 200x200 pixels. You can see them in the /images/food folder.

Can you tell what is different on your side? What code and version of the controls should we use to reproduce the problem?

Greetings,
Tsvetina
the Telerik team

[Manuel Henry II]

I tried using my image but it doesn't work, im using a png file.

[Tsvetina]

Hello Manuel,

I replaced the jpg images with sample png ones and the result is the same. If your code is identical to ours and only the image is different, would it be possible that you send it to us along with the exact code you use for defining the hub tile control.
Also, if you already have custom CSS in your app, remove any styles targeting the img elements and try running the app again. If the issue gets fixed, make sure you make your CSS selectors more specific.

Regards,
Tsvetina
the Telerik team

[Manuel Henry II]

 I have submitted a ticket along with the attached file.

646285

[Tsvetina]

Hi,

I replied in the thread that you have opened through the support system. For others who might have the same scenario, here is the explanation and suggested solution:

The look in this scenario is expected, since the ratio between the two dimensions is about 2:1 (width is 320, height is 138 px). In such case, RadPictureRotatorHubTile takes the smaller dimension, fits it into its defined size and shows only a portion of the larger dimension, so the image does not get squeezed.

If you know the size of the hubtile in advance, the easiest way to change this is by providing the following CSS:

.t-hubPictureRotator img {
    width: 100px !important;
    left: 0 !important;
}

This will apply the provided width to all RadPictureRotatorHubTile instances in your page. If you want to apply it to a certain one only, use its id instead of class in the CSS selector, e.g.

#pictureRotatorHubTileTreats img {
    width: 100px !important;
    left: 0 !important;
}

The !important is needed in this case, as it is used to overwrite inline styles of the IMG elements.

Kind regards,
Tsvetina
the Telerik team