Image Resize

[Denissa]

http://prntscr.com/jyyveo

http://prntscr.com/jyyvpm

Hi is there a way to prevent course cards and blog post images being stretched?

[Alex]

This reply has been marked as private.

[Denissa]

This reply has been marked as private.

[Alex]

1. for this : please try adding this given code in your wplms-customizer.php file in wplms customizer plugin :

https://gist.github.com/alexvibealex/4f4adffbddeb615e87d3962eeadb9031

 

2. for this :

please add this css in your src/pages/post/post.scss file :

page-post img{width:100% !important;max-width:auto !important;height:auto;}

[Denissa]

This reply has been marked as private.

[Alex]

1. for this : please remnove the previously given code and  try adding this given code in your wplms-customizer.php file in wplms customizer plugin :

https://gist.github.com/alexvibealex/4f4adffbddeb615e87d3962eeadb9031

 

2. for this :

please add this css in your src/pages/post/post.scss file :

page-post img{width:100% !important;max-width:auto !important;height:auto;}

[Denissa]

First one still doesn’t work it makes the picture go into high quality only

[Alex]

try adding this css in your src/pages/course/course.scss file :

 

page-course #featured > img{

    height:auto;

    min-height:auto;

}

[Denissa]

http://prntscr.com/k7some

It works just as I wanted, but in the course page only, can I apply the same code for home and directory section? Refer

http://prntscr.com/k7sos6

http://prntscr.com/k7sp5a

 

2) http://prntscr.com/k2qxkh

Problem still persist with the profile image, blog post works fine tho

[Alex]

for post image issue im sorry please remove this css :

page-post img{width:100% !important;max-width:auto !important;height:auto;}

and add this css in src/pages/post/post.scss file :

page-post div img:not([lazy-load]){width:100% !important;max-width:auto !important;height:auto;}

 

[Alex]

for course directory page im sorry we cannot fix that .This is the best optimization we could do for the image to fit there in that width .

If we make the image appear in original proportion which is rectangle it will appears like this : http://prntscr.com/k7vihp

ARe you ok with it ?

[Denissa]

Yes, we’ll take it.

How about the homepage?

[Alex]

Try adding this css in your src/theme/variable.scss :

 

page-directory courseblock .course_block .course_featured_image{

    background-size:contain !important;

    background-repeat:no-repeat;

}

 

page-home #featured img{

    height:auto !important;

    width:100%;

    min-height:initial;

}

[Author]

Posts