You are not logged in.

Announcement

Forum database was corrupt and an old backup was restored as temporary replacement. Registrations closed until the database is recovered. Please ask questions using the Contact form

#1 23-05-2014 16:59:20

rsalomone
Contributors
Registered: 22-11-2013
Posts: 101
Website

Autosizing images on tiles

I have a 300x150 (double width) image on a "slidefx" tile.    It works great on desktops.

$tile[] = array("type"=>"slidefx","group"=>0,"x"=>0,"y"=>0,'width'=>2,'height'=>1,"background"=>"#000","url"=>"#!/url=welcome.php"
    "text"=>"Learn more about us!","img"=>"images/rsilogo.jpg","classes"=>""
);

However,  I test for a smaller screen (i.e. tablet) with some basic code and readjust the dimensions of tiles (making them smaller) for better display on smaller screens.

Most of the tile images for other tiles resize well.   I cannot seem to make it work for slidefx.    Is there a way to make the image resize?

rs

Offline

#2 23-05-2014 22:17:10

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Autosizing images on tiles

The slidefx has some hardcoded values in plugins/tileslidefx/plugin.css

I modified it now so it should scale well. https://www.dropbox.com/s/smxhhee28jcidow/plugin.css

Please let us know if it works.

Offline

#3 26-05-2014 18:38:38

rsalomone
Contributors
Registered: 22-11-2013
Posts: 101
Website

Re: Autosizing images on tiles

Thomas,

The image is now uncut.  But this only resolves half the issue.

I wrote this custom.php that executes at the beginning...

[== PHP ==]
if($device=="tablet"){
   $scale = 123; // size of 1 tile of 1x1, in px
   $spacing = 2; // space between tiles, in px
   
   $maxPageWidth=768; // max width of page in px

   $panelDim = 0; // dim the screen when a sidepanel is opened, set to 0 or false to disable, set to a value between 0 and 1 to define the opacity
   $panelGroupScrolling = true; // should it be possible to scroll gruops when the panel is opened? If set to false, the middlemouse scroll won't trigger the 
}

The tiles do get resized properly.   However, the image remains at 300px x 150px  (2:1).    It does not resize the image to the new $scale of 246px x 123px.

With the new fix,  I now have an image that is cut at the bottom and to the right by the amount of pixels (54px x 27px missing) rather than resizing.

Regards,
rs

Last edited by rsalomone (26-05-2014 18:39:38)

Offline

#4 26-05-2014 19:55:06

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Autosizing images on tiles

Should be fixed by using this css:

But... since you're aiming at tablets, maybe it's easier/better to just apply the normal slide tile (instead of fx) for tablets only?

if($device=="tablet"){
// tile for tablet

}else{
// tile for desktop
}

.tileSlideFx>.slideText {
	width: 30%; /*area available for text */
}
.tileSlideFx .s2, 
.tileSlideFx .s3,
.tileSlideFx .s4 {
	margin-left: 100%;
}
.tileSlideFx .s1 {
	background-position: 0px 0px;
}
.tileSlideFx .s2 {
	background-position: -25% 0px;
}
.tileSlideFx .s3 {
	background-position: -50% 0px;
}
.tileSlideFx .s4 {
	background-position: -75% 0px;
}
/* DO NOT CHANGE */
.tileSlideFx{
	-moz-perspective: 500px;
}
.tileSlideFx.hovered{
	-webkit-perspective: 500px;
	-moz-perspective: 500px;
	-o-perspective: 500px;
	-ms-perspective: 500px;
	perspective: 500px;
	overflow:visible;
}
.tileSlideFx .slice{
	width: 25%;
	height: 100%;
	z-index: 10;	
	outline: 1px solid transparent;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;

	background-size:400% 100%;	
}
.tileSlideFx.hovered .slice{
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;	
	-ms-transition: -ms-transform 200ms;	
	-webkit-transition: -webkit-transform 200ms;	
	-o-transition: -o-transform 200ms;	
	-moz-transition: -moz-transform 200ms;	
	transition: transform 200ms;
}
.tileSlideFx>.slideText {
	position: absolute;
	right: 0;	height: 100%;
	display: block;
	float: right;
	padding: 5px 20px 5px;
	text-align: right;
	font-size: 16px;
	z-index: 0;
}
.tileSlideFx .overlay {
	width: 25%; 
	height: 100%;
	opacity: 0;
	position: absolute;	
}
.tileSlideFx:hover .overlay {
	opacity: 1;
}
.tileSlideFx>.imgWrapper{
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
}
.tileSlideFx img {
	position: absolute;
	z-index:1;
	width:100%;
	height: 100%;
}
.tileSlideFx .overlay{
	-webkit-transition: opacity 200ms;
	-moz-transition: opacity 200ms;
	-o-transition: opacity 200ms;
	-ms-transition: opacity 200ms;
	transition: opacity 200ms;
}
.tileSlideFx.hovered:hover .s2{
	z-index:101;
	margin-left:99%;
	-webkit-transform: rotate3d(0,1,0,-63deg);
	-moz-transform:  rotate3d(0,1,0,-63deg);
	-o-transform:  rotate3d(0,1,0,-63deg);
	-ms-transform:  rotate3d(0,1,0,-63deg);
	transform:  rotate3d(0,1,0,-63deg);
}
.tileSlideFx.hovered:hover .s3{
	z-index:101;
	margin-left:99%;
	-webkit-transform:  rotate3d(0,1,0,126deg);
	-moz-transform:  rotate3d(0,1,0,126deg);
	-o-transform:  rotate3d(0,1,0,126deg);
	-ms-transform:  rotate3d(0,1,0,126deg);
	transform:  rotate3d(0,1,0,126deg);
}
.tileSlideFx.hovered:hover .s4{
	z-index:101;
	margin-left:99%;
	-webkit-transform:  rotate3d(0,1,0,-126deg);
	-moz-transform:  rotate3d(0,1,0,-126deg);
	-o-transform:  rotate3d(0,1,0,-126deg);
	-ms-transform:  rotate3d(0,1,0,-126deg);
	transform:  rotate3d(0,1,0,-126deg);
}
.tileSlideFx.hovered .s1 > .overlay {
	background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
	background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}
.tileSlideFx.hovered .s2 > .overlay {
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
	background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
	background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
	background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
}
.tileSlideFx.hovered .s3 > .overlay {
	background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
	background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
	background: -o-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
	background: -ms-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
	background: linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
}
.tileSlideFx.hovered .s4 > .overlay {
	background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}

Offline

#5 26-05-2014 20:01:03

rsalomone
Contributors
Registered: 22-11-2013
Posts: 101
Website

Re: Autosizing images on tiles

Thomas,

That worked great!

I suspect a similar fix may be required for some of the images on the other tiles.   

Great work.

rs

Offline

#6 14-07-2014 15:12:08

WimLo
Contributors
Registered: 27-06-2014
Posts: 1

Re: Autosizing images on tiles

If I create a new page , say a copy of the welcome page and would like to add an image on it, the image is not an tile-image, but just an image next to the text. How do I auto resize this when I want to have this page also on my mobile version without having to create a page without the image or manually have a resized image in it?

Offline

Board footer

Powered by FluxBB