How to Render images from a image folder path

[felixkat]

Strange as it works on mine...


This is my calc code

return  "<img src='http://192.168.82.201/dev/fab3tests/images/sampledata/fruitshop/apple.jpg'>";

Attached are my backend settings and the frontend result.

 

[rackem]

My settings match yours so I am completely baffled.

I found it will render properly when viewing a form record in the front and back end. It also renders in a list. However, as before, I just get the text when creating / editing a form in either the front or back end which is where I need it to be rendered.

I updated to the latest Github. I tried linking to the same image as you did in the sampledata. I tried creating a new test table with just this element as you did. Chrome and Firefox. The behavior is the same.

Is there another setting someplace that could be doing this? All my settings should be at their default. The path is being displayed and stored properly in the database (checked thru phpMyAdmin).

 

[felixkat]

Seems I missed your point about it not working on form edit. It's correct to say that this calculation doesn't display the image in edit mode.


The image element would display in edit mode but as you know that's kinda broken at the moment.


On a side note, what is the image being displayed in edit mode? Are you selecting a product and wanting to see the image realtime, something like that?

 

[rackem]

That would be similar task. I am making a site to track a user's stats (average & consistency) while performing practice drills for pool/billiards. The practice drills are created ahead of time and consist of an image and some informational text fields. A user will attempt each drill many, many times. A user needs to view the drill information so they set it up and score it consistently. So I need to display the drill information in the same form the user will input their score into.

I have a drill table (i.d., date-time, title, image, etc.) and a score table (i.d., date-time, drill i.d., user i.d., score, etc.) linked by a database join element on the drill ID. The form to create the drills was easy. On the scoring form, I've figured out how to display the drill's text fields in the score form by querying the database by the drill i.d. Getting a rendered image based on a query is the last trick.

I actually ran into the problem with the image element trying to troubleshoot the calc element. So even if the image element was working, I'm not sure it would help me any. Do you have any ideas of any other ways I might be able to do this?

 

[felixkat]

So the image will be based on the selection of the dbjoin?


.. I think you may have to use Ajax for that as it sounds like something I did recently.

 

[rackem]

Thank you, your tip made more sense after I went through did the AJAX tutorial. I can see how this would fill in my text elements but am not clear on an image.

So just to clarify, I would set the value of an image element using AJAX? Do you know if I would have control over the size of the image this way?

 

[cheesegrits]

Just FYI, the image is not being displayed in edit mode because we currently render the result of calc's in a form input field, so HTML markup won't get applied, it's just text in an input box. I thought we had changed this a while back, to simply render the calc as the content of a DIV, even in edit mode. But it seems that Rob and I only discussed and agreed on this, rather than actually doing it, LOL!

I currently have the Image element code open on the slab in my lab, I think in response to issues you have reported with it, just haven't had time over Thanksgiving to do much with it yet. I think the last thing I did was ask for a screenshot of the image element settings.

-- hugh

 

[felixkat]

Thank you, your tip made more sense after I went through did the AJAX tutorial. I can see how this would fill in my text elements but am not clear on an image.

So just to clarify, I would set the value of an image element using AJAX? Do you know if I would have control over the size of the image this way?

Can you post your image settings for Hugh?


I have done very similiar to what you are trying to achieve in Fabrik 2.x, I haven't ported it across to 3.x yet so I don't know if anything needs to change.

I'll create a test on the demo server to see if it works okay and then I'll post the instructions. It's handy to have things like this on the demo server.

 

[rackem]

Thank you very much felixkat and hugh for all of the help and info!

But it seems that Rob and I only discussed and agreed on this, rather than actually doing it

I know how that goes! I am still trying to figure out the basics so I don't know if I need this and should wait for it or if perhaps the AJAX option will be better for me in the long run. I do want to look into it on a parallel path just to learn what it is all about. It could come in handy for some of the other parts of my site as I get to them.

I think the last thing I did was ask for a screenshot of the image element settings.

I posted a screenshot in that thread as requested earlier today. Let me know if that was not what you were after. Here is a link to that thread: http://fabrikar.com/forums/showthread.php?t=23256

I'll create a test on the demo server to see if it works okay and then I'll post the instructions.

;D

Thanks again!

 

[cheesegrits]

I replied on the other thread you referenced, i've fixed a couple of issues in the Image element, so a URL specified in the "Image" setting should now work.

-- hugh

 

[rackem]

*Friendly bump* to felixkat on the User Ajax demo for F3.

 

[felixkat]

Strangely enough I'm actually working on that at the moment. I did do some work on it the other day as I'll need it myself for F3, however there are some changes with the Ajax setup that I had to learn.

Should have an example for you in a couple of hours to look at.

.

 

[rackem]

Cool, thanks for the update! ;D No rush, I can't get back to it until tomorrow evening. But I'm looking forward to it!

I started to mess with it last night based on the tutorial and forum posts but ran into some error regarding Ajax. There was probably something else off in my code but after looking at the latest MooTools docs, I got a feeling the Ajax call was obsolete and replaced by the Request object. I ran out of time to investigate further.

 

[felixkat]

Very basic setup.... Not sure if this is the type of thing you are looking for.


Got to the following link, click add and make a selection.

http://demo.fabrikar.com/index.php/ajax-test


.

 

[rackem]

Conceptually yes, I think it is. Nice cheesegrits example.

How did you do it?

 

[felixkat]

Magic!

I'll do a write up for you later.

 

[rackem]

Awesome, looking forward to it! ;D

 

[felixkat]

Slightly rushed explanation.... feel free to ask any questions on anything I missed. I can't guarantee I have the answers though... heh heh.


For this basic setup I have setup two tables, products and orders. I have attached screenshots of the element setups for both lists.

Orders has a dbjoin to product, this is the dropdown that is selecting the product name. We also want to display the image from the product list, this is where the Ajax comes in.

An additional image element has been created in the Orders list, this is just a 'dummy' element to enable us to display the image. Nothing gets stored in this element, it is simply there to display the ajax refreshes.

I have attached the user_ajax file but it's just the last part we are interested in, I'll break down what each line does to benefit others as well.


user_ajax.php


class userAjax { //First we define the classname we are going to use to make the call.

function imgclasse() { //function name for the code

$db = JFactory::getDBO(); //Reference to the Joomla database

$IdClasse = JRequest::getVar("product", ""); //Interface to get the variable we want

$query = "SELECT product_image from demo_products WHERE id=$IdClasse LIMIT 1"; //The mysql query we will be doing for grabbing the image.

$db->setQuery($query);//making the actual query

$result = $db->loadResult();//loading the result into variable $result
echo $result; //outputting the $result
}}



JS code

The JS code can be placed in a form file ....

(create a XX.js file in components/com_fabrik/js, where XX is your numeric form ID, and put your functions in there, then just call the functions from your element JS actions.)

... or simply added to the 'javascript tab of an element. This is the option I have choosen and I've added the following code to the databasejoin element and specified the Action 'on change'. (see screenshot).


var url = 'index.php?option=com_fabrik&format=raw&view=plugin&task=userAjax&method=imgclasse'; //The URL that will be calling the PHP code. Note the classname and function name we put into the previous code.

var product = this.getValue(); //simply declaring 'product' to get the value
var update = $('demo_orders___image').firstChild; //The element to update, in this case the temp image element.

new Request({
    url: url,
    data: {
        method: 'imgclasse',
        'product': product
    },
    onComplete: function (r) {
        update.src = 'http://demo.fabrikar.com' + r.replace('images/demo/2/', 'images/demo/thumbs/2/th_');
        document.getElementById('demo_orders___image').innerHTML = '<img class='imagedisplayor' style='float:none;' alt=''  width='200' height='200'  src=' + r + '>'
    }
}).send();

//The actual request that is pulling everything together.

NOTE:- The 'update.src = 'http://demo.fabrikar.com' + r.replace' part of the code isn't actually needed in this instance, I just didn't change it from where I ported it over from 2.x. Obviously the value we get is the stored one which is the fullsize image, the code changes this to the thumbnail image which in my original case was the one required.

The JS actually controls the size of the image displayed so you can change this to whatever you want.

Note also that for this example I'm using innerHTML to update the display. This is probably not the best way of doing it and tapping into the Fabrik image element may be the preferred way, I haven't looked into this yet.

Having said that, doing it the above way ensures that the image displayed doesn't get saved, which we don't need it to be. The database join value, (product name), is being saved which is associated already with the image, so we don't need to do it twice.


Finally, for representation I joined the two tables together and prevented the 'dummy image element' from being displayed in form details. Therefore the image being shown is directly from the source table, (products).


The code is adapted from one of my 2.x projects which originally was based on code created by toots. So credit where credit is due.

http://fabrikar.com/forums/showthread.php?t=18406

http://fabrikar.com/forums/showthread.php?t=16449


.

Hugh \ Rob may have some input of a preferred way of doing things. All the above is just an example that works for me, you'll obviously have to adapt where necessary, hence the screenshots to identify what goes where.

The code also assumes that the product table has the image locations stored, if this isn't the case then you'll need some modifications. Useful to know is that in Fabrik 3.x the image element searches a few locations for an image file, whereas before it would only look in the default folder specified.

.
Okay... that's enough for now....

 

[rackem]

Wow, this is great! I was confused with on a few things with my own experimentation and now I understand much more just reading this. For example, the syntax of the URL was really giving me grief. It all seems to make sense except for the following JS:

In the line: ?var update = $('demo_orders___image').firstChild;?, why is ?.firstChild? used or needed?

I thought innerHTML was just used to set text so I'm cofused how you are able to pass image attributes.

I will try it for real tonight and let you know how it goes! ;D

 

[felixkat]

In answer to you first question... I just kept the original suggestion that works but haven't gone any further with the alternative routes.

http://fabrikar.com/forums/showpost.php?p=92212&postcount=24

thought innerHTML was just used to set text

Correct. The 'dummy image element' is already in place and setup to display an image, we are just using the innerHTML to populate the path to the image. Probably not the best way of doing it, but it works for now. I'll delve into it a bit more at some point.

.