-
AuthorPosts
-
June 14, 2012 at 12:31 pm #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_portfolioNeed 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 ViewThanks,
AndreHeR0 FriendHeR0
- Join date:
- August 2011
- Posts:
- 3626
- Downloads:
- 0
- Uploads:
- 61
- Thanks:
- 33
- Thanked:
- 588 times in 549 posts
June 15, 2012 at 9:44 am #457563Hi 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,
June 19, 2012 at 11:41 pm #458112Hero,
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,
AndreHeR0 FriendHeR0
- Join date:
- August 2011
- Posts:
- 3626
- Downloads:
- 0
- Uploads:
- 61
- Thanks:
- 33
- Thanked:
- 588 times in 549 posts
June 20, 2012 at 2:57 am #458126Hi Lightstylenz
JA Lens have override layout com_k2: ja_lenshtmlcom_k2hability 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.phpNote: because category view have some layouts so if you can provide url or screenshots then i can help you best 🙂
Regards,
June 25, 2012 at 5:03 am #458677Hero,
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
Thanks,
AndreHeR0 FriendHeR0
- Join date:
- August 2011
- Posts:
- 3626
- Downloads:
- 0
- Uploads:
- 61
- Thanks:
- 33
- Thanked:
- 588 times in 549 posts
June 25, 2012 at 7:33 am #458698Hi 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 settingRegards,
June 26, 2012 at 9:12 am #458871Hero,
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,
AndreJune 26, 2012 at 10:27 am #458896Hi 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…
June 26, 2012 at 2:19 pm #458918Hero,
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.phpAnd so far I have also modified templates/ja_lens/css//k2.css where I replaced
display: block;
tofloat: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
And images attached give an idea of what I need to finetune. Basic image/text margins and alignments.
Thanks,
Andre-
HeR0 Friend
HeR0
- Join date:
- August 2011
- Posts:
- 3626
- Downloads:
- 0
- Uploads:
- 61
- Thanks:
- 33
- Thanked:
- 588 times in 549 posts
June 27, 2012 at 2:29 am #458967Hi
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.
June 27, 2012 at 2:56 pm #459090Almost 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 FriendHeR0
- Join date:
- August 2011
- Posts:
- 3626
- Downloads:
- 0
- Uploads:
- 61
- Thanks:
- 33
- Thanked:
- 588 times in 549 posts
June 28, 2012 at 3:23 am #459129Hi 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,
1 user says Thank You to HeR0 for this useful post
June 29, 2012 at 3:13 pm #459344Still not 100%, but I`ll stop here…Thanks for the patience.
-
AuthorPosts
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
Jump to forum