Automating link on image in article template

Hi there, I am busy customizing templates for article display, and would like to add the weblink (entered as a separate field on a form) to automatically be added to the image in the article. i.e. I do not want the link to show as a separate field but to create a link when clicking on the image. My php is poor but I'm willing to learn, please can you assist.

It seems that you need customize one of our fields. For example image and add link to the image. The certain behavior can`t be achieved with standard functionality.

So I would essentially then create a new field using the image field as a starting point? I will do some research to see if I can figure out how to do this, thank you.

1. You have URL field for link? You have text field where enter link?

2. You have image field? You just hardcode image to template?

Lol, sound so easy, and I think I know how to do it but time will tell. I'm a novice so I learn by making mistakes :D

Those was a questions not a suggestions. If you answer them I can provide you with code examples. :D

Ohhhh... (red face) I have the image upload field as the image will have to be uploaded each time. I have the url field as this will also be a unique url each time. Should I use the url or the text field here? In essence the advertiser will submit a form with the image uploaded and the url link. What I desperately want is for that then to be combined in the article so the the image has the link embedded (not sure if that's the right word?) so I don't still have to go and add the link myself. Thank you.._.

Should I use the url or the text field here?

Only on your choice. At least URL field check for correct input.

There are number of methods you can achieve it.

You copy and edit fields templates and ensure that field image return only image and field URL only URL withut HTML. Then in template

fields_by_id[10]->result, $item->fields_by_id[12]->result);?>

where 10 is ID of the URL field and 12 is and ID of the image field.

Another method is to parse string in article/article list template.

I'm learning, thank you! :D So if I wanted this to only happen for specific articles, in other words if I used these fields in other articles that did not need the image link, I should make separate templates for the fields. Your first option sounds easier!

I am so sorry to bug you yet again._. I have got myself totally confused with the first option here... I have looked at the field template files and spent some time Googling, but cannot seem to find a way that will enable me to return only image... I have found examples that return a specific image, i.e. a single image from a specific directory, but cannot seem to find anything that will enable the file uploaded to each article to display as an image in the article (it seems these are attachments?) I'm still looking, but getting more confused by the moment.... I'd appreciate your input

In image output template at line 66 you can find

$url = sprintf('%s/thumbs_cache/image/%s', $this->url, $new_name);

$html_img = JHTML::image($url, @$value['image_title'], array('hspace' => $this->params->get('params.img_hspace'), 'vspace' => $this->params->get('params.img_vspace'), 'title' => @$value['image_title']));

YOu have to change it to

$url = sprintf('%s/thumbs_cache/image/%s', $this->url, $new_name);

echo JHTML::image($url, @$value['image_title'], array('hspace' => $this->params->get('params.img_hspace'), 'vspace' => $this->params->get('params.img_vspace'), 'title' => @$value['image_title']));

return;

You can also delete any code after return. This is how you output only image.

Your patience is astonishing and I'm very grateful, thank you.

Oh dear... I have found the output file no problem, but it's linked to image field. I am using the upload field as if I use the image field it will not allow the upload of the image, only to select from the media file. I'm sure I'm doing something wrong, but cannot figure it out - my (perhaps mistaken) logic tells me that the upload field and image field are totally separate, and that editing the image output template would not affect the upload output? Of course, if there were a way to upload the image using the image field that would be perfect, but I cannot seem to find it. I do rather feel like a dunce, and can only grovel in abject apology for what would appear to be utter stupidity.._.

but I cannot seem to find it.

Right. Because it allow upload only through media manager and that is not very good idea to allow registered users go this way. We are working on adding upload ability to image field but that will be available only with Cobalt 8.

As a solution now you can use either gallery field or uploads with custom template.

Judah,

you have to understand how fields work.

Under normal circumstances fields dont influence each other.

You enter information into a field and it will be stored in the database.

Input and output templates define certain rules, how this will happen and how the final result will be displayed.

The field parameters give you an easy access to influence this. If you want more control over the fieldfunctionality, you can easily enhance every field through customized field-input/output templates (which requires basic php/css/html knowledge) to your liking and achieve almost any thinkable result.

Then there are 2 views ("intro"= article list and "full"= single article) which are also controlled by templates. These views/templates define how articles will be displayed. This would be the place to do modifications, when you want to display different fields in a different way, meaning rearranging, hiding or changing their output based on conditions you impose on them. A good example would be your url and image field. You could add the url to the image and just hide the url field.

I hope this could help you at least a little to get a better understanding of the way Cobalt handels things.

Enjoy your Sunday playing with one of the most impressive tools for Joomla - Cobalt 7 .. :D

Thanks so much for the assistance I do appreciate it. I have used the upload field and will make the necessary changes to the output template, but I've attached a screen print image as for some reason the upload field does not display correctly on the submission form. I have tried setting upload to flash, auto, html4 and html5 and it makes no difference. If you look at both book cover and upload arc on my form you will see that it's impossible to upload anything. I'm sure you're very tired of my questions. :D

Ugh, so sorry, here's the image

for some reason the upload field does not display correctly on the submission form. I have tried setting upload to flash, auto, html4 and html5 and it makes no difference. If you look at both book cover and upload arc on my form you will see that it's impossible to upload anything.

Hi. Are you already using custom templates? Does the upload field work in another default template and form?

There might be helpful information in your browsers console and/or developer inspector tool. Its always a good idea to investigate your page rendering and output.

I'm just waiting for video to fully load and will have a look, thank you. In the meantime I can tell you that it happens whether I use the custom template or the default template, although if I use the either of these two templates with another type the upload fields show fine?? i thought perhaps it was the length of the form that might be the problem and found this:

.input-field, .input-field-full {

clear: none !important;

display: block;

border: 0px solid red;

max-height: 1000px;

And then increased the max-height, first to 1500px then 2000px which seems extreme, but it still doesn't solve the problem.

I have had a look with firebug and as per attached:

Review form displays incorrectly

<

div id="formelm_container28" class="formelm odd0 field-28">

<

div class="input-field">

$('el3c5ab').hide(); window.addEvent('domready', function() { var myUpload = new MooUpload('3c5ab', { action: ' http://www.classicromancerevival.com/index.php?option=com_cobalt&task=files.upload&no_html=1§ion_id=3&record_id=0&type_id=3&field_id=28&key=ccfa6882ad2f6028287e57e1242c9646 ', action_remove_file: ' http://www.classicromancerevival.com/index.php?option=com_cobalt&task=files.uploadremove&no_html=1 ', method: 'flash', tempname: '3c5ab', files:0, formname:'jform[fields][28][]', field_id:28, record_id:0, maxfilesize: 2097152, exts: ['zip','jpg','png','jpeg','gif'], maxFilesCount: 1, canDelete: 1, allowEditTitle: 1, allowAddDescr: 1, flash: { movie: ' http://www.classicromancerevival.com/media/mint/js/mooupload/Moo.Uploader.swf ' }, texts: { error : 'Error', file : 'File', filesize : 'File size', filetype : 'File type', nohtml5 : 'Not support HTML5 file upload!', noflash : 'Please install Flash 8.5 or higher version (Have you disabled FlashBlock or AdBlock?)', sel : 'Act', selectfile : 'Add files', status : 'Status', startupload: 'Start upload', uploaded : 'Uploaded', sure : 'Are you sure you want to delete?', edit_descr : 'Edit Description', edit_title : 'Edit Title' }, onFileDelete: function(error, filename){ if(error == '1016') { msg = 'File dosen\'t deleted: ' + filename; } if(error == '1017') { msg = 'File dosen\'t exist: ' + filename; } if(error) { var li = new Element('li', {text:msg}); $('errorslist'+this.options.tempname).grab(li); $('el'+this.options.tempname).show().slide('in'); } }, onSelectError: function(error, filename, filesize){ var msg = error; if(error == '1012') { msg = 'You have reached maximum number of allowed files to upload (1)'; } if(error == '1013') { msg = 'Extension of the file \' + filename + \' is not allowed'; } if(error == '1014') { msg = 'Uploaded file ' + filename + ' is smaller that minimum allows file size'; } if(error == '1015') { msg = 'Uploaded file ' + filename + ' is bigger that maximum allows file size'; } var li = new Element('li', {text:msg}); $('errorslist'+this.options.tempname).grab(li); $('el'+this.options.tempname).show().slide('in'); } }); });

Cover Ad Displays correctly:

<

div id="formelm_container3" class="formelm odd0 field-3">

Book Cover

The strange thing is that I have actually copied the default css and php and json to the reviews template, so they are identical. I can therefore only assume that the conflict / error lies with either the type, the fields or the section? I have compared the field settings in both the reviews and advertising types and they are identical.

I did see this in line 4 of the review code:

<

div id="el3c5ab" style="display: none;">

I have also looked at the actual page and it appears to be displaying only the borders of upload box?? I'm at a complete loss as to how identical templates can behave differently, but they appear to be calling two different scripts? If I compare them they are certainly different. I am desperate, and all help is appreciated, thank you

In desperation I reloaded both Cobalt and media mint and this seems to be resolved. Thank you for your efforts.