I am very upset and need help I am using K2 in a news website the article main image doesnt appear, I tried everything possible for 5 days now but nothing happened please check URL below it's a K2 Item page you can see the article but no image, please I need help, It's an arabic website so the link is too long sorry for that..

ahlyafrica.com/index.php/bonus-pages/item/241-%D8%A7%D9%84%D8%AC%D9%87%D8%A7%D8%B2-%D8%A7%D9%84%D9%81%D9%86%D9%8A-%D9%8A%D8%AD%D8%B3%D9%85-%D9%82%D8%A7%D8%A6%D9%85%D8%A9-%D8%A7%D9%84%D9%85%D9%88%D8%B3%D9%85-%D8%A7%D9%84%D8%AC%D8%AF%D9%8A%D8%AF-%D9%88%D8%A7%D9%84%D9%82%D9%8A%D8%AF-%D8%A7%D9%84%D8%A5%D9%81%D8%B1%D9%8A%D9%82%D9%8A

You can see the images very good in the home page please see: www.ahlyafrica.com

Please need help very soon

Hi John Farouk,

- have you looked if the Category-Setting depends on another Categorie?

or

- is it a Menu showing more than 1 Categorie? Then you have to set your Setting in Menu.

Regards

Franz Wohlkönig wrote: Hi John Farouk,

- have you looked if the Category-Setting depends on another Categorie?

or

- is it a Menu showing more than 1 Categorie? Then you have to set your Setting in Menu.

Regards

Hi Franz

I need to thank you for your help and reply, Concerning the category no the category is a root one and not take settings of any other category.. Concerning your second instruction I didn't understand it clearly, can you please explain, also I can send you Joomla login to help me, please i need am urgent help

Thank you again for your help & waiting reply
John Farouk

This one is pretty easy and its one that's cropping up a lot with K2 and templates that use modals.

It's a conflict between the way Bootstrap (the 'framework' your template is based on) handles modals and the way K2 does.

The image is actually present, but the css of your template sets .modal to display:none.

You've got two ways of handling this:

1) Edit your bootstrap-rtl.css file, look for .modal and delete it. This will almost certainly cause other issues, but it should allow the image to be visible

2) If you don't care about being able to zoom in on the image, simply create a template override for the news item.php and strip out the entire <a> tag that surrounds the image.

If you REALLY want to have modals and #1 doesn't work, then you can go a bit further and try to implement modals in the Bootrap manner.

For this to work you need to:

1) Create a template override for news item.php to strip out the existing K2 modal code and replace it with Bootstrap's code
2) Use Mootools Enabler/Disabler to disable Mootools
3) Use NoNumber ReReplacer to get rid of the Squeezebox code in the header.

Regards,

Kelsey

@John Farouk

Do not create duplicate posts or you will get banned from this forum. I have answered already to your question.

ok I am sorry

Kelsey Brookes wrote: This one is pretty easy and its one that's cropping up a lot with K2 and templates that use modals.

It's a conflict between the way Bootstrap (the 'framework' your template is based on) handles modals and the way K2 does.

The image is actually present, but the css of your template sets .modal to display:none.

You've got two ways of handling this:

1) Edit your bootstrap-rtl.css file, look for .modal and delete it. This will almost certainly cause other issues, but it should allow the image to be visible

2) If you don't care about being able to zoom in on the image, simply create a template override for the news item.php and strip out the entire <a> tag that surrounds the image.

If you REALLY want to have modals and #1 doesn't work, then you can go a bit further and try to implement modals in the Bootrap manner.

For this to work you need to:

1) Create a template override for news item.php to strip out the existing K2 modal code and replace it with Bootstrap's code
2) Use Mootools Enabler/Disabler to disable Mootools
3) Use NoNumber ReReplacer to get rid of the Squeezebox code in the header.

Regards,

Kelsey

I need to thank you for you reply and great help, I deleted all .modal inside the bootstrap-rtl.css folder all of them, i got the broken thumbnail of the image but the image still not showing for my bad luck.

Concerning the steps you asked me to do please i need your help i can't do it as i am beginner in that, so i can PM you login details and can you help me in that, i will be thankful to you Kelsey...waiting reply

Kelsey I did it :)

Look i make a copy of k2.css in the template css, I added the following to it and now I can see images :) can you confirm that is right action please

#k2Container a.modal {
border: 0px;
display: inline-block;
margin: 0 10px 0 0;
position: relative;
top: auto;
left: 0px;
width: auto;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 0 0 0 0;
-moz-box-shadow: 0 0 0 0;
box-shadow: 0 0 0 0;
}

Hi Kelsey again

As I told you the image is now ok but I see a broken image below the big article image I inspect this image in chrome I fount the code <img src="/" alt=""> is causing that problem, where can i remove that, i searched for it in the item.php but I can't find it..thank you for helping me

waiting

hi Kelsey

Really I need your help i did something which i don't know my home page stuck and the articles background disappreared and the logo spoiled I am really Upset i made some changes as i told you but i tried to make everything back but in vain

Please help see my website

www.ahlyafrica.com

hi Lefteris

Please i need help my website www.ahlyafrica.com has been spoiled i made some changes in bootstrap as you follow up after a while i got the home page error no background and Logo stuck

I am a beginner to handle that can you please help me sir I can send you my login details for cpanel and joomla now as PM

I tried to restore the defaults but in vain

Really need help...Waiting reply

Hi again

I suceeded to restore defaults but the problem of the article image came again please help

www.ahlyafrica.com/index.php/%D9%83%D9%84-%D8%A7%D9%84%D8%A3%D8%AE%D8%A8%D8%A7%D8%B1/item/237-%D8%A7%D9%84%D8%A3%D9%87%D9%84%D9%8A-%D9%8A%D8%AA%D8%B5%D8%AF%D8%B1-%D9%85%D8%AC%D9%85%D9%88%D8%B9%D8%AA%D9%87-%D8%A8%D8%A7%D9%84%D9%83%D9%88%D9%86%D9%81%D8%AF%D8%B1%D8%A7%D9%84%D9%8A%D8%A9-%D8%B9%D9%84%D9%89-%D8%AD%D8%B3%D8%A7%D8%A8-%D8%A7%D9%84%D9%86%D8%AC%D9%85-%D8%A7%D9%84%D8%B3%D8%A7%D8%AD%D9%84%D9%8A

I can't believe myself nobody here to help me how is that?????????????

John, I'm not in your time zone and I'm very very busy at the moment with a ton deadlines. I've only just now had a chance to come back to this thread.

I understand this is important to you, but it's a small community, not Facebook. Replies aren't instant.

Send me the following:

FTP login details
Joomla Admin login details

to help (at) thinksync.com.au and I'll try and help with this one issue.

@John Farouk

Have you resolved the issue? I can see the image as expected in the last link you provided. It would be great to share the solution here to help other users of this community who might face the same issue.

I'd say he's either left a tag unclosed (or forgotten to delete the closing tag after removing the opening) or accidentally duplicated the img tag.

The solution is really simple, and it's one that I have to deal with on almost every site I develop at the moment:

Templates using Bootstrap and K2 have a fundamental issue with the a tag in the image block of item.php. Because it uses the class of 'modal', the main item image of K2 will disappear: a.modal in Bootstrap has 'display: none;' set.

So as mentioned in an earlier post there are a couple of simple solutions:

1) Don't need the article image to be a modal?
Override the item.php template and remove the 'a' tag surrounding the item image.

2) Need modals, and are happy with the K2 modal?
Search all css files in your template for .modal - if it's based on Bootstrap, you'll find it in bootstrap.css, bootstrap.min.css or a combined.css file, depending on how the template authors have setup the template.

3) Need modals, but want to use the Bootstrap modal system throughout the site?
This is where it gets a bit trickier because you'll really need to disable the K2 modal system.

To do this I do the following:

- Override item.php with the necessary Bootstrap equivalent modal code
- Disable K2 css, jquery and any other options in K2 preferences - bear in mind this means you'll need to create the template styles yourself
- Disable Mootools by using the Mootools Enable/Disable plugin
- Strip out the SqueezeBox script in the site header which K2 instansiates and with Mootools gone will now cause js errors

The first step is the most complicated bit and if you're not comfortable with template overrides then you should probably avoid option #3 entirely. Get it right however and you can have all of your media in Bootstrap modals and strip out redundant systems.

@Kelsey Brookes

Thank you for sharing this small guide. The class modal is an issue but we really cannot decide to change the class in the current K2 version. It will break people's sites that are already using the class in their overrides with the core Joomla! modal script.

Yeah, I know - I definitely agree that backwards compatibility for the current version series is a priority.

What I would love to see, if there were to be a K2 2.7, is an option in parameters to turn off K2's instansiation of SqueezeBox, just like we can choose not to load k2.css or jQuery. Existing sites maintain backwards compatibility while the rest of us can override to our heart's content without jumping through hoops.

For me it's really Squeezebox that causes the most headaches, usually generating errors that causes other JS to fail because it's instansiated near the top of the document. ReReplacer can get rid of it, but it's a bit hit-and-miss.

That's a very good idea. Would you mind create an issue for this on the repository on GitHub at github.com/joomlaworks/k2 ?

Not a problem!

I've gone ahead created the issue here: github.com/joomlaworks/k2/issues/246