使用渐进式JavaScript自动生成图像标题

Human beings don’t fare well with monotonous, repetitive labor, but computers love it. When faced with coding predictable, sequential markup like a series of image captions, developers spare themselves time, boredom and frustration by automating the process as much as possible. This automated solution should provide adaptive breakpoints: if a procedure fails, the result should still look good, at whatever level of support has been achieved to that point.

人类在单调重复的劳动中表现不佳，但计算机却喜欢它。 当面对编码可预测的，顺序的标记(如一系列图像标题)时，开发人员通过尽可能自动执行该过程来节省时间，无聊和沮丧。 这种自动化的解决方案应该提供自适应的断点：如果某个过程失败，那么无论达到何种程度的支持，结果仍然看起来不错。

While it takes a more effort at the start, this creates code this is more powerful, consistent and flexible: in the example above, we could add or remove images from the markup and the gallery would instantly adapt to the changes, automatically creating new captions.

尽管一开始需要花费更多的精力，但它创建的代码更加强大，一致和灵活：在上面的示例中，我们可以从标记中添加或删除图像，并且图库将立即适应更改，自动创建新的标题。

第一步：创建默认可访问性层 (Step One: Create The Default Accessibility Layer)

We start by assuming that users won’t be able to see the images at all. Therefore, the gallery content needs full descriptive alt attributes:

我们从假设用户根本看不到图像开始。 因此，图库内容需要完整的描述性alt属性：

<div id="autocaption">
	<img src="north-falls-silver-falls.jpg" alt="Photograph of North Falls, Silver Falls State Park">
	<img src="shepperds-dell-columbia-gorge.jpg" alt="Photograph of Shepperds Dell, Columbia Gorge">
	<img src="upper-butte-creek-falls.jpg" alt="Photograph of Upper Butte Creek Falls">
</div>

The images themselves could be added to the page by hand, or brought in by PHP or via a CMS. At this level, the markup is “raw”: no CSS, no JavaScript. The majority of visitors can see the result, but it won’t be presented very well. Let’s improve on that:

图像本身可以手动添加到页面，也可以通过PHP或CMS 引入 。 在这个级别上，标记是“原始的”：没有CSS ，没有JavaScript 。 大多数访问者可以看到结果，但显示效果不佳。 让我们对此进行改进：

第二步：添加基础CSS (Step Two: Add Base CSS)

At this level, we’ll be crafting presentation rules for what we currently have in the markup, with an eye on the possibilities added in step three. For now, let’s make the images look better:

在这个级别上，我们将针对标记中当前的内容制定展示规则，并关注在第三步中添加的可能性。 现在，让我们使图像看起来更好：

div#autocaption > * {
	margin: 0; padding: 0;
	width: 27%;
	border: 7px solid white;
	margin: 10px; background: #fff;
	display: inline-block;
	box-shadow: 0 10px 8px -6px rgba(0,0,0,0.2);
}

Note the selector combinator used in the first line: it restricts the style rules to elements that are the immediate children of the <div>. Right now, those children are images; but if the browser allows us to run JavaScript, we’ll improve on that.

注意第一行中使用的选择器组合器：它将样式规则限制为<div>的直接子元素。 现在，那些孩子是形象。 但是如果浏览器允许我们运行JavaScript，我们会对此进行改进。

第三步：添加自动生成的字幕 (Step Three: Add Auto-Generated Captions)

We want each image to have a caption underneath it. The obvious HTML5 markup to use would be <figcaption>, meaning that every image will also need to be in a <figure>. The content of the <figcaption> will be provided by using the value of the image’s own alt attribute. We’ll generate this by adding a little JavaScript at the end of the page:

我们希望每个图像下方都有一个标题。 要使用的显而易见HTML5标记是<figcaption> ，这意味着每个图像也都必须位于<figure> 。 <figcaption>的内容将通过使用图像自己的alt属性的值提供。 我们将通过在页面末尾添加一些JavaScript来生成此代码：

var images= document.querySelectorAll( "#autocaption img" ),
L = images.length, fig = document.createElement('figure'),
who, temp
while(L) {
	temp = fig.cloneNode(false);
	who = images[--L];
	caption = who.getAttribute("alt");
	who.parentNode.insertBefore(temp, who);
	content = document.createElement( 'figcaption' );
	content.innerHTML = caption;
	temp.appendChild(who);
	temp.appendChild(content);
}

Rather than explaining every last bit of code, which will be the subject of articles to come, I’ll concentrate on the results. If you use Inspect Element in your browser’s Development Tools, you’ll see that the DOM now looks like this:

我将不着急解释将要成为文章主题的每最后一部分代码，而是将重点放在结果上。 如果在浏览器的“ 开发工具”中使用Inspect Element ，您将看到DOM现在如下所示：

<div id="autocaption">
	<figure>
		<img src="north-falls-silver-falls.jpg" alt="Photograph of North Falls, Silver Falls State Park">
		<figcaption> Photograph of North Falls, Silver Falls State Park 		</figcaption>
	</figure>
	<figure>
		<img src="shepperds-dell-columbia-gorge.jpg" alt="Photograph of Shepperds Dell, Columbia Gorge">
		<figcaption> Photograph of Shepperds Dell, Columbia Gorge</figcaption>
	</figure>
	<figure>
		<img src="upper-butte-creek-falls.jpg" alt="Photograph of Upper Butte Creek Falls">
		<figcaption> Photograph of Upper Butte Creek Falls </figcaption>
	</figure>
</div>

The CSS rule above now affects <figure> elements rather than the images, since the <figure> elements have now become the immediate child of the <div>.

上面CSS规则现在影响<figure>元素而不是图像，因为<figure>元素现在已成为<div>的直接子元素。

Let’s improve the presentation of the images and <figcaption>:

让我们改善图像和<figcaption>的呈现方式：

div#autocaption figure img {
	width: 100%; height: auto;
	}
div#autocaption figcaption {
	padding: 5px;
}

These rules will only be applied if the JavaScript works and the image is surrounded by a <figure> element and followed by a <figcaption>, making both our JavaScript and CSS progressive.

仅当JavaScript可以工作并且图像被<figure>元素和<figcaption>包围时才应用这些规则，这使我们JavaScript和CSS都是渐进的。

figcaption和alt有什么区别？ (What’s The Difference Between figcaption and alt?)

Developers often confuse alt and <figcaption>. If a caption describes an image just as well as alt, why use both?

开发人员经常混淆alt和<figcaption> 。 如果字幕描述的图像与alt一样好，为什么要同时使用两者？

The key is understanding the role of each: they’re not interchangeable.

关键是要理解每个角色：它们是不可互换的。

• alt is a description of an image

  alt是图像的描述

• figcaption is the title of a figure

  figcaption是人物的标题

alt describes the image to someone that can’t see it. figcaption explains why the image is there.

alt将图片描述给看不见的人。 figcaption解释了为什么存在图像 。

第四步：清理字幕文本 (Step Four: Clean Up The Caption Text)

In this case, the words “Photograph of a…” in each <figcaption> are redundant, while they remain entirely relevant in the context of alt. A quick and dirty way of cleaning up the captions would be to remove the first fifteen characters:

在这种情况下，每个<figcaption>中的“ a的照片” <figcaption>都是多余的，而在alt的上下文中它们仍然完全相关。 清除标题的一种快速而肮脏的方法是删除前十五个字符：

alt = alt.substring(15);

To ensure that the first letter of whatever remains is always capitalized, change the CSS:

为确保剩下的首字母始终大写，请更改CSS：

div#autocaption figcaption:first-letter {
	text-transform: uppercase;
}

Alternatively, if the alt and <figcaption> content were completely different, you could place the content intended for the caption in a data- attribute, and read that:

或者，如果alt和<figcaption>的内容是完全不同的，你可以把内容是用在标题data-属性 ，并阅读 ：

<img src="upper-butte-creek-falls.jpg" alt="Photograph of Upper Butte Creek Falls" data-caption="Cascade at Upper Butte Creek Falls, Oregon, USA" >

In your JavaScript:

在您JavaScript中：

caption = who.getAttribute("data-caption");

That’s it! Automated image captioning and element creation, which then be used in any kind of presentation, such as a Pintrest-style gallery or a 3D carousel.

而已！ 自动的图像字幕和元素创建，然后可用于任何类型的演示中，例如Pintrest风格的画廊或3D轮播 。

翻译自: https://thenewcode.com/834/Auto-Generate-Image-Captions-With-Progressive-JavaScript