-
AuthorPosts
-
sirbal Friend
sirbal
- Join date:
- February 2006
- Posts:
- 31
- Downloads:
- 2
- Uploads:
- 15
- Thanks:
- 18
- Thanked:
- 3 times in 1 posts
April 23, 2013 at 9:53 am #187016How to change the default images height in articles view and category view (Ja Fubix template)?
For example, in single page (K2 item) the height of the image is 300 px.
I changes SPAN.itemImage height into 450px and it works fine… until you try to see it in iPad portrait or iPhone. In that case there is blank space between image and text below. The same goes for SPAN.catItemImage in category blog view.My another question – what is the best way to work with images in Fubix? I have several hundred photos which I can resize to width 812px or to height 812px. The photos have usual aspect ration 4:3. If I do not use K2 for width resizing – images with width 812px will have different height in category blog page. And surely I cannot create several hundred images with exact 812×812 size.
Will be grateful for your help.phong nam Friendphong nam
- Join date:
- May 2015
- Posts:
- 3779
- Downloads:
- 1
- Uploads:
- 587
- Thanks:
- 499
- Thanked:
- 974 times in 888 posts
April 24, 2013 at 11:29 am #490930Hi sirbal,
It seems that you applied your changed css with height: 450px in span.itemImage:
span.itemImage {
display: block;
height: 450px; /*Your height*/
overflow: hidden;
-webkit-transform: translateZ(0);
}
in <blockquote>templates/ja_fubix/css/k2.css</blockquote>
SO, I’ll guide you to change this based on your image height.1. How to change the default images height in articles view and category view (Ja Fubix template)?
– Single K2 item
Open <blockquote>templatesja_fubixhtmlcom_k2ja_fubixitem.php</blockquote>, then find & replace (line 45th):
<img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption);templatesja_fubixhtmlcom_k2ja_fubix else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />
with
<img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:450px;" />– Category view
Open <blockquote>templatesja_fubixcssk2.css</blockquote>, then replace:
span.catItemImage {
display: block;
overflow: hidden;
height: 180px;
}
with
span.catItemImage {
display: block;
overflow: hidden;
height: 450px;
}Then You need to open <blockquote>templatesja_fubixhtmlcom_k2ja_fubixcategory_item.php</blockquote>, find & replace (line 34th):
<img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />
with
<img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:450;" />
2. My another question – what is the best way to work with images in Fubix?
Because our JA Fubix template integrates the K2 overrides layout in templates/ja_fubix/html/com_k2, you need to use K2 resizing feature to get your website layout like our demo. It’s the most effective method to work with images on JA Fubix.Regards,
—
Leo1 user says Thank You to phong nam for this useful post
sirbal Friendsirbal
- Join date:
- February 2006
- Posts:
- 31
- Downloads:
- 2
- Uploads:
- 15
- Thanks:
- 18
- Thanked:
- 3 times in 1 posts
April 24, 2013 at 3:03 pm #490948To illustrate what I mean:
(K2 layout, quickstart template)
Usual aspect ratio works good for article page and leadings, but for smaller images there appears a gap between image and category name.
sumitkumar Friendsumitkumar
- Join date:
- April 2013
- Posts:
- 2
- Downloads:
- 0
- Uploads:
- 0
- Thanked:
- 1 times in 2 posts
April 24, 2013 at 7:05 pm #490956Hi Sirbal
You can fix your all image size. You have to open k2 component. Then you will see right of the top corner ‘parameters icon’ . When you click on parameters icon you will see image. where from you can set image size.
Thanks
sirbal Friendsirbal
- Join date:
- February 2006
- Posts:
- 31
- Downloads:
- 2
- Uploads:
- 15
- Thanks:
- 18
- Thanked:
- 3 times in 1 posts
April 24, 2013 at 7:39 pm #490958This is right for images’ width, but not for images height…
phong nam Friendphong nam
- Join date:
- May 2015
- Posts:
- 3779
- Downloads:
- 1
- Uploads:
- 587
- Thanks:
- 499
- Thanked:
- 974 times in 888 posts
phong nam Friendphong nam
- Join date:
- May 2015
- Posts:
- 3779
- Downloads:
- 1
- Uploads:
- 587
- Thanks:
- 499
- Thanked:
- 974 times in 888 posts
April 26, 2013 at 4:00 am #491095Hi sirbal,
I applied my guides above on your category view (K2 categories menu item) & single item view of K2.
I set 450px to height of K2 item image in Item view & 300 px to height of K2 category image.Forward to your second concern, can you set all files of templates/ja_fubix/html/mod_jasidenews with UTF-8 format.
* Don’t forget to inform your result.Regards,
—
Leo1 user says Thank You to phong nam for this useful post
sirbal Friendsirbal
- Join date:
- February 2006
- Posts:
- 31
- Downloads:
- 2
- Uploads:
- 15
- Thanks:
- 18
- Thanked:
- 3 times in 1 posts
April 26, 2013 at 8:59 am #491127Hello Leo,
Seems this is not a solution.
The aspect ration is broken (on iPad even in article page).
As for the files of templates/ja_fubix/html/mod_jasidenews – there is only 1 file, default.php, it is in UTF-8 already.
phong nam Friendphong nam
- Join date:
- May 2015
- Posts:
- 3779
- Downloads:
- 1
- Uploads:
- 587
- Thanks:
- 499
- Thanked:
- 974 times in 888 posts
April 28, 2013 at 2:08 pm #491241Hi sirbal,
Yes. I forgot to notice you about the category view ‘s appearance of image after changing height, especially on tablet view. It won’t look nice as our demo, the image seems to be fasten. If you still want to keep height changes, I suggest you to fit the width of image for better appearance.
On second concern, there are some special characters appear on the JA Sidenews module front-end. So, pls follow below tutorial to remove special character: http://stackoverflow.com/questions/7128856/strip-out-html-and-special-characters
* Don’t forget to inform me your result. I don’t have writable permission in jafubix/html/ folder on your server, so I couldn’t check the result.Leo
1 user says Thank You to phong nam for this useful post
Kiên Trung FriendKiên Trung
- Join date:
- September 2014
- Posts:
- 67
- Downloads:
- 0
- Uploads:
- 31
- Thanks:
- 28
- Thanked:
- 3 times in 1 posts
June 18, 2013 at 12:31 pm #496162Hi Leo,
My problem the same sirbal, i want crop image on K2, can or not. If using joomla this is greate, but On K2 i don’t know how ::eek:
Kelvin
phong nam Friendphong nam
- Join date:
- May 2015
- Posts:
- 3779
- Downloads:
- 1
- Uploads:
- 587
- Thanks:
- 499
- Thanked:
- 974 times in 888 posts
June 19, 2013 at 8:04 am #496251Hi 1002,
Pls try to create custom.css in templates/ja_fubix/css/& put below codes into:
.groupLeading span.catItemImage {
height: auto !important;
-webkit-transform: translateZ(0);
}Make sure that you called new file by adding this line into templates/ja_fubix/etc/assets.xml:
<file>css/custom.css</file>
1 user says Thank You to phong nam for this useful post
Kiên Trung FriendKiên Trung
- Join date:
- September 2014
- Posts:
- 67
- Downloads:
- 0
- Uploads:
- 31
- Thanks:
- 28
- Thanked:
- 3 times in 1 posts
June 19, 2013 at 2:36 pm #496276Hi Leo,
What is it mean ?I want crop image for thumbnail on home site, change to ratio image 1:1 (because origin ratio 3:4)
phong nam Friendphong nam
- Join date:
- May 2015
- Posts:
- 3779
- Downloads:
- 1
- Uploads:
- 587
- Thanks:
- 499
- Thanked:
- 974 times in 888 posts
June 19, 2013 at 3:20 pm #496283Hi 1002,
<blockquote>What is it mean ?</blockquote>
That codes will make the heading images on K2 categories view appear with ratio 1:1.Anyways, Can you make a snapshot of which module/section you want to crop thumbnail image to ratio 1:1 ?
Then I will suggest you better then.-
1 user says Thank You to phong nam for this useful post
Kiên Trung FriendKiên Trung
- Join date:
- September 2014
- Posts:
- 67
- Downloads:
- 0
- Uploads:
- 31
- Thanks:
- 28
- Thanked:
- 3 times in 1 posts
June 20, 2013 at 7:52 am #496349Hi Leo,
Yes, i want to crop imange to ratio 1:1, pls
Kienphong nam Friendphong nam
- Join date:
- May 2015
- Posts:
- 3779
- Downloads:
- 1
- Uploads:
- 587
- Thanks:
- 499
- Thanked:
- 974 times in 888 posts
June 21, 2013 at 2:47 am #496439Hi 1002,
Pls try to apply my guides above. I will suggest you more accurate css styles when you put the url of your website here.
* Remember to set No to Development Mode & No to Optimize CSS in Template Manager. It will help me to locate the css files easily.
AuthorPostsViewing 15 posts - 1 through 15 (of 15 total)This topic contains 15 replies, has 4 voices, and was last updated by phong nam 11 years, 5 months ago.
We moved to new unified forum. Please post all new support queries in our New Forum
Jump to forum