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
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 ?
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
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
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
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?
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
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
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
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.
Any solution to keep the ratio when resizing?
Many many thanks for your help.
Yu-Ming
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;
}to
.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.
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
Thanks for letting us know
Best of luck with the website
Cheers
Paul