photobutton shortcode允许您创建带有照片缩略图的按钮。您可以使用红色或灰色背景创建水平和垂直按钮。
要创建这些按钮，只需创建一个photobutton，并在短代码中放置一个图像和一个链接。
版本1
水平按钮
垂直按钮
示例照片按钮
示例照片按钮
示例照片按钮
示例照片按钮
列中的按钮
如果你打算在列内使用照片按钮，你也可以使用“full-width”类。右边的按钮同时使用“全宽”和“垂直”。
属性
| 名字 | 可能的值 | 要求 | 笔记 |
|---|---|---|---|
| 类 | 红色的，lt-gray，水平，垂直，宽屏 | 是 | 你必须说明要么 水平或垂直 |
代码示例
[[photobutton class="vertical"] <img src=“/university-communications/wp-content/uploads/sites/144/2024/12/campus-aerial.jpg.0.2x.generic.jpg“ alt=”校园航拍照片”宽度="150“高度=”150" /> <a href="/university-communications/">样本照片按钮</a> [/photobutton]]
注意：版本1的照片按钮将改变其大小，以适应您提供的图像。如果你想让你的按钮是相同的大小，你需要确保你使用的所有图像都是相同的大小。
版本2
photobutton短代码的第二个版本仅用于高级页面模板。它与版本1的不同之处在于它需要不同的类，并且必须使用strong标记将标题与子标题分开。
属性
| 名字 | 可能的值 | 要求 | 笔记 |
|---|---|---|---|
| 类 | 版本2，双 | 是 | 你必须说明版本2．双将项的宽度加倍。 |
代码示例
[[photobutton class="version-2"] <img src="/university-communications/wp-content/uploads/sites/144/2024/12/campus-aerial.jpg.0.2x.generic.jpg" alt="Aerial Photo of Campus" width="150" height="150" /> <a href="/university-communications/"><strong>Sample</strong> Photo Button</a> [/photobutton]][[photobutton class="version-2"] <imgsrc=“/university-communications/wp-content/uploads/sites/144/2024/12/campus-aerial.jpg.0.2x.generic.jpg“ alt=”校园航拍照片”宽度="150“高度=”150" /> <a href="/university-communications/"><strong>Sample</strong> Photo Button</a> [/photobutton]]
注意：你必须确保在一个photobutton的结束和下一个photobutton的开始之间没有留下任何空格（参见上面的代码示例）。留下空格会增加条目之间的空间，这会妨碍它们正确地填充一行。
例子
示例代码
[[row][column class=“三分之一”][photobutton class=" Version -3"]<img src=“/university-communications/wp-content/uploads/sites/144/2024/12/042817_4879_Campus-Students.jpg.2.2x.generic.jpg“ alt=”学生在阳光明媚的一天在校园里坐在外面写字的照片” width="150" height="150" /> <a href=“/“>Photo Button Version 3</a>[/photobutton] [column class=”三分之一”][photobutton class=" Version -3"]<imgsrc=“/university-communications/wp-content/uploads/sites/144/2024/12/042817_4879_Campus-Students.jpg.2.2x.generic.jpg“ alt=”学生在阳光明媚的一天在校园里坐在外面写字的照片” width="150" height="150" /> <a href="/">Photo Button Version 3</a>[/photobutton] [/column][column class=" third"] [photobutton class=" Version -3"]<imgsrc=“/university-communications/wp-content/uploads/sites/144/2024/12/042817_4879_Campus-Students.jpg.2.2x.generic.jpg“ alt=”学生在阳光明媚的一天在校园里坐在外面写字的照片” width="150" height="150" /> <a href="/">照片按钮版本3</a>[/photobutton] [/column][/row]]