Drupal 7中的视图,视图幻灯片和分页


8

情况如下:我有一个内容类型“幻灯片”,我想在幻灯片中显示三个最新的幻灯片。幻灯片需要循环,并且幻灯片也需要由寻呼机控制。寻呼机应具有三个项目符号/链接/图像,以便能够跳转到幻灯片中的特定幻灯片。传呼机还应具有左右箭头,用于在幻灯片放映中递增和递减幻灯片。

这项技术在网络上无处不在,但是我似乎无法弄清楚如何使用“视图”和“视图幻灯片”正确设置此技术。我们欢迎所有经验丰富的Drupalites提出任何建议。

干杯,莱斯。

Answers:


14

(1)必需的模块(版本:Drupal7.0)

Views
Views Slideshow
Chaos tool suite
Libraries
Link Field
Token

(2)安装模块

在Drupal7中,您可以从admin部分安装模块,但是我仍然觉得这个新功能没有任何意义,因为我们必须在Druapl站点中搜索模块链接,然后将粘贴复制到admin模块安装区域中。疯。如果他们能够像wordpress这样的小搜索功能,那就太好了。无论如何,我只是要以旧方式下载并安装它(我仍然建议采用这种旧方式)。

从Drupal站点下载所有模块,并将其安装在yoursitename / sites / all / modules目录中。转到http://www.yoursitename.com/node#overlay=admin/modules并启用以下模块;

(1)视图(2)视图UI(3)视图幻灯片(4)视图幻灯片:循环(5)混沌工具(6)链接(7)库(8)令牌(可选)(3)创建图像缓存

在Drupal7中,图像缓存是核心模块的一部分,并被称为图像样式。因此,让我们从此处创建两个图像缓存,一个用于全尺寸滑块图像,另一个用于缩略图图像。在本教程中,我将935x293(像素)尺寸用于全尺寸滑块图像,并将210x100(像素)尺寸用于缩略图图像。注意:这些配置csn延迟取决于您的需要。

  • 全尺寸滑块图像设置

转到http://www.yoursitename.com/node#overlay=admin/config/media/image-styles并单击“添加新样式”链接(1)指定图像样式名称,然后单击“创建新样式”按钮(2 )在下一个配置屏幕上,选择所需的新样式,然后单击添加按钮(在本教程中,我选择调整大小样式)(3)在下一个屏幕上,设置宽度和高度,然后单击添加效果按钮。(设置可能会因您选择的样式而异)。我将宽度设置为935,将高度设置为293像素。

对缩略图图像也执行相同的过程。(对于缩略图尺寸,我将宽度设置为210,将高度设置为100像素。)(4)创建新的内容类型

让我们创建一个新的内容类型,在“仪表盘”菜单栏中,单击“结构”,然后单击内容类型,然后单击“添加新的内容类型”链接。

(1)给出一个易于理解的名称,我将其命名为Featured Slider(机器名称将根据该可读名称自动生成)(2)给出简短而相关的描述(3)提交表单设置,我保留为默认设置(4)发布选项,我仅选中了已发布(所有其他设置均未选中)(5)显示设置,我未选中身份验证和日期信息。(6)注释设置,我设置为隐藏(禁用)。(7)菜单设置,我保留为默认设置。(8)单击“保存并添加字段”按钮(5)创建新字段

在此示例中,我仅创建两个字段,它们是图像字段和链接字段。我们将使用图像字段上载我们的滑块图像,并使用链接字段来创建一个我们希望链接滑块的自定义链接。

图像场设置

(1) Label: Slider Image
(2) Field: slider_image
(3) Field type: image
(4) Widget (form element): image
(5) Click Save button, and on the field settings page leave default settings and click on Save field settings button.
(6) On the image field configuration settings page you can configure as you wish.

我根据需要设置了该字段,并添加了一个名为“ slider-image”的文件导向器名称,以便该图像与其他图像分开排列。您可以在此处设置最大上传大小和分辨率,我有一个可用的alt和title字段,最后单击Save settings按钮。

通过使用相同的方法,也可以创建链接字段。

链接字段设置(1)标签:滑块链接(2)字段:slider_link(3)字段类型:链接(4)小部件(表单元素):链接(5)单击“保存”按钮,对于链接字段配置,保留所有默认设置。我已经重新安排了如下所示的字段;标题字段图像字段链接字段正文字段(如果不需要,您甚至可以删除此字段)管理显示在管理显示选项卡上,您可以配置如何显示该字段的输出。我已将链接字段设置为隐藏,并且还将图像标签设置为隐藏Drupal7:管理字段(6)创建功能滑块内容

我已经为本教程创建了四个精选的滑块内容。

(1)单击添加内容链接(2)创建Featured Slider内容(3)输入正确的标题名称(4)上传滑块图像(5)输入alt和title字段名称(6)在所需的位置提供链接标题和URL要链接的滑块(7)如果要给SEO友好的URL别名,则将所有其他设置保留为默认设置,但路径字段除外。(8)保存内容。

以同样的方式创建更多Featured Slider内容(我已经创建了四个内容)(7)创建一个新视图

现在该创建新的幻灯片视图了。在“仪表盘”菜单上,单击“结构”,然后单击“视图”。

(1)单击添加新视图链接(2)指定视图名称,我将其命名为Featured Slider(将自动生成机器名称)(3)提供适当的视图描述(4)选择Showed type of Featured Slider(您的内容)类型名称)。(5)取消选中“创建Pge”并选中“创建块”(6)键入“块标题”,然后选择显示格式为每页5个“字段”项的“幻灯片”(您可以输入要显示的项数)(7 )单击“继续和编辑”按钮。视图字段设置首先,我们添加链接字段(链接必须是第一个字段,以便正常工作),然后单击添加图标,然后从过滤器组中选择内容添加内容:链接,单击下一个配置窗口中的“添加和配置按钮”取消选中“创建标签”。“校验” 从显示中排除。点击“应用按钮”

接下来让我们添加图像字段,因此单击添加图标,然后从过滤器组中选择内容添加内容:图像字段(注意:请确保选择仅针对此滑块内容类型创建的图像字段。)单击“添加并配置”。按钮在下一个配置窗口中取消选中“创建标签”。

格式化程序:图像(如果已安装Colorbox或lightbox,则可以在此处选择!)图像样式:Fullsize(选择在上一步中创建的图像缓存)将图像链接到:Nothing Style设置:保留默认设置无结果行为:保留默认设置重写结果:选中“将此字段作为链接输出”链接路径:[view_node](注意:稍微滚动一下,您会看到Core Token模块创建的替换模式,(如果我们没有将链接字段设置为第一个,无法在此处看到链接字段选项)仅复制[view_node],然后向上滚动并将其粘贴到链接路径字段中。)点击“应用按钮”

最后,我们需要为缩略图添加一个字段,因此让我们单击添加图标,然后从过滤器组中选择“内容”,然后单击“添加内容:图像字段”(注意:请确保选择仅针对此滑块内容类型创建的图像字段。)在下一个配置窗口中单击“添加并配置按钮”,取消选中“创建标签”,然后从显示,格式化程序中检查排除:图像(如果已安装Colorbox或lightbox,则可以在此处选择它们!)图像样式:缩略图(选择图像缓存)您在上述步骤中创建的)将图像链接到:无样式设置:保留默认设置无结果行为:保留默认设置重写结果:选中“将此字段作为链接输出”链接路径:[view_node](注意:稍微滚动一下,您会看到由Core Token模块创建的替换模式,(如果我们没有请先将链接字段设置为“我们在此处看不到链接字段选项”)仅复制[view_node],然后向上滚动并将其粘贴到链接路径字段中。)点击“应用按钮”

视图过滤器设置

在views3中,过滤器是在开始时创建的,同时我们选择内容类型和其他设置!如果您需要任何其他过滤器,则可以在这里创建!

视图样式设置

单击格式幻灯片| 设置并在下一个配置窗口中进行如下设置;(1)列表类型:无序列表(2)包装器类:保留默认设置(3)样式>外观:不满意(4)幻灯片>幻灯片类型:循环(5)循环选项您需要下载jQuery cycle插件并复制jquery。您可以在http://malsup.com/jquery/cycle上找到该插件。

用简单的英语在site / all目录中创建一个名为“ libraries”的文件夹,然后在该目录中创建另一个名为“ jquery.cycle”的文件夹,最后仅将“ jquery.cycle.all.min.js”复制并粘贴到这个目录。

(6)过渡:淡入淡出(7)操作:悬停时暂停(8)Internet Explorer调整:默认(9)小部件:您可以选择“顶部”和“底部”之一或两者(我在这里选择“底部”,下面是高级设置;) (10)底部小部件>传呼器>传呼器类型:字段(11)传呼器字段:内容:图像(注意:我们为拇指添加的最后一个,不要误解,因为两个字段的名称都相同。)(12)激活幻灯片和Pager Hove上的暂停:选中,控件和滑块计数器未选中。(13)单击“应用”按钮。

格式显示字段设置

Inline fields: Choose the thumbnail field as inline.
Click Apply button. (Note: Well it actually doesn't change much in appearance but it does change in the code. Next step use the firebug and find the class and add some styles to display properly.)

(8)创建一个自定义区域(可选步骤)

(1)在yours文件夹中,打开your_theme_name.info文件,并添加如下所示的新区域;region [featured_slider] = Featured Slider并保存.info文件。(2)打开主题page.tpl.php文件,并将这些代码添加到希望显示幻灯片的位置,如下所示;

您甚至可以创建自定义首页模板,例如page--front.tpl.php,这样就无需对默认的page.tpl.php模板进行任何更改。[9]启用并配置块

现在,该块将在“块禁用”区域中可见,因此从“仪表板”菜单转到“结构”>“块”,然后将该块启用为主题默认区域或我们创建的自定义区域(featured_slider)。(地区因您使用的主题而异。)

块配置设置启用该块后,您将获得一个用于配置该块的链接,因此请单击“ Configure”链接和下面设置的设置部分;

(1)块标题(如果您不想显示大标题,只需键入)。(2)同样,您将获得所有启用的主题特定的Region设置。关于可见性设置(3)页面>在特定页面上显示块:选择仅列出的页面并键入,以便此块仅显示在首页上。CSS提示以在线显示缩略图

将这些CSS代码添加到主题样式表中以内嵌显示缩略图。.views-slideshow-controls-bottom .views-slideshow-pager-field-item {float:left; 边距:20px 6px; 进行必要的调整。


4
我认为这篇文章(精彩而透彻)的篇幅可能表明我为什么对学习drupal感到如此沮丧
Damon

1
Drupal确实很简单而且功能强大,但是有时您会发现一些愚蠢的简单事情,并且花了2天的时间才能完成,并且您必须
挖掘

哦,顺便说一句,我从头到尾都遵循了您的教程,我只希望stackexchange中有一种方法可以多次投票。非常感谢老兄,您真的在这里帮助了我!
Dinaiz 2012年

2
我很高兴它的帮助。我还创建了一个功能模块,目前正在对其进行审核,以在Drupal.org上发布。它打包了我上面概述的所有步骤,再进一步,使其完全响应,并使用客户端自适应图像以在Omega等主题中使用。参见drupal.org/sandbox/nicoz/1538528

1
Dinaiz,您可以通过启动赏金然后选择“奖励现有答案”来奖励更多积分;-)
uwe 2012年

2

看看这个Mustardseed Media播客:Views Slideshow Theming

在播客期间,Bob会介绍Views Slideshow的一些基础知识,以及如何为输出设置主题。它基于Drupal 6,但是我相信大多数基础知识和课程都是相同的。由于只有一点点CSS,幻灯片可以看起来更好。如果您想要漂亮的幻灯片放映,我强烈建议您观看此播客。


尽管此视频可以回答问题,但最好在此处包括答案的基本部分并提供参考链接。如果链接的页面发生更改,仅链接的答案可能无效。meta.drupal.stackexchange.com/questions/585/…– 2013
user1359

1

如果您想了解更多关于幻灯片视图的信息(例如,带缩略图的话),那么您必须看到这个很好的教程:http : //www.brightwebsitedesign.com/how-to-install-views-slideshow-module-on-drupal7


这与@Nigel发表的文章相同
Laxman13 2011年

我认为奈杰尔(Negel)复制并粘贴了该页面,将其粘贴到答案中:)这虽然整洁得多,所以我还是投票给了它:)几分钟前我刚走进办公室,所以我要坐下来尝试今天早上放出这张幻灯片。如果可以的话,我会接受的。谢谢。
Lester Peabody

好的,说了算,我实际上已经完成了他在该教程中告诉您的大部分工作。不过,他并没有真正按照我希望的方式操纵分页。要进行这项工作,必须要做一些严肃的CSS和jQuery骇客操作。
Lester Peabody
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.