Dragonfly CMS v9 ⇒ Themes v9 ⇒ How do i create rotating images in my theme? ⇒ Community Forums ⇒ CPG Dragonfly™ CMS
Forum IndexThemes v9

How do i create rotating images in my theme? Reply to topic


Revisited this thread to see how to create rotating header images in V10?

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Litespeed/Apache2.4.23/MySQL5.5.42/PHP 5.6.25/DF 9.4.0.0


CSS:

.sitelogo img { float:left; margin:0 4px; height:109px; transition: all 1.0s ease-in-out; transform-origin:100px 50px; } .sitelogo:hover img { transform: rotate(360deg); }

Template:

<a class="sitelogo" tal:attributes="href php:\URL::index('/')"><img tal:attributes="src '${S_STATIC_DOMAIN}images/${S_LOGO}'; alt S_SITENAME; title S_SITENAME"/></a>

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):


No my bad wording, example below in V9.4, I have 2 image areas that change when refresh as per this thread, not rotate as in 360Deg

www.nova-outpost.com

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Litespeed/Apache2.4.23/MySQL5.5.42/PHP 5.6.25/DF 9.4.0.0


You mean a slideshow like: www.cssplay.co.uk/menu...eshow.html

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Fedora 25 / Apache 2.4.27 / MariaDB 10.1.26 / PHP 7.1.10 / Mercurial


DJ Maze wrote
You mean a slideshow like: www.cssplay.co.uk/menu...eshow.html


No images change when refresh, logo1, logo2, logo3 as shown in url above or my www in profile

I used the code from page 2 of this thread to create
Theme Code
// random image at top in header $array = array('LogoA_01.jpg', 'LogoA_02.jpg', 'LogoA_03.jpg', 'LogoA_04.jpg', 'LogoA_05.jpg', 'LogoA_06.jpg', 'LogoA_07.jpg', ); $image = rand(0, count($array)-1);

Header.html Code
<td class="headfeatureimg" align="left"><img src="{THEME_PATH}/images/random/{RAND_IMG}" alt="Nova-Outpost" /> </td>

Rough snippet of the code

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Litespeed/Apache2.4.23/MySQL5.5.42/PHP 5.6.25/DF 9.4.0.0


In theory this still should work if your theme isn't changed to v10.
Else look at:

themes/*/theme.php
function themeheader() { // original code here // random image at top in header $array = array('LogoA_01.jpg', 'LogoA_02.jpg', 'LogoA_03.jpg', 'LogoA_04.jpg', 'LogoA_05.jpg', 'LogoA_06.jpg', 'LogoA_07.jpg', ); $OUT->random_image1 = $array[rand(0, count($array)-1)]; }

themes/*/html/header.xml
<td class="headfeatureimg" align="left"> <img tal:attributes="src 'cdn://theme/images/random/${random_image1}'" alt="Nova-Outpost" /> </td>

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Fedora 25 / Apache 2.4.27 / MariaDB 10.1.26 / PHP 7.1.10 / Mercurial

Last edited by DJ Maze on Wed Dec 07, 2016 1:26 pm; edited 3 times in total


Almost there
www.nova-outpost.com/D...me=DF_Blue

The header lists images under each other not beside

<nav class="main" onclick="" itemscope="" itemtype="http://schema.org/SiteNavigationElement"> <ul tal:replace="structure S_MAIN_MENU"> <li><a href="index.php">Home</a></li> <li><a href="?admin"><b>»</b> Admin <b>«</b></a></li> </ul> <span tal:condition="CONFIG/global/banners" style="float:right" tal:content="structure S_BANNER">{S_BANNER}</span> <td class="headfeatureimg" align="left"> <img tal:attributes="src 'cdn://theme/images/random/${random_image1}'" alt="Nova-Outpost" /> </td> <a class="sitelogo" tal:attributes="href php:\URL::index('/')"><img tal:attributes="src '${S_STATIC_DOMAIN}images/${CONFIG/global/site_logo}'; alt CONFIG/global/sitename; title CONFIG/global/sitename"/></a> <td class="headfeatureimg" align="right"> <img tal:attributes="src 'cdn://theme/images/random2/${random_image1}'" alt="Nova-Outpost" /> </td></nav>

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Litespeed/Apache2.4.23/MySQL5.5.42/PHP 5.6.25/DF 9.4.0.0


Put them outside the <nav> evelement

<nav class="main" onclick="" itemscope="" itemtype="http://schema.org/SiteNavigationElement"> <ul tal:replace="structure S_MAIN_MENU"> <li><a href="index.php">Home</a></li> <li><a href="?admin"><b>»</b> Admin <b>«</b></a></li> </ul> </nav> <header> <img tal:attributes="src 'cdn://theme/images/random/${random_image1}'" alt="Nova-Outpost" /> <a class="sitelogo" tal:attributes="href php:\URL::index('/')"><img tal:attributes="src '${S_STATIC_DOMAIN}images/${CONFIG/global/site_logo}'; alt CONFIG/global/sitename; title CONFIG/global/sitename"/></a> <img tal:attributes="src 'cdn://theme/images/random2/${random_image1}'" alt="Nova-Outpost" /> </header> <span tal:condition="CONFIG/global/banners" style="float:right" tal:content="structure S_BANNER">{S_BANNER}</span>

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Fedora 25 / Apache 2.4.27 / MariaDB 10.1.26 / PHP 7.1.10 / Mercurial

Last edited by DJ Maze on Fri Dec 09, 2016 9:16 am; edited 2 times in total


I had to change the code for logo to sit in the center
Now the header is outside the </nav> i get a gap between the nav and header

ps Thanks for the help Smile

<div class="header" align="center"> <img tal:attributes="src 'cdn://theme/images/random/${random_image1}'" alt="Nova-Outpost" style="float:left;" /> <a class="sitelogo" tal:attributes="href php:\URL::index('/')"><img tal:attributes="src '${S_STATIC_DOMAIN}images/${CONFIG/global/site_logo}'; alt CONFIG/global/sitename; title CONFIG/global/sitename" /></a> <img tal:attributes="src 'cdn://theme/images/random2/${random_image1}'" alt="Nova-Outpost" style="float:right;" /> </div>
Attachment: header.jpg
Description
Filesize 92.46 KiB
Viewed 2 Time(s)
You are not allowed to view/download this attachment

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Litespeed/Apache2.4.23/MySQL5.5.42/PHP 5.6.25/DF 9.4.0.0

Last edited by BobCat on Sat Dec 10, 2016 12:55 am; edited 1 time in total


Remove
nav.main { margin-bottom: 16px; }

Add
.header { height: 13vw; max-height: 150px; text-align: center; } .header img { height: 100%; }

Then resize the width of your browser to see what "13vw" does 😀

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Fedora 25 / Apache 2.4.27 / MariaDB 10.1.26 / PHP 7.1.10 / Mercurial

Last edited by DJ Maze on Sat Dec 10, 2016 10:37 am; edited 3 times in total

All times are UTC


Jump to: