Rotating Headline Pictures

[Micha]

Well here is how you can make your headlines rotation have images as background similar to attached image.

First, you need to know exact image width and height of your image that will go in headline rotation.
When you determine that, you need to edit three files:
templates/css/style.css
templates/content/headlines.tpl
templates/content/summary/headlines.xml.tpl

In your style.css file around line 219 you need to edit selector h1#headline_caption a.
Add these styles to mentioned selector:
position: absolute; padding: 0px 12px 0px 12px; z-index: 999;

(optional, you can also add a background color or change it’s original color because the title will be in front of headline image)

Next edit this id #headline_image and add following styles:
position: absolute; top: 0; left:0;

Now for headlines.tpl template, you need to edit <div id="headline_article" style="height:270px;"> and add preferred height to that div (in my case 270px).
For example if your image have height of 150px, you should put at least 170px height for headline article div in order for player to be visible.

Next you need to edit headlines.xml.tpl.
Remove lines 5, 6, 7:
<div class="article_date"><span id="headline_author">{AUTHOR}</span><span id="headline_created"> on {CREATED}</span></div>
<div id="headline_body">{BODY}</div>
<span><a id="headline_link" href="{LINK}">{LNG_HEADLINE_LINK}</a></span>

Place <h1 id="headline_caption"> inside of image containing div, and finally add style="position: relative;" to containing div, so that the entire template would look like this:
<div style="position: relative;">
<h1 id="headline_caption"><a href="{ROOT}{LINK}">{CAPTION_TITLE}</a></h1>
<a href="{LINK}"><img id="headline_image" src="{ROOT}files.php?file={IMAGE}" align="left" width="{IMAGE_WIDTH}" height="{IMAGE_HEIGHT}" alt="image" /></a>
</div>

Finally you need to go to your Vivvo administration control panel and set preferred headlines image width and height in your home page preferences.

[pcoskat]

VERY clever mod!

[MemoBony]

I like that too much, when I saw it I said YES! this exactly what I need in my Rotating Headline.
I have done everything fine, but nothing works good, the image I added not display, and the summery of the article also not.
Then I notice the image (rotating_headlines.jpg) where will you put this? In styles.css? where? I tried manythings to do, but nothing works good with me.

Please can you tell me that. And how to fix this problem?
Thank you.

[g m]

MemoBony
i think you have to check the image size in your admin ,
becouse if your image size larger than the size in headline.tpl it will not appear ...

Micha...

thanks about this great Idea .
i think about develope headline as flash to add alittel animation on images and news .. what is your opinion about this???

[Micha]

Micha...

thanks about this great Idea .
i think about develope headline as flash to add alittel animation on images and news .. what is your opinion about this???

I'm not so good at flash and action scripting, but I guess it's doable.

I tried to do this earlier, some examples with XML and some with action script, but unfortunately didn't came up with a good solution on how to do rotating headlines in flash.

[MemoBony]

MemoBony
i think you have to check the image size in your admin ,
because if your image size larger than the size in headline.tpl it will not appear ...

No my dear g m, I have in the image size in headline.tpl 270 and in the admin 150, but nothing works, and I tried to change that for different sizes, but always, no image (just small line of 1 px above the title) and no article summery.

By the way, is this actually one image in the background and just the article rotate or change? Or not, few images likes each others?

And heey g m, why do you think that the Flash is better that the normal Rotating Headline in Vivvo? I think this is much better than the Flash, because at least I know that the Flash is not supper for the Search Engines! isn't it?

Thanks all.

[GusLinares]

1st like to say thanks to Micha for suggesting this great mod.

I think there might be some errors in the example code above.

The {BODY} tag is missing in the code in lower example so no summary will appear.

Also I think more styles need to be added to create the transparent backgrounds for the text.

I am running V3.51 using red theme template - Here is how I got it working...

In style.css file around line 219 you need to edit selector h1#headline_caption a. Add/change these styles:


h1#headline_caption a {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: #990000;
position: absolute;
text-decoration: none;
margin: 12px 12px 0px 20px;
top: 10;
padding: 2px 4px 2px 4px;
z-index: 999;
background-color:#FFFFFF;
opacity: .85; /* Standard style for transparency */
-moz-opacity: .85; /* Transparency for older Mozillas */
filter: alpha(opacity=85); /* Transparency for IE */
}



Also add/change Body style:


#headline_body {
font-family: Arial, Helvetica, sans-serif;
position: absolute;
z-index: 999;
background-color:#FFFFFF;
margin: 186px 0px 0px 15px;
font-size: 11px;
font-weight: bold;
font-variant: normal;
line-height: 1.3em;
color: #000000;
padding: 2px;
width: 726px;
opacity: .80; /* Standard style for transparency */
-moz-opacity: .80; /* Transparency for older Mozillas */
filter: alpha(opacity=80); /* Transparency for IE */
}


And/change Image style:

#headline_image { margin: 0px 6px 0px 8px; border: 2px solid #990000; position: absolute; top: 10; left:10;}



I made the changes as above on headlines.tpl - this is what my headlines.tpl looks like:

<!-- headlines.tpl -->
<div id="{BOX_ID}" class="box_headline">
<div id="headline_article" style="height:230px;">
{ARTICLE_LIST}
</div>
<div class="player"> Headlines update every 30secs, use these buttons to change manually &raquo;
<a href="#" onclick='rotating_headlines.prev(); return false;' ><img src="{ROOT}templates/img/player_back.gif" border="0" id="back" alt="back" /></a>
<a href="#" onclick='rotating_headlines.pause(); return false;' id="pauza" ><img src="{ROOT}templates/img/player_pause.gif" border="0" id="pause" alt="pause" /></a>
<a href="#" onclick='rotating_headlines.next(); return false;'><img src="{ROOT}templates/img/player_forward.gif" border="0" id="forward" alt="forward" /></a>
</div>
</div>
<!-- end headlines -->



In headlines.xml.tpl I made the changes mentioned above by Micha and added the {BODY} tag. This is what my headlines.xml.tpl looks like:


<div style="position: relative;">
<h1 id="headline_caption"><a href="{ROOT}{LINK}">{CAPTION_TITLE}</a></h1>
<div id="headline_body">{BODY}<span><a id="headline_link" href="{LINK}">..{LNG_HEADLINE_LINK}</a></span></div>
<a href="{LINK}"><img id="headline_image" src="{ROOT}files.php?file={IMAGE}" align="left" width="{IMAGE_WIDTH}" height="{IMAGE_HEIGHT}" alt="image" /> </a>

</div>


In Vivvo administration control panel I set Max Image Width to: 760 - Max Image Height to 220 and Max No Of words to 40 or 30 (depending how long words in article are).

I then create new images with size 740 x 220 pixels and upload as abstract image to a headline article. Headlines should rotate as normal.

I also changed article_Full.tpl and added image width to 300 otherwise article will display the 740 image also in the article and it prob wont fit and mess up the page. Remember that this will set max image width size on all articles to 300 so change this value to whatever suits you.

This is my article image code line in article_Full.tpl:

<img src="{ROOT}files.php?file={ARTICLE_IMAGE}" alt="image" align="left" border="1" width="300"/>

You are free to use your own styles and image sizes just change values accordingly. Remember to backup your originals before you start your modifications.

Hope I haven't left anything out, having been racking my brains over this too long :-) - Good luck - you can see my finished version at www.vox.gi


G.

[MemoBony]

Hope I haven't left anything out, having been racking my brains over this too long :-) - Good luck - you can see my finished version at www.vox.gi


G.

You are great GusLinares, thank you too much to write all this to help me. I get the summery :D But unfortunatly the pictures still just a line, see the attachment. And then I tried to use exactly what you wrote, but it's the same result :p

I already saw your site, and the nice result of your work.

Thank you too much GusLinares again.

[GusLinares]

MemoBony - Remember that this is for V3.51.

If you are using this version PM me and copy your files and Ill take a look at them for you

G.

[Maky70]

Great work, Gus - your site looks now like the big ones :D

It's nice to see the endless options & features that you can achieve with Vivvo CMS, while others pay a lot more to get just some of what you've implemented on your site. As I said earlier, it all depends on your imagination and technical background in such tools.

I wonder how your site will look under Vivvo 4; maybe more attractive than *BC :eek:

Keep the good work ;)

[g m]

i tried the example like Micha it work but i forced the prob that you see Memo .
but it work with me now ..
Memo i think your image height me be didn't identified

please check this

<img id="headline_image" src="{ROOT}files.php?file={IMAGE}" align="left" width="{IMAGE_WIDTH}" height="{IMAGE_HEIGHT}" alt="image" />
you have to check height in admin
Max. image height on headlines
or you can edit it manual

change
height="{IMAGE_HEIGHT}"
to
height="200" for example
;) it have to work...
before you do this you can open your home page and view source code search for
id="headline_image"
check the height it may be =0

about flash its good in animation i saw in alot of websites i can send you some examples .. i think it will work with action script + xml

about searching engines i'll search for it and I will replay you Memo & Micha ,,,
with littel example ...

[MemoBony]

Thanks for all of you gentelmens.

Yes my dear GusLinares I have 3.51, and thanks the notice of g m I had a mistake with the spelling of HEIGHT and I change it and the picture is now apears fine, but still the summery text above the picture and not on it in the bottom of it, and behind the title. I will try to fix this problem, and if I cannot do it, then I will PM you GusLinares and I hope that this will not harm your time.

Thank you too much.

[g m]

hello
i already finished 80% Headlins as flash its to nice i just have alittle prob with link
but it look very cool.

i got data as xml then i import into swf file .

i will show my simple when i finished all things
Regards

[bandana]

How can I align the text and the photo so that they display correctly?

http://www.lankarates.com/

[Tobes]

Is there a way I can make this mod use a separate picture for the category page and article_full.tpl.

My rotating news only takes up 300 pixels on my home page, but my categories and full articles are 600 pixels, so to make all pages look nice, i would like to use separate size images for the home page rotating news, and then the full article and category page.

Can this be done.

Thanks

[Micha]

I think that this can be done with some PHP and template customizations.

You should contact Vivvo team and ask for this kind of customization.

[Tobes]

I have sent a ticket, you wouldnt be looking for any work Micha?

Thanks for replying to me.

Tobes