Article images not auto-resized

chaoym

Hi I'm migrating my http://wanlicrab.tw site (Joomla v2.5) which was built using a zt-bravi template (which used the zo2 framework I believe). I had a new Joomla 3 installed on the database backed up from the original site.

When trying to use JA Builder template I've been able to bring up all my articles and K2 items. However the images in there won't resize automatically.

What should I do to make them auto-resize? Thank you.

Yu-Ming Chao

aman204

chaoym Can you provide direct link where the relative K2 item images can be seen as I am unable to locate the same due to being unfamiliar with the language on your site whilst there are several menu items too

Also, Does the resizing option as being rendered through K2 component work fine on your site when you assign default joomla template ?

chaoym

Thank you for your prompt reply.

This is a K2 Item:
http://chaoym.net/wanlicrab/Site2018/index.php/crab-talks/captain-stories/captain-lin
(originally http://wanlicrab.tw/index.php/crab-talks/captain-stories/captain-lin)
This one is a Joomla Article:
http://chaoym.net/wanlicrab/Site2018/index.php/features/special-projects/daily-crab
(originally http://wanlicrab.tw/index.php/features/wanlicrab-topic/daily-crab)

They're both working fine in the original site. I guess it's something to do with the wrong "class"? Anyway when I try to create a new "article" under my migration site the images within won't resize as well. I really don't want to recreate all the files one by one into JA Builder pages so please help looking into this issue.

Thank you very much.

Yu-Ming

paulus1031

Hi Yu-Ming,

If you add

.jub-block img {
height: auto;
max-width: 100%;
}

Does this work for you?

You might want to check other images on different pages

Cheers
Paul

chaoym

Thank you Paul for your prompt reply.

I don't know coding so kindly could you please advise where exactly should I insert the suggested script?

Since images on every page has the same problem so I guess I'll have a lot of insertions to do if the script works!

Thank you and regards,

Yu-Ming

saguaros

Hi Yu-Ming,

Check out this blog for how to add custom css: https://www.joomlart.com/blog/joomla-templates/joomla-page-builder-illustrated-examples-of-using-custom-styles

But I look at both page of article in your current & original site but it looks quite the same, could you share screenshot highlighting the difference here?

chaoym

Hi Saguaros,

Thank you I'll read that blog and see if I can fix the problem.

Attached please find two screen shot files for your to compare. The right-hand side browser on both images are the original WORKING site and the left ones are the ones being built and having trouble with. When viewing them on a phone the differences are quite obvious.

Many thanks for your time and help.

Yu-Ming

aman204

chaoym Attached please find two screen shot files for your to compare.

As per your last screenshot, The issue apparently is seen in responsive design mode for which you can try add this to custom css :

@media screen and (min-device-width: 320px) (max-device-width: 470px){.jub-block img{max-width: 100%;
    height: auto;}}

Kindly ensure to clear your browser cache if changes dont reflect

saguaros

chaoym

Did you try with above suggestion from Paul?

Try to grant the super admin permission for the provided admin account so I can check for you.

Regards

chaoym

Hello Saguaros,

I haven't got time to work on that yet.

Would you be so kind to check it for me?

Super User you are now.

Thanks a bunch.

Yu-Ming

saguaros

chaoym

I updated this:

.jub-block.mainbody img {
    max-width: 100% !important;
}

Could you check it now?

chaoym

Hi Saguaros,

Yes the width will resize automatically now on every page. However the heights of most images won't change proportionally therefore the resized images seemed distorted.

Interestingly all images in this page resized according to ratios ~
http://chaoym.net/wanlicrab/Site2018/index.php/features/crab-restaurants
And in this page the 1st image will be distored but the 2nd image resizes nicely ~
http://chaoym.net/wanlicrab/Site2018/index.php/features/special-projects/wanlicrab-tbeer
(I've attached the screen comparison shot of the 2nd link for your reference)

Any solution to keep the ratio when resizing?

Many many thanks for your help.

Yu-Ming

aman204

chaoym Try change the specific css rule-set as per steps outlined here in the respective field :

.jub-block.mainbody img {
 max-width: 100% !important;
}

.jub-block.mainbody img {
 max-width: 100% !important;
    height: auto;
}

I am unable to make the suggested changes due to your admin details not working as of currently.

chaoym

Oh yeah! The resizes work well now!

You guys are wonderful and most helpful. Thank you so much for your help.

With best regards,

Yu-Ming

paulus1031

Thanks for letting us know

Best of luck with the website

Cheers
Paul