⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠

  •     

profile picture

Image align tag breaking



Chris Neville-Smith
  • profile picture
  • Member

Posted 14 May 2013 - 11:01 AM

Hi.

 

We're having a bit of grief here.

 

Created an image which is supposed to be aligned to the left. HTML code appears in the editor as:

 

<img style="float: left;" title="ParentMail logo" src="../../../assets/files/7d5b0-Untitled.png" alt="ParentMail logo" width="229" height="100" />

 

So far, so good.

 

When I save this and view this in a browser, it doesn't float at all. The source code shows up as:

 

<img   left;" title="ParentMail logo" src="../../../assets/files/7d5b0-Untitled.png" alt="ParentMail logo" width="229" height="100" />

 

For some reason, half of the style tag has disappeared compeltely. Why is it doing this, and how can we fix this?

 


davidoster
  • profile picture
  • Member

Posted 14 May 2013 - 11:16 AM

Hello and welcome to the forum.

You need to post your controller's code and the code of your view file in order to able to help you.


Chris Neville-Smith
  • profile picture
  • Member

Posted 14 May 2013 - 13:15 PM

Okay, not familiar with either of those, but here's what the administrator sent me. Hope this makes more sense to you than it does to me.


davidoster
  • profile picture
  • Member

Posted 14 May 2013 - 17:13 PM

1. in groceries.php, on case_study() function there is a line

$output->css_files[] = base_url().'css/grocery_crud.css';

This line might create view problems. 

 

2. in groceries.php does the _example_output function (not listed actually within the file) loads the groceries_view.php?

 

3. in groceries_view.php there isn't a line like the one you mention on your first post!

There is only this line: <a href="<?=base_url()?>"><img alt="See Detail Logo" src="<?=base_url()?>images/seeDetail.jpg" /></a></li>

 

 

So in essence what you sent me is different from what you ask.

In general,

A. omit (just for testing) this line $output->css_files[] = base_url().'css/grocery_crud.css';

B. amend your view file to contain the exact code you want

 

 

Strictly speaking this is a CodeIgniter question and not a Grocery CRUD related one!

So I suggest you tell to your administrator or whoever develops this, to study here.


Chris Neville-Smith
  • profile picture
  • Member

Posted 16 May 2013 - 13:34 PM

Thanks. The admin's on holiday until Monday, but it looks like it will be enough to get us going.


Adamantus
  • profile picture
  • Member

Posted 20 May 2013 - 13:26 PM

Hi, I manage the website where Grocery CRUD is used. The problem we have is that when TinyMCE editor is used it creates malformed HTML code. The output for images looks like this:

<img width="229" height="100" alt="logo" src="../../../assets/files/7d5b0-Untitled.png" title="logo" left;"="">

It does this whenever we try to use the "alignment tab" when trying to insert an image in the editor. It should really be coming out like style="float:left" instead of left;"="" which is really weird. I think that this is probably due to a bug in TinyMCE and perhaps upgrading this in Grocery CRUD could fix the issue.

 

In response to David's post above:

 

1. I disabled the CSS file so that I could rule this out but the problem remains.

2. Yes the output function is used to load the view:

    function _example_output($output = null)
    {
        $this->load->view('groceries_view.php',$output);
    }

3. This image was created in Grocery CRUD TinyMCE and stored in the DB. It was just an example given to illustrate what happens when we use the editor.


davidoster
  • profile picture
  • Member

Posted 20 May 2013 - 13:48 PM

Hello [member=adamantus], thank you for joining in and welcome to the forums.

I will test the use of TinyMCE along with the image alignment feature and I will let you know.

 

What really bugs me is where exactly you show this image?

Can you please post a screen capture and the actual PHP code that produces the malformed HTML?


Adamantus
  • profile picture
  • Member

Posted 20 May 2013 - 14:17 PM

I noticed that the newer version of GC has an updated TinyMCE editor in it so I upgraded to see if it would fix the bug but alas it remains.

 

What really bugs me is where exactly you show this image?

Can you please post a screen capture and the actual PHP code that produces the malformed HTML?

 

Ok I'll try to explain this another way. The image is an image inserted into the editor, so it's an image we'd like to appear on our website. So it's not created using PHP code other than Grocery CRUD and TinyMCE editor. It's not something stored in a controller or view.

 

Here are the steps for reproducing the bug if helpful:

 

Edit a case study by clicking pencil icon > Enter some text > Click on tree icon to insert image > Enter an image url > Click on appearance > Under alignment click on "left" > Click insert.

The image should now be aligned to the left with any text going around it. > Click on update > View the website where the content is to be shown ( or view in database) > You will see that the image tag is malformed.


davidoster
  • profile picture
  • Member

Posted 20 May 2013 - 15:05 PM

I did some testing.

On an installation using the latest GC 1.3.3 I couldn't reproduce the problem.

Check here: http://eletter.gr/samples/gc_ic/index.php/gc_examples/products_management/1/edit/1

You can test it yourself by adding a new record if you want, or editing another one


Adamantus
  • profile picture
  • Member

Posted 21 May 2013 - 14:14 PM

You can test it yourself by adding a new record if you want, or editing another one

I tried testing it on your example site but there is no site to verify what was entered (i.e. where is the website that goes with this editor? Assuming that it's used as a content management system). There was no working image in the example so I added one. Is there a site that goes with this editor?

 

I also did a cross-browser check, it affects Firefox 20.0.0.1 and Chrome 26.


davidoster
  • profile picture
  • Member

Posted 21 May 2013 - 17:47 PM

What do you mean there is no site? I really don't understand what you mean.

But anyhow, for this record in the database, the produced html is the following (in the database):

 

 

<p><img style="float: left;" src="http://www.seedetail.co.uk/assets/files/7d5b0-Untitled.png" alt="" width="229" height="100" />asdasdasds</p>
<p> </p>

 

And here's a screen capture of what I see, where even with your edited image I see that with TinyMCE the style of the image is stored properly in the database.

pK7FZ1e.png

If this is not the issue please try to explain again. I categorise this issue as "not possible to reproduce".


Adamantus
  • profile picture
  • Member

Posted 31 May 2013 - 09:02 AM

Okay, thanks for testing David. Yes I can see from the DB that your code is coming out okay. This is weird considering that I am running the latest and same code as you. I'll try to do a more simple test later to rule out other factors in my controller.

 

When I said there's no website, what I mean is that Grocery CRUD can be used as a simple CMS. In this situation you would use Grocery CRUD to update the DB at one end, and the website uses the same DB to produce the content on the site. I assume you're using it for a different purpose.


davidoster
  • profile picture
  • Member

Posted 01 June 2013 - 06:57 AM

When I said there's no website, what I mean is that Grocery CRUD can be used as a simple CMS. In this situation you would use Grocery CRUD to update the DB at one end, and the website uses the same DB to produce the content on the site. I assume you're using it for a different purpose.

 

Other people using it as a backend, other people using it as a front end and other people are using it for both.

Depending on what implementation one needs, GC is used on a different way.

I, most often use it as a backend system, for administration purposes and I choose to display different views on a frontend.

Quite often I mix and match with CMS's like Drupal (personal favourite).


Adamantus
  • profile picture
  • Member

Posted 10 July 2013 - 09:50 AM

Hi again. I've done a very simple test to rule out any problems in my code. This method is very simple and doesn't even have any css added. but I still get the weird code in my output whenever I try to align any images using the TinyMCE editor. It would be really great if the inventor of GC could look at this as I'm almost certain that this is a bug.

 

Here is my method code (there is a simple db table with three fields, two varchar(100) and one text field):

    function test()
    {    
        $crud = new grocery_CRUD();
     
        $crud->set_table( 'test' )
            ->set_subject( 'test' )
            ->columns('name','uri_name','description');
     
        $crud->fields('name','uri_name','description'); //Fields to display for add / edit.
        
        $output = $crud->render();//Set output variable for view.
        
        $this->_example_output($output);
    }

Here is my output code:

<p><img  left;" title="" src="../../assets/files/7d5b0-Untitled.png" alt="" width="229" height="100" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis eros quis tellus gravida varius et eu odio. Suspendisse quis eros viverra nulla bibendum malesuada. Fusce pulvinar molestie volutpat. Pellentesque blandit tellus at faucibus pellentesque. Nunc aliquam mattis augue, in faucibus sem fermentum sed. Nam nec lorem eu nulla tincidunt dictum in vel tellus. Sed ullamcorper viverra est a hendrerit. Donec arcu elit, condimentum condimentum sagittis sed, pretium in eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam massa ipsum, cursus sed egestas quis, tempor rhoncus orci. Proin facilisis urna lorem, et aliquet velit venenatis semper. Fusce non pretium purus. Maecenas bibendum metus sodales, auctor ligula viverra, euismod sem. Sed et magna a ipsum dignissim hendrerit id sit amet odio. Suspendisse tincidunt mattis ligula, eget ultrices turpis tempor sed.</p>

As you can see <img left;" should not be happening.

 

Also: After adding the first row the grocery crud page for test will not show. Just a blank page is shown.

 

At the moment I'm planning to move away from GC as it just isn't working for me. It reminds me of Joomla because: A problem comes up, can't fix as I didn't write the code, ask in forums, no staff respond.


davidoster
  • profile picture
  • Member

Posted 10 July 2013 - 12:46 PM



 

At the moment I'm planning to move away from GC as it just isn't working for me. It reminds me of Joomla because: A problem comes up, can't fix as I didn't write the code, ask in forums, no staff respond.

 

We are sorry to see you going.

Just to let you know before you go away, Grocery CRUD library isn't:

- a paid project (unless someone makes a donation)

- having a team of core developers behind, the only core developer is [member=web-johnny] and builds this on his (laugh here) spare time! many thanks to all these people that have contributed either by posting code to the forums or at the project's github!

- having a dedicated team of people to respond to problems that people have! it is merely supported by the community itself (for free of course since it is Open Source!!!)

 

We tried our best to help you out. But we couldn't reproduce it!

The next step is to send us (you can pm myself) with an archive and a db dump to install it and let you know about any findings!

Other than that, sorry but there isn't anything else we can do!

 

Thanks again!


Adamantus
  • profile picture
  • Member

Posted 10 July 2013 - 13:40 PM

Yeah I know it's a small project and doesn't yet have enough support to really make it work. I think with a couple of extra developers it could be really great but it's viewed as kind of a niche project, built on the back of what some see (but certainly not myself) as being a niche framework. It could overcome its minor Joomlaitis in time!


Adamantus
  • profile picture
  • Member

Posted 18 July 2013 - 14:42 PM

God knows what's causing this issue but I managed to use a workaround. I just used some css to create the text wrap for the elements I want. For example:

#right-side img
{
    vertical-align:top;
    float:left; 
}

Hopefully It'll disappear after a future update due to Tinymce updates.


davidoster
  • profile picture
  • Member

Posted 19 July 2013 - 07:17 AM

God knows what's causing this issue but I managed to use a workaround. I just used some css to create the text wrap for the elements I want. For example:

#right-side img
{
    vertical-align:top;
    float:left; 
}

Hopefully It'll disappear after a future update due to Tinymce updates.

 

At least you found a way! Sorry we couldn't help you more than this.