https://cascade-prod.static.wm.edu/_shared/static/js/_js-imports/images_add_caption.js

1/* =============================================================
2FUNCTION images_add_caption()
3
4- Captioned Images - add figcaption from alt text
5
6================================================================= */
7const { runTests, addCheck } = await import('./_run_tests_var.js');
8
9export function images_add_caption() {
10    if ($("img[class$=caption]").length > 0) {
11        
12        var wysiwygImgArray = new Array(
13            'centerwithcaption',
14            'rightwithcaption',
15            'leftwithcaption',
16            'photowithcaption'
17        );
18
19        wysiwygImgArray.forEach(imageClass => {
20            var thisImage = $("img." + imageClass);
21            if (thisImage.length > 0) {
22                thisImage.imagesLoaded(function () {
23                    thisImage.each(function () {
24                        // use html defined width on image if available,
25                        // otherwise use actual width of image
26                        var myWidth = $(this).attr('width') ? $(this).attr('width') : $(this).prop("naturalWidth");
27
28                        /* Check for tags in alt text */
29                        var oldAlt = $(this).attr("alt");
30                        var newAlt = oldAlt;
31                        newAlt = newAlt.replace(/\{(\/?)em\}/g, "<$1em>");
32                        newAlt = newAlt.replace(/\{(\/?)strong\}/g, "<$1strong>");
33                        newAlt = newAlt.replace(/\{br\/?\}/g, "<br/>");
34
35                        $(this)
36                            .wrap('<figure class="' + imageClass + '-wrapper"></figure>')
37                            .after("<figcaption>" + newAlt + "</figcaption>");
38                        // max-width is fallback for older browsers
39                        $(this).parent("figure").css("max-width", "100%");
40                        $(this).parent("figure").css("width", "min(100%," + myWidth + "px)");
41                        // remove left/right margins on wide images
42                        myWidth > 830 ? $(this).parent("figure").css("margin-left", "0") : null;
43                        myWidth > 830 ? $(this).parent("figure").css("margin-right", "0") : null;
44                        
45                        if (runTests) {
46                            if ($(this).parent("figure").length > 0 && $(this).next('figcaption').innerText != '') {
47                                addCheck('imgCaptions');
48                            } else if ($(this).parent("figure").length === 0 || $(this).next('figcaption').innerText === '') {
49                                console.log('image has no figure or text in figcaption');
50                                addCheck('imgCaptions', false);
51                                return false;
52                            }
53                        }
54                        
55                    });
56                });
57            }
58        });
59
60    }
61}
62