Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • lightstylenz Friend
    #178159

    Hello guys,

    I can’t obtain this layout for K2 item’s main image (title, user, category and etc on top, picture on left, text wrapped around the image).


    http://www.joomlart.com/demo/#templates.joomlart.com/ja_portfolio

    Need it to happen for both Item view in Category blog http://www.lightstyle.co.nz/sites/brooklyn/index.php/classroom-blogs/years-0-1 and Item View http://www.lightstyle.co.nz/sites/brooklyn/index.php/classroom-blogs/years-0-1/item/7-create-stop-motion-photos

    In this post http://www.joomlart.com/forums/topic/k2-item-image/ Francesco says “If I add image in K2 item’s image tab I get a different layout (image on top, text below image)”which is my case as well but he also says “I can obtain demo layout only if I add a WYSISWYG image manually in article description…” Wich I would like to be able to do as well and tried here http://www.lightstyle.co.nz/sites/brooklyn/index.php/classroom-blogs/years-0-1/item/9-beautiful-black-and-white-photo but in the case of JA LENS its not displaying the WYSISWYG image in the category view.

    So basically I need 2 fixes;

    K2 item’s image tab being wrapped by the article text
    hability to display the image inserted via WYSISWYG in the article itself on the Category View

    Thanks,
    Andre

    HeR0 Friend
    #457563

    Hi Lightstylenz
    Please go to backend => components => k2 => click to parameters button
    In popup, click tab “Content” then find “Introtext HTML cleanup” and set it is “No”.

    Regards,

    lightstylenz Friend
    #458112

    Hero,

    Thanks for the tip but I didn`t work. I imagine that was supposed to solve fix 2; “hability to display the image inserted via WYSISWYG in the article itself on the Category View” right?

    Introtext HTML cleanup was already marked as NO. I even tried adding “img” to the “Enter which HTML tags not to strip in introtext” flied but still no good.

    JA LENS has a k2.css file inside templates/ja_lens/css so i imagine there are mods there that would overwrite K2 parameters…Any thoughts?

    Thanks,
    Andre

    HeR0 Friend
    #458126

    Hi Lightstylenz
    JA Lens have override layout com_k2: ja_lenshtmlcom_k2

    hability to display the image inserted via WYSISWYG in the article itself on the Category View
    => In category view which is overridden by template is compatible with design concept of JA Lens. So if you want to change this layout, please edit at ja_lenshtmlcom_k2ja_lens(ja_lens_blog)category_item.php

    Note: because category view have some layouts so if you can provide url or screenshots then i can help you best 🙂

    Regards,

    lightstylenz Friend
    #458677

    Hero,

    I have been reflecting on the issue and what I would like to do for good;

    1 – keep template files and design untouched when the user uploads the image via K2 Image tab

    2 – modify template files as to display the image inserted via WYSISWYG in the article itself on the Category View

    If the contributor has a great image he/she will be instructed to use K2 Image tab. If it is a standard everyday article/image he/she will instructed to post a smaller image on the article body via editor. Clear enough?

    The links bellow show that case 1 is sorted but I need to know what to modify in order to display article images in Category View.

    http://www.lightstyle.co.nz/sites/brooklyn/index.php/classroom-blogs/years-0-1/item/9-beautiful-black-and-white-photo

    http://www.lightstyle.co.nz/sites/brooklyn/index.php/classroom-blogs/years-0-1

    Thanks,
    Andre

    HeR0 Friend
    #458698

    Hi LIghtstylenz,

    In case of showing the images: it is the setting in k2 categories param and global setting of K2 components ( K2 option )
    You should review all the settings of K2 article params, K2 category params and K2 global setting

    Regards,

    lightstylenz Friend
    #458871

    Hero,

    On your first reply (06-15-2012 09:44 AM) you told me to check the global parameters and I said that “Introtext HTML cleanup” was already set to “No”. That seems to be the only K2 settings that define if an image inserted via editor will be striped or not.

    Settings from the “Item view options in category listings” and the others located at the right hand side of K2 “Edit Category” page for example, only affect the image uploaded via the Image tab.

    I still believe that some sort of template override is stopping the article image to be displayed (wrapped by the text) on the category view. This topic started 12 days ago, time is ticking and even though you are trying to be helpful not much is happening so I wonder if I should escalate this issue to a support ticket?

    Thanks,
    Andre

    lightstylenz Friend
    #458896

    Hi Hero,

    I believe I need to take a step back regarding what I`m looking for.

    This issue should be pretty simple. If you look at K2 magazine layout you`ll notice that the component works as I`d like and as it should; http://demo.getk2.org/categories/itemlist/category/6-entertainment

    The problem is that JA Lens k2.css override is not allowing me to define the “Layout Grid”, neither is allowing K2 to display items in the category view as you can see in the link above therefore I need JA Lens ks.css override to be a little less intrusive and let the images from the image tab interact with the content and respond to settings defined by K2 categories or Items…

    lightstylenz Friend
    #458918

    Hero,

    Got pretty close to it but hit the wall big time. I have modified 2 php files by moving the image from the top/above the tittle to the top of the article text. I have also removed <div class=”clr”></div> from both as to allow image wrapping;

    templates/ja_lens/html/com_k2/ja_lens_blog/category_item.php
    templates/ja_lens/html/com_k2/ja_lens_blog/item.php

    And so far I have also modified templates/ja_lens/css//k2.css where I replaced
    display: block;
    to
    float:left;

    Now images inserted via K2 image tab are wraped by text both in category and item view and the image sizes defined in K2 actually work.

    To get it perfect all I need is to finetune the css file as to have the margins nice and tiddy but I cannot workout what code I must insert and/or replace. I have been playing with the code around lines 422 and 430 but no luck so far. Can you guys give me a hand on that please?

    Here`s how it looks so far;

    Category View – http://www.lightstyle.co.nz/sites/brooklyn/index.php/classroom-blogs/years-0-1

    Item View – http://www.lightstyle.co.nz/sites/brooklyn/index.php/classroom-blogs/years-0-1/item/9-beautiful-black-and-white-photo

    And images attached give an idea of what I need to finetune. Basic image/text margins and alignments.

    Thanks,
    Andre


    1. jalens_catview
    2. jalens_itemview
    HeR0 Friend
    #458967

    Hi
    In templates/ja_lens/css//k2.css you should add to end of file this code below:

    #k2Container .itemImageBlock img{
    margin: 5px 10px 10px 20px;
    }

    And find

    div.catItemImageBlock a, div.userItemImageBlock a, div.tagItemImageBlock a, div.itemImageBlock a {
    float: left;
    }
    then replace to
    div.catItemImageBlock a, div.userItemImageBlock a, div.tagItemImageBlock a, div.itemImageBlock a {
    float: left;
    padding: 5px 10px 10px 20px;
    }

    Rehgards.

    lightstylenz Friend
    #459090

    Almost there. All good with item view until I replace the 2nd bit of code as intructed. For some reason it seems to ad up to the code added to the end of css file. To solve that I have to adjust

    #k2Container .itemImageBlock img{
    margin: 5px 10px 10px 20px;
    }

    for

    #k2Container .itemImageBlock img{
    margin: 5px 0 0 0;
    }

    To get an ok balance and similarity between category and item view but there`s one thing that can get better (I hope). How to push the text down so that it aligns with the top of the image? http://www.lightstyle.co.nz/sites/brooklyn/index.php/classroom-blogs/years-0-1/item/8-model-in-black-outfit

    It is ok in category view but in item view its to close to the info above it…

    HeR0 Friend
    #459129

    Hi lightstylenz,

    You can reduce space if you reduce padding bottom of <a> tag as below:

    div.catItemImageBlock a, div.userItemImageBlock a, div.tagItemImageBlock a, div.itemImageBlock a {
    float: left;
    padding: 5px 10px 0 20px;
    }

    Regards,

    lightstylenz Friend
    #459344

    Still not 100%, but I`ll stop here…Thanks for the patience.

Viewing 13 posts - 1 through 13 (of 13 total)

This topic contains 13 replies, has 2 voices, and was last updated by  lightstylenz 12 years, 4 months ago.

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