像url预览等内容 [英] Fomating content like url preview
问题描述
我正在尝试创建自己的网址预览。就像facebook所示。
回声< a href =; echo $ url;回声 /> 中; echo $ title_display;回声< / a>; //显示网址和标题说明
回显< / br>;
echo< img src ='; echo $ logo; echo'height = '84'width = '66'>; //在页面上显示图片
$ content = plaintext（$ data）;
$ Preview = trim_display（100，$ content）; //显示网页的前100个字符作为预览
echo $ Preview;
echo< a href =; echo $ url; echotarget = _blank />;回声See More;回声< / a>; //查看更多链接去那个页面
但是这里的格式不合适。
如何在一个包含的框中显示整个事物。
-
第一个标题desc和它的url即
echo< a href =; echo $ url;回声 /> 中; echo $ title_display;回声< / a>; //显示网址和标题说明 -
下方图片位于框左侧（可以带div）
- 预览即图像右侧的小100字符描述。
与输入网址时Facebook所显示的图片预览方式完全相同。 h2_lin>解决方案
这是一个更好的书面模块。如果你可以用1来做，你不必使用那么多回声。
echo'< div id =box >
< a href ='。$ url。'>'。$ title_display。'< / a>'; //显示网址和标题描述
echo'< br />
< div>
< img src ='。$ logo。'height =84width =66style =float：left;>'; //在页面上显示图片
$ content = plaintext（$ data）;
$ Preview = trim_display（100，$ content）; //显示网页的前100个字符作为预览
echo'< p style =float：left;>'。$ Preview。'< / p>';
echo'< / div>
< a href ='。$ url。'target =_ blank/>查看更多< / a>'; //请参阅更多链接去该页面
echo'< / div>';
您可以在它周围设置一个 div 一个 id （框），这样您就可以使用 css 更改外观。
图片和 $ preview 围绕 div / code>。
a float：left; 在图片和< ; p> 围绕 $预览
：
要编辑整个框，您可以使用
#box {height：..;宽度：..; } / *完整框的高度和宽度* /
/ * float：left;在css文件中比在示例中的内联代码更好* /
#box img {float：left;} / * for image * /
#box p {float：left; width：300px;} / *为p标记* /
| --------------------------＃box （400像素）-------------------------- |
| |
| | --------------- | | --------------------------------------- | |
| | | | | |
| | IMG | | < p为H. | |
| | | |向左飘浮; | |
| | float：left | |宽度：300像素; | |
| | | | | |
| | | | | |
| | --------------- | | --------------------------------------- | |
| |
| --------------------------------------------- ------------------- |
因为#box是400像素，图像小于100像素，$预览可以像300像素。
，因为 100 + 300 = 400px （使用 float：left; ），它应该彼此相邻。
您可以在图片上使用margin-right：5px; 在图片和文字 strong> OR margin-left：5px; < p>
I am trying to create my own url preview. Like facebook shows. Dont want to use readymade script.
Here I go:
echo "<a href="; echo $url; echo"/>"; echo $title_display; echo "</a>"; //show url and title description
echo "</br>";
echo "<img src='"; echo $logo; echo "'height='84' width='66' >"; // shows image on the page
$content = plaintext($data);
$Preview = trim_display(100,$content); //to Show first 100 char of the web page as preview
echo $Preview;
echo " <a href="; echo $url; echo " target=_blank />"; echo "See More"; echo "</a>"; // See more link to go on that page
But here formatting is not appropriate.
How can I show entire things in one box whic contains.
first title desc and it's url i.e.
echo "<a href="; echo $url; echo"/>"; echo $title_display; echo "</a>"; //show url and title descriptionBelow it Image on left side of box (can take div for that)
- Preview i.e. small 100 char description on right side of image.
Exactly same way as image preview shown by facebook when URL is entered.
This is all ready a better written block. You dont have to use that much of echo's if you can do it with 1.
echo '<div id="box">
<a href="'.$url.'">'.$title_display.'</a>'; //show url and title description
echo'<br />
<div>
<img src="'.$logo.'" height="84" width="66" style="float:left;">'; // shows image on the page
$content = plaintext($data);
$Preview = trim_display(100,$content); //to Show first 100 char of the web page as preview
echo '<p style="float:left;">'.$Preview.'</p>';
echo '</div>
<a href="'.$url.'" target="_blank" />See More</a>'; // See more link to go on that page
echo '</div>';
You can set a div around it with an id (box), that way you can change the look with css.
And a div around the image and $preview.
a float:left; on the image and the <p> around $preview
Update after comment:
To edit the complete box, you can use
#box{ height: .. ; width: .. ; } /*For the height and width of the complete box */
/* float:left; in the css file is better than inline code like in the example */
#box img { float:left;} /* for the image */
#box p { float:left; width:300px;} /* for the p tag */
|--------------------------#box (400px)--------------------------|
| |
| |---------------| |---------------------------------------| |
| | | | | |
| | IMG | | <p> | |
| | | | float:left; | |
| | float:left | | width:300px; | |
| | | | | |
| | | | | |
| |---------------| |---------------------------------------| |
| |
|----------------------------------------------------------------|
Because the #box is 400px, the image is smaller than 100px, can the $preview be like 300px.
and because 100 + 300 = 400px (with the float:left;) it should fit next to each other.
You can create a gab between the image and text with margin-right:5px; on the image OR margin-left:5px; on the <p>
这篇关于像url预览等内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
