Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • sirbal Friend
    #187016

    How 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 Friend
    #490930

    Hi 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,

    Leo

    sirbal Friend
    #490948

    To 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.


    1. span-cat-item
    sumitkumar Friend
    #490956

    Hi 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 Friend
    #490958

    This is right for images’ width, but not for images height…

    phong nam Friend
    #491014

    Hi sirbal,

    I got your PM at 15.30 PM.
    I will check out how you changed your front-end and let you know my views.

    Regards,

    Leo

    phong nam Friend
    #491095

    Hi 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,

    Leo

    sirbal Friend
    #491127

    Hello 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.


    1. span-cat-item2
    phong nam Friend
    #491241

    Hi 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

    Kiên Trung Friend
    #496162

    Hi 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 Friend
    #496251

    Hi 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>

    Kiên Trung Friend
    #496276

    Hi 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 Friend
    #496283

    Hi 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. 3
    Kiên Trung Friend
    #496349

    Hi Leo,

    Yes, i want to crop imange to ratio 1:1, pls
    Kien

    phong nam Friend
    #496439

    Hi 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.

Viewing 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, 4 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum