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

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

Go to page Previous 1, 2, 3

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
Go to page Previous 1, 2, 3


Jump to: