如何在文章中加入图片

Machi蚂蚁问到这个问题,想必然会有其他蚂蚁面对这个问题,所以写成Q&A放在这里,方便大家查询。

在文章中加入图片有两种形式:上载图片或链接图片。

上载图片是通过蚂蚁的后台程序在撰写文章时上传的附件。可以直接通过上传附件旁的按键快捷加入。要注意的是所上传的图片是直接针对当前文章存在的,换句话说你在文章A上传的文件,只能在文章A快捷引用,如果要在其他文章中共用,别的文章中就需要使用链接图片的方式呈现了。

上传图片的方式在操作手册(文章->撰写文章)中已经有简单的介绍,其实这非常直观、简单使用,自己实习一下就知道哪个按键是做什么用的了。

链接图片,简单的说就是直接使用HTML Code显示你所要的图片,这不管是在文章中或模板中都可以运用。这些图片的“物理位置”可以是储存在蚂蚁的网址以外(如Fliker或Picasa),或者是蚂蚁的网址中(举上面的例子就是了)。下面是一个简单的例子,如何在文章中加入链接图片:(使用Firefox做示范)

例子:我要把蚂蚁的部落图案放在我的文章中。

[#M_1. 首先我要从蚂蚁部落中找出这个部落图案的网络位置。|less..| 用户插入图片    
       用户插入图片

       
        如何找出图片网络位置:
        a.  把鼠标移到红色圈子的位置上。
        b.  按下滑鼠右键。
        c.   选择 Copy Image Location.
_M#]
[#M_2. 再来进入源码编译模式。|less..|按下EDIT这个按键就行了。看下图。 用户插入图片
你会发现撰写区由形象撰写模式变成了源码撰写模式,如下图就是了:
用户插入图片_M#]
[#M_3. 最后加入编码。|less..| 加入图片链接的编码是:
<img src=”图片网络地址” style=”width:500px;” />

其中style=”xxx”这个部份可以选择不要。主要是用于指定图片的呈现方法。如果你的图片宽度大于你的模板文章显示宽度,说你的模板只有500px的显示宽度,那就需要用style来指定宽度了。指定宽度后,图片的高度会自动跟着改变,所以不会变形。

在这例子中,图片网络地址是:http://www.antzblog.com/link_image/AntzBlogLogo1.jpg

所以图片链接编码将会变成:(由于图片的宽度只有150px所以不必指定宽度。)
<img src=”http://www.antzblog.com/link_image/AntzBlogLogo1.jpg” />

如果我要把图片显示在50px的宽度内,可以把编码改成:
<img src=”http://www.antzblog.com/link_image/AntzBlogLogo1.jpg” style=”width:50px;” />

_M#]

其它更加详细的使用方法可以参考这个网页

Q&A:如何设置Emoticon功能(GUN Emoticon版本)

这是新加入的表情插件:GUN Emoticon。

这插件提供蚂蚁们自己设置自己喜欢的表情图标,而不必所有人使用单一图标。这可以让个人风格更加特出,而且也加强了页面中的互动能力。

功能:自动转换预设的表情标签为表情图片。如 🙂 将显示为  😛 将自动转换成

设置方式:

  1. 进入【插件】,启动【GUN Emoticon】。
  2. 按下【设定】。
  3. 按照画面指示来进行就可以了。
  4. 完毕后记得要按下储存按键,否则刚做好的设定,全都会消失不见哦!

设置模板:(如果不要让游客可以选择表情图片,可以跳过这个步骤)

  1. 进入【模板】-> 按下【编辑模板】。
  2. 寻找 textarea 这个关键字,然后在适合位置加入

一般上共有两个可以让游客输入的地方:留言板和发表区。如有需要,可以选择只放一处。但要注意的是,如果输入中包含了所设置的标签,这插件的作用也会出现的哦!

下面是一些抓图,如果不明白上面说的,就让这作为补充吧~

用户插入图片
插件画面。
《图一:插件画面》


《图二:表情标签和图片的设置及管理处》


《图三:增加表情图片时的窗口画面。在表情图标处输入你要的表情标签就行了!》

注意:

  • 一个表情标签,对应一个表情图片。
  • 表情标签可以是任何字(除了>和<不能使用!)。
    • 例子:
      • 关键字:
        • [emo:happy][E|big_smile]
        • e_sad[E|cry]
        • e.nothing_say[E|nothing_to_say]
      • 符号:
        • 🙂
        • :'(
        • =.=

没有表情图片可用?放心,孙康已经准备了一些,到这可以下载。

照常,有什么问题,在这回复就好了![E|happy]

相关文章:Q&A:如何设置Emoticon功能

Q&A:如何设置Emoticon功能

有很多都问我,我下面这些可爱的Emoticon,是如何设置的?
用户插入图片

其实这需要一些手动的设定才可以完成。由于早前孙康忙着开张事宜,所以到现在都还没能够把这个设置方法写出来。(虽然写这章目时,聚合画面和管理处都还没作好。。。)现在只好亡羊补牢咯~(看在孙康这么晚还写出这章目,给我一点掌声啦~ :P)

好了废话少说,其实设置非常容易,只要有一点点HTML的基础,或用一点点时间实习,就可以搞定。
[20070808增加]事先说明:这套表情不适合用于黑色背景的页面哦!

两个步骤:

  1. 先进入【插件】然后找出【[#M_表情插件|关上…| 用户插入图片《表情插件抓图》_M#]】,启用。
  2. 然后进入【模板】–>【编辑模板】,增加表情插件源码,储存后就行了。
    • [#M_ 详情看这<==|关闭…|1.  首先找出用户输入的源码位置。可以直接利用浏览器的搜寻,找关键字“textarea”就行了。一般共有两个地方可以增加:留言版和日志的回覆。(看你用的模板是怎样设计。一般是两个没错啦!)
      2.  在适当的地方,放入这源码。一般放置的地方是靠近“Submit”按键的上方,不过个别模板的设计不一样,放置的地方也有所不同。最后记得把修改过的模板储存就大功告成了!下图是个例子:
      用户插入图片《源码抓图》

      用户插入图片《源码说明:》
      红色:找到的“textarea”位置。
      蓝色:“Submit”按键的位置。
      紫色:输入Emoticon源码位置。

      注:由于我的模板输入位置宽度只有380px,所以我用了一个380px宽度的<div>来框起这个Emoticon,以免显示时会破坏整体观感。

      _M#]

我会在完成所有聚合页面功能后,再化时间在所有适用这Emoticon的模板上加入它的源码,那往后转换模板时就不必重新调整过了。

有什么问题,在这发问吧!

相关文章:Q&A:如何设置Emoticon功能(GUN Emoticon版本)