[JulieBDBParticipant]

Hi,

Is there any tutorial i can watch to understand how images can be resized through cornerstone?
I added ‘advanced controls’ as mentioned on previous threads in the forum but I don’t get how it works.

Many thanks in advance,

Kind regards,
Julie

[NicoModerator]

Hi There,

Thanks for writing in.

After enabling the advance controls, you can adjust the inline style of the image so that you could adjust the image. Another way is to add a class for the image so that you could adjust the image using class in your customizer custom CSS.

Hope it helps. Let us know how it goes.

Thanks.

[JulieBDBParticipant]

This reply has been marked as private.

[FriechModerator]

Hi Julie,

After you assign a Class for your image.

You need to define that class under Custom > CSS in the Customizer.

.myclass {
	width: 150px;
	height: 150px;
}

If you have multiple images to resize better to use Class. If it is only specific image the inline Style will do.

On Style you dont need the class name, just put the CSS properties directly separated by semi-colon.

Please provide us the site URL, if you need a tailored CSS to your issue.

Hope this shed some lights, Cheers!

[JulieBDBParticipant]

This reply has been marked as private.

[LelyModerator]

Hello Julie,

Perhaps you forgot to give your site URL.
Please also add the following CSS to adjust image size on mobile:

@media (max-width: 480px){
.myclass {
	width: 75px;
	height: 75px;
}
}

By default on large screen, your image will get the following CSS:

.myclass {
	width: 75px;
	height: 75px;
}

Then when it reach mobile view, it will use the additional custom CSS above.

Hope this helps.

[JulieBDBParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for getting back to us!

Please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media (max-width: 480px){
  .myclass {
    width: 75px;
   height: 75px;
  }
}

And please make sure that you have added a custom myclass in your image.
Hope this helps. Please let us know how it goes.

[JulieBDBParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi Julie,

Sorry, instead of setting the height, please only set the width of the image. The height will automatically adjust base on the width. That way your image will remain in proportion.

For the first image, I have added min-width:320px; in the style field.

Kindly replace your css code in custom css with this.

@media (max-width: 480px){
  .myclass {
    width: 75px !important; 
  }
}

Hope that helps.

[JulieBDBParticipant]

That’s perfect! thank you for your help 🙂

Cheers,
Julie

[NicoModerator]

You’re most welcome.

Feel free to ask us again! 🙂

Have a great day! 🙂

[JulieBDBParticipant]

Hi,

Sorry it’s not working because I use a 200px x 408px pic so the image fits but the quality is too poor for my mobile app screenshots (see the first image).
What size of pictures should I use the quality is good enough and I still you the code you gave me earlier?

Kind regards,

Julie

[John EzraMember]

Hi Julie,

Thanks for updating the thread. Regarding image sizes and how they are viewed on different devices would generally depend on the screen resolution and browser settings of the device. If the device is a high-resolution device then images that are not in high res will not look good even though the look fine on other devices. You can try doubling your size and see if that works for you.

To keep your file sizes smaller even though you will be using higher res, we suggest optimizing your images with either plugins or via an image editor before upload.

You can try using this online tool to optimize your images. https://kraken.io/web-interface

Hope this helps – thanks!

[JulieBDBParticipant]

Could you please have a look again because it’s not working with the settings you asked me to enter? The first image is still too big.

Kind regards,
Julie

[Author]

Posts