[SOLVED] News Scroller With Image

[govicinity]

1.11.1 "Baltra"
CGSmartImage 1.9.5
CGExtensions 1.31.1
JQueryTools 1.1.1
(Although all of these are currently being updated to the latest versions)

I have a news scroller based on the one from http://www.i-do-this.com/blog/21/Create ... cle-plugin which has worked wonderfully for ages, I am now updating my site and as the Supersizer plugin is stale in the Forge, and it doesn't work with the new versions of CMSMS I'd like to use Calguy's CGSmartImage, just having a bit of trouble getting my main news scroller image to work, everything else works wonderfully, any Ideas?

Code: Select all

<div class="sliderWrapper">
<div class="sliderInner">    
<div class="summaryImage">
{foreach from=$items item=entry}
{assign var=post value=$entry->id}
{assign var=file value=$entry->sliderbig}
<div style="width:749px;">
{if isset($entry->fieldsbyname.sliderbig)}
{CGSmartImage src='uploads/news/id$post/$file' filter_croptofit='749,350,c,upscale' alt=$entry->title|cms_escape:htmlall}
{/if}
</div>
{/foreach}
</div>
<div class="info">
<ul id="navigation">{foreach from=$items item=entry}{assign var=post value=$entry->id}
<li>
<h1><a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">{$entry->title|truncate:30|cms_escape}</a></h1>
<p>{if $entry->summary}{eval var=$entry->summary|truncate:40}
{else if $entry->content}{eval var=$entry->content|truncate:40}{/if}</p>
<p><a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">read more...</a></p>
</li>
{/foreach}</ul>
<ul id="all-news">
<li>
<h1><a href="{root_url}/news.html" title="All news stories">All news stories</a></h1>
</li>
</ul>
</div>
</div>
</div>

[velden]

Look at the sample news template; news entry has its own property with path to item specific files.

I happened to use this module today with news and after trying some unsuccesful options used the {capture} tag to construct and assign full path to image.

Then you can use the variable in cgsmartimage. Think it had to be enclosed by quotes. Can have a look tomorrow if you like.

[govicinity]

Hi Velden, yes, I'd be interested to see your thoughts, I've been looking at this for a couple of days now, and it's the only thing keeping me from taking this live now! Many thanks for your reply.

[cb2004]

Try putting a / before your uploads path, or remove uploads/

Unfortunately things were changed in newer versions and they haven't been documented.

[velden]

Two working examples:

1. check for existence of fields etc and then capture the 'creation' of the path into the variable 'sliderbigpath'. Use that variable in the CGSmartImage tag WITHOUT quotes

Code: Select all

{if isset($entry->fields)}
  {if !empty($entry->fields.sliderbig->value)}
    {capture name='sliderbig' assign='sliderbigpath'}{$entry->file_location}/{$entry->fields.sliderbig->value}{/capture}
    {CGSmartImage src=$sliderbigpath filter_resize='w,224' width='224' style='margin-left : -25px;'}

  {/if}
{/if}

2. after checking the existence of the proper variables use those directly in the CGSmartImage tag. Note the use of backticks (`) around the variables AND the use of DOUBLE quotes.

Code: Select all

{if isset($entry->fields)}
  {if !empty($entry->fields.sliderbig->value)}

{CGSmartImage src="`$entry->file_location`/`$entry->fields.sliderbig->value`" filter_resize='w,224' width='224' style='margin-left : -25px;'}

  {/if}
{/if}

In your code your doing some strange things in my opinion:

Code: Select all

{assign var=file value=$entry->sliderbig}

Does that variable really exist? Later you use (note 'fieldsbyname'):

Code: Select all

{if isset($entry->fieldsbyname.sliderbig)}

More chance thát does exist.

Code: Select all

{CGSmartImage src='uploads/news/id$post/$file' filter_croptofit='749,350,c,upscale' alt=$entry->title|cms_escape:htmlall

Creating the path to the file yourself might be a bad idea. '$entry->file_location' is there for you, use it.

Further, (not quite sure regarding smarty) variables inside SINGLE quotes are normally NOT evaluated.

Then the argument for the alt attribute: I guess it won't work this way. First it probably also needs the backticks but then I don't know whether the smarty modifier (cms_escape:htmlall) can be used.
Leave it away while testing, and if CGSmartImage works try some options. Or use a {capture} for that one (too).

[govicinity]

@ Velden, thanks for the help, now got the scroller working perfectly, the code used is below for anyone using the great news scroller tutorial (Create nice News Rotator with CMSMS News module and jQuery Cycle plugin) from http://www.i-do-this.com by Goran Ilic that wants to upgrade their old Supersizer plugin based scroller to the CGSmartImage version that will work on the most up-to-date versions of CMSMS (tested on 1.11.4).

Code: Select all

<div class="sliderWrapper">
<div class="sliderInner">   
<div class="summaryImage">
{foreach from=$items item=entry}
{assign var=post value=$entry->id}
{assign var=file value=$entry->sliderbig}
<div style="width:749px;">
{if isset($entry->fields)}
  {if !empty($entry->fields.sliderbig->value)}
    {capture name='sliderbig' assign='sliderbigpath'}{$entry->file_location}/{$entry->fields.sliderbig->value}{/capture}
{CGSmartImage src=$sliderbigpath filter_croptofit='749,350,c,upscale' alt=$entry->title|cms_escape:htmlall}
{/if}
{/if}
</div>
{/foreach}
</div>
<div class="info">
<ul id="navigation">{foreach from=$items item=entry}
{assign var=post value=$entry->id}
<li>
<h1><a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">{$entry->title|truncate:30|cms_escape}</a></h1>
<p>{if $entry->summary}{eval var=$entry->summary|truncate:40}
{else if $entry->content}{eval var=$entry->content|truncate:40}{/if}</p>
<p><a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">read more...</a></p>
</li>
{/foreach}</ul>
<ul id="all-news">
<li>
<h1><a href="{root_url}/news.html" title="All news stories">All news stories</a></h1>
</li>
</ul>
</div>
</div>
</div>

Thanks again Velden for your help.

P.S. Alt tag works on this too, so all good.

[velden]

Great to hear it all works now.

See some (assignments) which are not used anymore:

Code: Select all

{assign var=post value=$entry->id}
{assign var=file value=$entry->sliderbig}
...
<ul id="navigation">{foreach from=$items item=entry}
{assign var=post value=$entry->id}

Kind regards.

[govicinity]

Hi Velden, yes, those assignments have been removed (just) and it's all still working beautifully, thanks again.

[manuel]

Hi all,

One small remark: "upscale" should be "1".

Greetings,
Manuel

[OmarDoleymi]

hi how is everyone doing?

been reading this post for the past hour

I am new to CMSMS ... and I am having a problem with the news thing

I tried to implement what you guys suggested but it is not working for me... for some reason the image appears in the summary but not behind it... I know i am missing something lol but i have no clue what it is...

here is the link to the website I am trying to practice on ( I even bought my own domain/hosting for that lol)

http://doppiosolutions.com/web/index.ph ... eturnid=15


What I am trying to make my banners look like this

static web: http://greggchandds.com/

you see how the banner is rotating with a little description for each banner... (my problem in the previous link is I am not able to get the pictures to appear.. only the description and the content)
thanks in advance