[Solved] Using images for carousel news section

[luya]

hello team,
My goal is to create a carousel based on the news template from CMSMS 2.x without relying on third party module. Rather than directly uploading the image, I would like to access to uploaded directory where I can chose.
Here is an extract of code

Code: Select all

<div class="uk-slidenav-position uk-margin-remove" data-uk-slideshow="{autoplay:true}">
	<ul class="uk-slideshow uk-text-center">
   	{foreach from=$items item=entry}
      <li>
      	<div class="uk-cover-background">
      		<img src="{$entry->file_location}/{$field->value}"/>
      	</div>
			<div class="csd-news-summary uk-overlay uk-overlay-background uk-position-cover uk-flex uk-flex-center uk-flex-middle uk-flex-column">
				<h4>{$category_label} {$entry->category}</h4>
				<h1 class="uk-heading-large uk-margin-large-bottom">Welcome to the<br class="uk-hidden-small"><a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">{$entry->title|cms_escape}</a> </h1>
				<a class="uk-button uk-button-large" href="http://www.pagekit.com">[{$entry->morelink}]</a>
    		</div>
    	</li>
    	{/foreach}
	</ul>
   <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
   <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
</div>

Granted that the call to set image for the carousel might be wrong, I was unable to get an effective methode. Thanks for the help.

[Jeff]

You can use a plain text field for the value. But unless you want to enter the image file name directly, you will probably need to use a custom Edit News Article template.

You will also need custom code in a UDT for making a dropdown of the images to pick or a module like JMFilePicker.

Since the images are already on the server, you probably won't use {$entry->file_location} since that is an unique folder for each article setup by the News module.

[luya]

First time I learned about JMFilePicker module which I installed. Since {$entry->file_location} is not exactly the right method, how to call the code by using the existing image from the server assuming JMFilePicker is already installed?

[Jeff]

As I went to setup a live example I noticed that even though the function is written in module it hasn't been registered in Smarty (I should have paid more attention when testing). So until the next version you will need a UDT wrapper.

Add a new Field Definition to the News Module of type "Text Input"

Create an UDT named "JMFP" with the following code:

Code: Select all

if($jmfp = cmsms()->GetModuleInstance('JMFilePicker')) 
{      
      echo $jmfp->CreateFilePickerInput( $jmfp, $params['id'],$params['name'], $params['value'], $params, $params['returnid'] );
}

Copy the editarticle.tpl from /modules/News/templates and paste it in /module_custom/News/templates.

Edit /module_custom/News/templates/editarticle.tpl and replace line 184 with the following code:

Code: Select all

                {if $field->prompt == 'FIELDNAME'}
                    {JMFP name=$field->nameattr value=$field->value dir='YOURDIR' }
                    {if !empty($field->value)} {$delete_field_val} <input type="checkbox" name="{$field->delete}" value="delete" />{/if}
                {elseif $field->type == 'textbox'}

For more params for the JMFP call read the JMFilePicker help.

Replace the FIELDNAME with the name of the Field Definition you created above.
Replace the YOURDIR with the directory you want to list/start at relative the /uploads/

In your detail template (you will have to adjust for the summary template) replace lines 115-117

Code: Select all

        {else}
          {$field->name}: {$field->value}
        {/if}

with

Code: Select all

        {elseif $field->name == 'FIELDNAME'}
            <img src="{uploads_url}/YOURDIR/{$field->value}"/>
        {else}
          {$field->name}:&nbsp;{$field->value}
        {/if}

Replace the FIELDNAME and YOURDIR as you did with editarticle.tpl.

[luya]

Thank you Jeff. Your tip worked displaying the browse field.
Edit:
I encountered an issue when trying to display the image within the carousel part on news summary.

Code: Select all

{if $field->name == 'Featured'}
<img src="{uploads_url}/images/{$field->value}"/>
{/if}

from

Code: Select all

<!-- Start Featured News Display Slide Template -->
<div class="uk-slidenav-position" data-uk-slideshow=" { autoplay:true } ">
<ul class="uk-slideshow uk-ovelay-active" data-uk-slideshow>
{foreach from=$items item=entry}
<li>
<a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">
{if $field->name == 'Featured'}
<img src="{uploads_url}/images/{$field->value}"/>
{/if}
<div class="uk-overlay-panel uk-overlay-bottom">
<h2 class="uk-heading-large">{$entry->title|cms_escape:htmlall}</h2>
<p class="uk-article-lead">{$entry->summary}</p>
</div>
</a>
</li>
{/foreach}
</ul>
</div>
<!-- End Featured News Display Slide Template -->

Fail to properly display when selecting mode="browse" from JMFP module. The solution is to leave out 'YOURDIR' (image in my example).