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 01-06-2013 15:00:42

Robby Master
Member
Registered: 28-05-2013
Posts: 2

How to put html with many links in a block tile

Hi Thomas

Actually, it is impossible to put html with links in a block tile 'simple' or 'custom'.

In your html code, your block begins by a tag '<a ... >' and it's ends by a tag '</a>'.
In this case it is impossible to insert links

I would linke to insert this kind of html code :
<div>
    <img src="..." title="..." alt="..." style="...">_A_Name<br>
    <a href="link1.php">Link 1</a> <br>
    <a href="link2.php">Link 2</a> <br>
    <a href="link3.php">Link 3</a> <br>
</div>

How can i do ?

Thank you :-)

Offline

#2 01-06-2013 20:52:34

Emil
Moderator
From: in a shipyard
Registered: 15-03-2013
Posts: 106

Re: How to put html with many links in a block tile

the code does not have to use the a tag. change it to div tag where you need it (the tile will not be a link anymore but you'll be able to use links in the tile)


Good advice is often confusing, but example is always clear.

Offline

#3 01-06-2013 21:24:53

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

Re: How to put html with many links in a block tile

EDIT: See post underneath for an easier fix. That will sometimes work

You need to create "your own tile plugin" to do that. And instead of using an a tag for the tile, use a div. (you wont be able then ofcourse to make the tile clickable)

To do that, you need to copy paste the code of the tile you need and edit it. The code of some tiles is in inc/tilefunctions.php . The code of the other, more complicated tiles, is in plugins/*thefolder*/plugin.php and plugin.js and plugin.css

So I'll use the "simple tile" as example:

The code for that tile is in inc/tilefunctions.js . Just scroll a bit and you'll find:

$tileTypes['simple'] = array( /* Defaults*/
	"group"=>0,
	"x"=>0,
	"y"=>0,
	'width'=>2,
	'height'=>1,
	"background"=>$defaultBackgroundColor,
	"url"=>"",
	"title"=>"The title",
	"text"=>"the description text",
	"img"=>"",
	"imgSize"=>"50",
	"imgToTop"=>"5",
	"imgToLeft"=>"5",
	"labelText"=>"",
	"labelColor"=>$defaultLabelColor,
	"labelPosition"=>$defaultLabelPosition,
	"classes"=>"",
);
function tile_simple($group,$x,$y,$width,$height,$background,$url,$title,$text,$img,$imgSize,$imgToTop,$imgToLeft,$labelText,$labelColor,$labelPosition,$classes){
	global $scale, $spacing, $scaleSpacing, $groupSpacing;
    
	$marginTop = $y*$scaleSpacing+getMarginTop($group);
	$marginLeft = $x*$scaleSpacing+getMarginLeft($group);
	$tileWidth = $width*$scaleSpacing-$spacing;
	$tileHeight = $height*$scaleSpacing-$spacing;
	if($img == ""){
		$hasImg = 0;
	}else{
		$hasImg = 1;
	}
	?>
  	<a <?php echo makeLink($url);?> class="tile group<?php echo $group?> <?php echo $classes?>" style="
    margin-top:<?php echo $marginTop;?>px; margin-left:<?php echo $marginLeft;?>px;
	width:<?php echo $tileWidth?>px; height:<?php echo $tileHeight?>px;
	background:<?php echo $background;?>;" <?php posVal($marginTop,$marginLeft,$tileWidth);?>> 
    <?php if($img != ""){?>
    <img style='float:left; margin-top:<?php echo $imgToTop?>px;margin-left:<?php echo $imgToLeft?>px;' 
    src='<?php echo $img?>' height="<?php echo $imgSize?>" width="<?php echo $imgSize?>"/>
    <?php } ?>
	<div class='tileTitle' style='margin-left:<?php echo ($imgSize+$imgToLeft)*$hasImg+10;?>px;'><?php echo $title?></div>
	<div class='tileDesc' style='margin-left:<?php echo ($imgSize+$imgToLeft)*$hasImg+12;?>px;'><?php echo $text?></div>
    <?php
    if($labelText!=""){
		if($labelPosition=='top'){
			echo "<div class='tileLabelWrapper top' style='border-top-color:".$labelColor.";'><div class='tileLabel top' >".$labelText."</div></div>";
		}else{
			echo "<div class='tileLabelWrapper bottom'><div class='tileLabel bottom' style='border-bottom-color:".$labelColor.";'>".$labelText."</div></div>";
		}
	}?> 
    </a>
    <?php
}

Now, we'll create a new plugin called "tilesimplediv" . This can be done by going to your /plugins folder and adding a folder called "tilesimplediv" and inside that folder, create a file plugin.php .

Then we'll add the code for the modified tile. We use the code of the tileSimple, but need to change some things. We need to change the name (otherwise there are 2 tiles that are called as a "simple" tile and it'll mess up. This must be done in the first line and the line where the php function is defined. And we need to change the a tag into a div tag.

$tileTypes['simpleDiv'] = array( /* Defaults*/
	"group"=>0,
	"x"=>0,
	"y"=>0,
	'width'=>2,
	'height'=>1,
	"background"=>$defaultBackgroundColor,
	"url"=>"",
	"title"=>"The title",
	"text"=>"the description text",
	"img"=>"",
	"imgSize"=>"50",
	"imgToTop"=>"5",
	"imgToLeft"=>"5",
	"labelText"=>"",
	"labelColor"=>$defaultLabelColor,
	"labelPosition"=>$defaultLabelPosition,
	"classes"=>"",
);
function tile_simpleDiv($group,$x,$y,$width,$height,$background,$url,$title,$text,$img,$imgSize,$imgToTop,$imgToLeft,$labelText,$labelColor,$labelPosition,$classes){
	global $scale, $spacing, $scaleSpacing, $groupSpacing;
    
	$marginTop = $y*$scaleSpacing+getMarginTop($group);
	$marginLeft = $x*$scaleSpacing+getMarginLeft($group);
	$tileWidth = $width*$scaleSpacing-$spacing;
	$tileHeight = $height*$scaleSpacing-$spacing;
	if($img == ""){
		$hasImg = 0;
	}else{
		$hasImg = 1;
	}
	?>
  	<div class="tile group<?php echo $group?> <?php echo $classes?>" style="
    margin-top:<?php echo $marginTop;?>px; margin-left:<?php echo $marginLeft;?>px;
	width:<?php echo $tileWidth?>px; height:<?php echo $tileHeight?>px;
	background:<?php echo $background;?>;" <?php posVal($marginTop,$marginLeft,$tileWidth);?>> 
    <?php if($img != ""){?>
    <img style='float:left; margin-top:<?php echo $imgToTop?>px;margin-left:<?php echo $imgToLeft?>px;' 
    src='<?php echo $img?>' height="<?php echo $imgSize?>" width="<?php echo $imgSize?>"/>
    <?php } ?>
	<div class='tileTitle' style='margin-left:<?php echo ($imgSize+$imgToLeft)*$hasImg+10;?>px;'><?php echo $title?></div>
	<div class='tileDesc' style='margin-left:<?php echo ($imgSize+$imgToLeft)*$hasImg+12;?>px;'><?php echo $text?></div>
    <?php
    if($labelText!=""){
		if($labelPosition=='top'){
			echo "<div class='tileLabelWrapper top' style='border-top-color:".$labelColor.";'><div class='tileLabel top' >".$labelText."</div></div>";
		}else{
			echo "<div class='tileLabelWrapper bottom'><div class='tileLabel bottom' style='border-bottom-color:".$labelColor.";'>".$labelText."</div></div>";
		}
	}?> 
    </div>
    <?php
}

If you add this code to the file plugin.php, you should be able to call the tile using "simpleDiv" (instead of just "simple") and add the anchor tags into it smile

Offline

#4 02-06-2013 10:13:45

Robby Master
Member
Registered: 28-05-2013
Posts: 2

Re: How to put html with many links in a block tile

Thank you a lot

I have also an simple alternative (founded by hazard) :
This code below works in a custom block (Simply insert html code into <table>)

  <table>
  <tr>
    <td valign="top"><img src="..."></td>
   
    <td valign="top">
        A text here<br>
        <a href="link1.php">link 1</a>
        <a href="link2.php">link 2</a>
        <a href="link3.php">link 3</a>
        <a href="link4.php">link 4</a>
    </td>
   
    </tr>
  </table>


Robby :-)

Offline

#5 09-04-2014 21:31:34

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

Re: How to put html with many links in a block tile

The table method works however only if the original parent tile is in the first group (or second group).   If the tile is in a group that involves a shift of the viewport, then the content of a pop will shift will show offscreen.

Offline

#6 09-04-2014 22:16:42

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

Re: How to put html with many links in a block tile

I have tried creating a new simpleDiv tite as well. That worked as well.

However, my popup always appears centred to the first group (group 0) viewport.   If I click a tile in a group to the right (i.e. group 1, group 2) it will disappear to the left.   How do I recalculate the width of all groups?   I need to center to the full width of all groups horizontally (or to a specific group).   For example, if I am on group2, how do I center a popup to group2?


This sample tile (in the demo):

$tile[] = array("type"=>"slidefx","group"=>1,"x"=>0,"y"=>1,'width'=>2,'height'=>1,"background"=>"#333","url"=>"external:img/metro_slide.png",
    "text"=>"Click to see in full","img"=>"img/metro_slide_300x150.png","classes"=>"lightbox"
);

does center to the group/screen regardless of which group.   How is this done?  I would like my video popup to do the same.

Last edited by rsalomone (10-04-2014 16:22:13)

Offline

#7 10-04-2014 20:35:50

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

Re: How to put html with many links in a block tile

Position it "fixed" and it will stay on the screen like it should.

Offline

#8 11-04-2014 16:30:04

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

Re: How to put html with many links in a block tile

Thomas, your suggestion worked for desktop mode!  Thank you.

I will need to do more work with the tablet as I still cannot seem to position "Pages" on the center of the viewport.   I end up having to swipe it into view.








BTW: For people that need this,  I used prettyPhoto (a jquery lightbox clone) for video, picture popups!
Download here:  http://www.no-margin-for-errors.com/pro … box-clone/

Offline

Board footer

Powered by FluxBB