itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-27 04:50:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add alt text to images in content and examples

Browse Source
This commit is contained in:
Deniz Akşimşek 2025-09-02 14:02:37 +03:00
parent e4f8fe9a77
commit 58555a4824
20 changed files with 134 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
test/manual/no-indicator-css.html
View File

@ -11,6 +11,6 @@
We are overriding the normal CSS inclusion with the meta directive <code>{"includeIndicatorStyles":false}</code>
so you should see the indicator because it is not being hidden by the default classes.
</p>
<img class="htmx-indicator" src="../img/bars.svg" width="200">
<img class="htmx-indicator" src="../img/bars.svg" alt="Loading..." width="200">
</body>
</html>

2
test/manual/yes-indicator-css.html
View File

@ -6,6 +6,6 @@
</head>
<body style="padding:20px;font-family: sans-serif">
<h1>You should not see bars here:</h1>
<img class="htmx-indicator" src="../img/bars.svg" width="200">
<img class="htmx-indicator" src="../img/bars.svg" alt="Loading..." width="200">
</body>
</html>

13
www/content/_index.md
View File

@ -64,7 +64,8 @@ if(window.location.search=="?ads=true") {
<div class="ad" style="margin-bottom: 30px">
<a href="https://swag.htmx.org">
<img src="/img/ads_top.png"/>
<img src="/img/ads_top.png" alt="Ad: MacMall PowerBooks as low as 1999$!
Call 888-932-1569. Get your FREE 64MB RAM with your PowerBook!"/>
</a>
</div>
@ -75,19 +76,21 @@ if(window.location.search=="?ads=true") {
</div>
<div class="wuw">
<a href="https://swag.htmx.org/products/shut-up-warren-tee">
<img src="/img/wuw.png">
<img src="/img/wuw.png" alt="shut up warren ⁺₊✦ uwu">
</a>
</div>
<div class="uwu">
<a href="https://swag.htmx.org/products/htmx-katakana-shirt">
<img src="/img/kawaii.png">
<img src="/img/kawaii.png" alt="htmx エイチティーエムエックス uwu">
</a>
</div>
</div>
<div class="ad">
<a href="https://swag.htmx.org">
<img src="/img/ads_bottom.png"/>
<img src="/img/ads_bottom.png" alt="Ads: Get Flash! FREE Microsoft Internet Explorer!
Netscape Now! (3.0) Site created with Microsoft&reg; FrontPage&trade;.
Powered by Microsoft BackOffice."/>
</a>
</div>
@ -139,7 +142,7 @@ We are happy to announce the release of [Hypermedia Systems](https://hypermedia.
[Hypermedia-Driven Applications](@/essays/hypermedia-driven-applications.md) using htmx & more:
<div style="text-align: center;padding: 24px">
<a href="https://www.amazon.com/dp/B0C9S88QV6/ref=sr_1_1?crid=1P0I3GXQK32TN"><img src="/img/hypermedia-systems.png" alt="hypermedia systems"></a>
<a href="https://www.amazon.com/dp/B0C9S88QV6/ref=sr_1_1?crid=1P0I3GXQK32TN"><img src="/img/hypermedia-systems.png" alt="Hypermedia Systems hardcover edition"></a>
</div>
<h2>sponsors <iframe src="https://github.com/sponsors/bigskysoftware/button" title="Sponsor htmx" height="32" width="114" style="border: 1px solid gray; border-radius: 12px; float:right"></iframe></h2>

8
www/content/attributes/hx-indicator.md
View File

@ -21,7 +21,7 @@ Here is an example with a spinner adjacent to the button:
<button hx-post="/example" hx-indicator="#spinner">
Post It!
</button>
<img id="spinner" class="htmx-indicator" src="/img/bars.svg"/>
<img id="spinner" class="htmx-indicator" src="/img/bars.svg" alt="Loading..."/>
</div>
```
@ -34,7 +34,7 @@ CSS selectors:
<button hx-post="/example" hx-indicator="inherit, #spinner">
Post It!
</button>
<img id="spinner" class="htmx-indicator" src="/img/bars.svg"/>
<img id="spinner" class="htmx-indicator" src="/img/bars.svg" alt="Loading..."/>
</main>
```
@ -80,7 +80,7 @@ call it out with the `hx-indicator` attribute:
```html
<button hx-post="/example">
Post It!
<img class="htmx-indicator" src="/img/bars.svg"/>
<img class="htmx-indicator" src="/img/bars.svg" alt="Loading..."/>
</button>
```
@ -90,7 +90,7 @@ This simulates what a spinner might look like in that situation:
<button class="btn" classes="toggle htmx-request:3s">
Post It!
<img class="htmx-indicator" src="/img/bars.svg"/>
<img class="htmx-indicator" src="/img/bars.svg" alt="Loading..."/>
</button>
## Notes

4
www/content/docs.md
View File

@ -343,7 +343,7 @@ on it to transition to an opacity of 1, showing the indicator.
```html
<button hx-get="/click">
Click Me!
<img class="htmx-indicator" src="/spinner.gif">
<img class="htmx-indicator" src="/spinner.gif" alt="Loading...">
</button>
```
@ -373,7 +373,7 @@ attribute with a CSS selector to do so:
<button hx-get="/click" hx-indicator="#indicator">
Click Me!
</button>
<img id="indicator" class="htmx-indicator" src="/spinner.gif"/>
<img id="indicator" class="htmx-indicator" src="/spinner.gif" alt="Loading..."/>
</div>
```

117
www/content/essays/_index.md
View File

@ -79,7 +79,8 @@ page_template = "essay.html"
## Banners
<div style="text-align: center;margin:32px">
<img width="90%" loading="lazy" src="/img/createdwith.jpeg">
<img width="90%" loading="lazy" src="/img/createdwith.jpeg"
alt="Site created with htmx, The Right Way.">
</div>
## Memes
@ -95,30 +96,92 @@ page_template = "essay.html"
}
</style>
<div class="memes">
<img loading="lazy" src="/img/memes/original.png">
<img loading="lazy" src="/img/memes/20yearold.png">
<img loading="lazy" src="/img/memes/whowillwin.png">
<img loading="lazy" src="/img/memes/uarealldoingitwrong.png">
<img loading="lazy" src="/img/memes/restapi.png">
<img loading="lazy" src="/img/memes/justusehtml.png">
<img loading="lazy" src="/img/memes/istudiedhtml.png">
<img loading="lazy" src="/img/memes/htmlvsjson.png">
<img loading="lazy" src="/img/memes/dontknowwhatclientsideroutingis.png">
<img loading="lazy" src="/img/memes/nocap.png">
<img loading="lazy" src="/img/memes/ie11enjoyer.png">
<img loading="lazy" src="/img/memes/hydration.png">
<img loading="lazy" src="/img/memes/viewsource.png">
<img loading="lazy" src="/img/memes/javascripthistory.png">
<img loading="lazy" src="/img/memes/bellcurve.png">
<img loading="lazy" src="/img/memes/drakearchitecture.png">
<img loading="lazy" src="/img/memes/bellcurve2.png">
<img loading="lazy" src="/img/memes/dbtohtml.png">
<img loading="lazy" src="/img/memes/normal.png">
<img loading="lazy" src="/img/memes/feelbad.png">
<img loading="lazy" src="/img/memes/drakememes.png">
<img loading="lazy" src="/img/memes/fullstack.jpg">
<img loading="lazy" src="/img/memes/frontenddevs.png">
<img loading="lazy" src="/img/memes/htmxanddjango.png">
<img loading="lazy" src="/img/memes/aye.png">
<img loading="lazy" src="/img/memes/extinction.png">
<img loading="lazy" src="/img/memes/original.png"
alt="2004 architecture: router, controller, model and view on server side,
browser, DOM and JS on client. 2019 architecture: browser, DOM, js, model,
view, controller, virtual DOM, server-side JS runtime, router, model view
and controller again, another virtual dom, another model-view-controller
for the JSON API... discontent wojak. and 2021 architecture, same as 200 but
with htmx and smug wojak.">
<img loading="lazy" src="/img/memes/20yearold.png"
alt='crying wojak with smiling mask says "lol you are going to use twenty year
old technology to build modern websites lol maybe for a toy website good
luck w/ that lmao"
django, php, flask and rails say: "Yes."
lisp says: "no, sixty years old."'>
<img loading="lazy" src="/img/memes/whowillwin.png"
alt='Who Will Win? On the left corner: the champions Angular and React, with
their respective Google and Facebook legions.
On the right corner: a lunatic in montana and his internet friends
"u guys should use hypermedia"'>
<img loading="lazy" src="/img/memes/uarealldoingitwrong.png"
alt='Despair.com poster with Roy Fielding&apos;s face.
"REST: You&apos;re doing it completely wrong."'>
<img loading="lazy" src="/img/memes/restapi.png"
alt='"I&apos;m going to create a RESTful API..." happy roy
"Using JSON..." distressed roy
"here are my API docs" angery laser eyes roy'>
<img loading="lazy" src="/img/memes/justusehtml.png"
alt="diagram explaining difference between 'hydration' which has 4 long stages
and 'resumability' which is apparently one step.
or just use HTML in one tiny step (loading the html)">
<img loading="lazy" src="/img/memes/istudiedhtml.png"
alt="When You wrote class components I studied HTML.
When you were converting classes to hooks I mastered the HTML.
While you wasted time moving all your client-side logic to server components
I cultivated inner HTML.
And now that the browser won't hydrate your thick client JSON API you have
the audacity to come to me for help?">
<img loading="lazy" src="/img/memes/htmlvsjson.png"
alt='HTML says "I feel bad for you".
JSON says "I don&apos;t think about you at all.'>
<img loading="lazy" src="/img/memes/dontknowwhatclientsideroutingis.png"
alt="Roll Safe meme: Can't route client side if u don't know what client-side routing is.">
<img loading="lazy" src="/img/memes/nocap.png"
alt="yo no cap u don't even need that for web dev fr. hypermedia straight bussin. mf deadass simple fr
-- grug with broccoli hair">
<img loading="lazy" src="/img/memes/ie11enjoyer.png"
alt='average "browsers should follow open standards" fan vs average IE11 enjoyer'>
<img loading="lazy" src="/img/memes/hydration.png"
alt="How much water is in your body? Adult male 60%, adult female 55%, children 65%, infant 75%, React 100%">
<img loading="lazy" src="/img/memes/viewsource.png"
alt='Gigachad: "I wonder how this works..." *clicks view source* "Oh, neat."'>
<img loading="lazy" src="/img/memes/javascripthistory.png"
alt="Friends? Free time? Happiness? Nope, says the JavaScript History API">
<img loading="lazy" src="/img/memes/bellcurve.png"
alt="Bell curve meme. Lower percentile: HTML + a backend.
Median: ONE BILLION COMPONENTS highest percentile: HTML + a backend">
<img loading="lazy" src="/img/memes/drakearchitecture.png"
alt="Disapproving Drake: web dev learning graph with a dozen branches.
Pleased Drake: Learn the basics - HTML and CSS">
<img loading="lazy" src="/img/memes/bellcurve2.png"
alt="Bell curve meme. Low: HTML is fine. Median: we have to use react and
react router and graphql and redux and... high: htmx is fine">
<img loading="lazy" src="/img/memes/dbtohtml.png"
alt="DB to JSON to HTML -- or you can just do DB to HTML...">
<img loading="lazy" src="/img/memes/normal.png"
alt="Me: Why can't you just be normal? JavaScript: *screams*">
<img loading="lazy" src="/img/memes/feelbad.png"
alt="You are using the term REST bad and you should feel bad -- zoidberg">
<img loading="lazy" src="/img/memes/drakememes.png"
alt="Disapproving Drake: well reasoned, detailed and insightful content
explaining the strengths and weaknesses of htmx vs other perfectly valid
potential approaches to front end web development">
<img loading="lazy" src="/img/memes/fullstack.jpg"
alt="htmx to backend dev: 'Look at me. You're fullstack now.'">
<img loading="lazy" src="/img/memes/frontenddevs.png"
alt="front end devs thinkin' everyone is going to be using JavaScript on the
backend soon: htmx:">
<img loading="lazy" src="/img/memes/htmxanddjango.png"
alt="django is a monkey sitting on htmx's back and it's refusing something labeled
'all that complicated js noise">
<img loading="lazy" src="/img/memes/aye.png"
alt='me, an old java dev: "I never thought I would die fighting side by side
w/ dotnet developers"
"what about side by side w/ someone who also hates JS frameworks?"
"aye, I could do that"'>
<img loading="lazy" src="/img/memes/extinction.png"
alt="still from an avengers movie? idk. javascript/node is thanos and java, ruby,
lisp, python and php are fighting it, also haskell is dr strange i think which
seems relevant">
</div>

2
www/content/essays/hypermedia-driven-applications.md
View File

@ -52,7 +52,7 @@ Consider the htmx [Active Search](@/examples/active-search.md) example:
<h3>
Search Contacts
<span class="htmx-indicator">
<img src="/img/bars.svg"/> Searching...
<img src="/img/bars.svg" alt=""/> Searching...
</span>
</h3>
<input class="form-control" type="search"

3
www/content/essays/hypermedia-on-whatever-youd-like.md
View File

@ -111,7 +111,8 @@ Here is a screenshot of the [htmx discord](/discord)'s HOWL subsection recently.
that happen to have active traffic, there are many more.
<div style="text-align: center; padding: 16px">
<img src="/img/howl-channels.png">
<img src="/img/howl-channels.png" alt="Django, alpine, bash, clojure, cobol,
deno, dotnet, go, java, node, ocaml, php, ruby, rust -- all active.">
</div>
You can see we have ongoing conversations in a bunch of different programming languages and frameworks: Java, Go, .NET,

2
www/content/essays/lore.md
View File

@ -13,7 +13,7 @@ tag = ["posts"]
+++
<center style="padding: 12px">
<img src="/img/i-lied.png" alt="I lied." style="border-radius: 32px; max-width: 100%">
<img src="/img/i-lied.png" alt="I lied, I don't have a Twitter account. Take off your shoes, we're going to learn about hypermedia." style="border-radius: 32px; max-width: 100%">
</center>
For better or [for worse](https://x.com/IroncladDev/status/1866185587616596356), htmx has collected a lot of lore, mainly around [the twitter account](https://twitter.com/htmx_org).

4
www/content/essays/web-security-basics-with-htmx.md
View File

@ -259,7 +259,7 @@ Unlike calling untrusted HTML routes, there are a lot of good reasons to let use
What if, say, you want to let users link to an image?
```html
<img src="{{ user.fav_img }}">
<img src="{{ user.fav_img }}" alt="{{ user.fav_img_alt }}">
```
Or link to their personal website?
@ -272,7 +272,7 @@ The default "escape everything" approach escapes forward slashes, so it will bor
You can fix this in a couple of ways. The simplest, and safest, trick is to let users customize these values, but don't let them define the literal text. In the image example, you might upload the image to your own server (or S3 bucket, or the like), generate the link yourself, and then include it, unescaped. In nunjucks, you use the [safe](https://mozilla.github.io/nunjucks/templating.html#safe) function:
```html
<img src="{{ user.fav_img_s3_url | safe }}">
<img src="{{ user.fav_img_s3_url | safe }}" alt="{{ user.fav_img_alt }}">
```
Yes, you're including unescaped content, but it's a link that you generated, so you know it's safe.

8
www/content/essays/why-gumroad-didnt-choose-htmx.md
View File

@ -22,7 +22,7 @@ could be a good solution to keep our front-end super light.
<figure>
<a href="/img/gumroad-red.jpeg" target="_blank">
<img alt="Gumroad Red" src="/img/gumroad-red.jpeg" style="width: 100%">
<img alt="GitHub screenshot shows deleted files" src="/img/gumroad-red.jpeg" style="width: 100%">
</a>
<figcaption>Source with htmx - Click Image To View</figcaption>
</figure>
@ -71,7 +71,7 @@ Here's why:
<figure>
<a href="/img/gumroad-green.jpeg" target="_blank">
<img alt="Gumroad Green" src="/img/gumroad-green.jpeg" style="width: 100%">
<img alt="GitHub: 1 added file" src="/img/gumroad-green.jpeg" style="width: 100%">
</a>
<figcaption>Source with Next.js - Click Image To View</figcaption>
</figure>
@ -82,7 +82,9 @@ experiences, and leverage a wealth of existing tools and libraries.
<figure>
<a href="/img/gumroad-helper-before-after.png" target="_blank">
<img alt="Gumroad Helper Before After" src="/img/gumroad-helper-before-after.png" style="width: 100%">
<img alt="The old Gumroad Helper interface is quite basic with a single flat form,
while the new one has multiple levels of navigation and editable lists."
src="/img/gumroad-helper-before-after.png" style="width: 100%">
</a>
<figcaption>Gumroad Helper Before & After - Click Image To View</figcaption>
</figure>

4
www/content/examples/active-search.md
View File

@ -11,7 +11,7 @@ We start with a search input and an empty table:
<h3>
Search Contacts
<span class="htmx-indicator">
<img src="/img/bars.svg"/> Searching...
<img src="/img/bars.svg" alt=""/> Searching...
</span>
</h3>
<input class="form-control" type="search"
@ -70,7 +70,7 @@ Finally, we show an indicator when the search is in flight with the `hx-indicato
return ` <h3>
Search Contacts
<span class="htmx-indicator">
<img src="/img/bars.svg"/> Searching...
<img src="/img/bars.svg" alt=""/> Searching...
</span>
</h3>

4
www/content/examples/click-to-load.md
View File

@ -12,7 +12,7 @@ the final row:
<button class='btn primary' hx-get="/contacts/?page=2"
hx-target="#replaceMe"
hx-swap="outerHTML">
Load More Agents... <img class="htmx-indicator" src="/img/bars.svg">
Load More Agents... <img class="htmx-indicator" src="/img/bars.svg" alt="">
</button>
</td>
</tr>
@ -85,7 +85,7 @@ results (which will contain a button to load the *next* page of results). And s
<button class='btn primary' hx-get="/contacts/?page=${page + 1}"
hx-target="#replaceMe"
hx-swap="outerHTML">
Load More Agents... <img class="htmx-indicator" src="/img/bars.svg">
Load More Agents... <img class="htmx-indicator" src="/img/bars.svg" alt="">
</button>
</center>
</td>

5
www/content/examples/infinite-scroll.md
View File

@ -68,7 +68,7 @@ The last element of the results will itself contain the listener to load the *ne
function tableTemplate(contacts) {
return `<table hx-indicator=".htmx-indicator"><thead><tr><th>Name</th><th>Email</th><th>ID</th></tr></thead><tbody>
${rowsTemplate(1, contacts)}
</tbody></table><center><img class="htmx-indicator" width="60" src="/img/bars.svg"></center>`
</tbody></table><center><img class="htmx-indicator" width="60" src="/img/bars.svg" alt="Loading..."></center>`
}
function rowsTemplate(page, contacts) {
@ -87,6 +87,3 @@ The last element of the results will itself contain the listener to load the *ne
return txt;
}
</script>

8
www/content/examples/inline-validation.md
View File

@ -15,7 +15,7 @@ We start with this form:
<div hx-target="this" hx-swap="outerHTML">
<label>Email Address</label>
<input name="email" hx-post="/contact/email" hx-indicator="#ind">
<img id="ind" src="/img/bars.svg" class="htmx-indicator"/>
<img id="ind" src="/img/bars.svg" alt="Checking..." class="htmx-indicator"/>
</div>
<div class="form-group">
<label>First Name</label>
@ -39,7 +39,7 @@ When a request occurs, it will return a partial to replace the outer div. It mi
<div hx-target="this" hx-swap="outerHTML" class="error">
<label>Email Address</label>
<input name="email" hx-post="/contact/email" hx-indicator="#ind" value="test@foo.com">
<img id="ind" src="/img/bars.svg" class="htmx-indicator"/>
<img id="ind" src="/img/bars.svg" alt="Checking..." class="htmx-indicator"/>
<div class='error-message'>That email is already taken. Please enter another email.</div>
</div>
```
@ -115,7 +115,7 @@ Below is a working demo of this example. The only email that will be accepted i
<div hx-target="this" hx-swap="outerHTML">
<label for="email">Email Address</label>
<input name="email" id="email" hx-post="/contact/email" hx-indicator="#ind">
<img id="ind" src="/img/bars.svg" class="htmx-indicator"/>
<img id="ind" src="/img/bars.svg" alt="Checking..." class="htmx-indicator"/>
</div>
<div class="form-group">
<label for="firstName">First Name</label>
@ -133,7 +133,7 @@ Below is a working demo of this example. The only email that will be accepted i
return `<div hx-target="this" hx-swap="outerHTML" class="${errorMsg ? "error" : "valid"}">
<label>Email Address</label>
<input name="email" hx-post="/contact/email" hx-indicator="#ind" value="${val}" aria-invalid="${!!errorMsg}">
<img id="ind" src="/img/bars.svg" class="htmx-indicator"/>
<img id="ind" src="/img/bars.svg" alt="Checking..." class="htmx-indicator"/>
${errorMsg ? (`<div class='error-message' >${errorMsg}</div>`) : ""}
</div>`;
}

4
www/content/examples/value-select.md
View File

@ -25,7 +25,7 @@ Here is the code:
<option value="a1">A1</option>
...
</select>
<img class="htmx-indicator" width="20" src="/img/bars.svg">
<img class="htmx-indicator" width="20" src="/img/bars.svg" alt="Saving...">
</div>
```
@ -76,7 +76,7 @@ And they become available in the `model` select.
<option value="a3">A3</option>
<option value="a6">A6</option>
</select>
<img class="htmx-indicator" width="20" src="/img/bars.svg">
<img class="htmx-indicator" width="20" src="/img/bars.svg" alt="Saving...">
</div>
</form>`;
}

6
www/content/webring.md
View File

@ -25,13 +25,13 @@ title = "htmx webring"
<table id="nav-table" style="border: black 4px double; text-align: center">
<tr>
<td class="built-with-tds" style="border: 1px black solid">
<img width="200px" src="/img/createdwith.jpeg">
<img width="200px" src="/img/createdwith.jpeg" alt="Site created with htmx, The Right Way.">
</td>
<td width="70%" style="text-align: center; font-size: 20px; border: 1px black solid">
This Great <a href="https://htmx.org">htmx</a> Webring site is owned by <a href="https://bigsky.software">Your Name Here</a>.
</td>
<td class="built-with-tds" style="; border: 1px black solid"">
<img width="200px" src="/img/createdwith.jpeg">
<img width="200px" src="/img/createdwith.jpeg" alt="Site created with htmx, The Right Way.">
</td>
</tr>
<tr>
@ -81,7 +81,7 @@ title = "htmx webring"
transition the #webring's opacity to 100%
hide me then
show #show-sites">Return To Webring</a>]
<img src="/img/navigator.gif"
<img src="/img/navigator.gif" alt=""
_="on click from .nav-link
log 'here'
transition my opacity to 100%

2
www/static/test/manual/hxboost_relative_resources/nested/page2.html
View File

@ -7,6 +7,6 @@
<body style="padding:20px;font-family: sans-serif" hx-boost="true">
<a href="../index.html">Back To Page 1</a>
<p>Image should be displayed below</p>
<img src="img.png" />
<img src="img.png" alt="Image" />
</body>
</html>

2
www/static/test/manual/no-indicator-css.html
View File

@ -11,6 +11,6 @@
We are overriding the normal CSS inclusion with the meta directive <code>{"includeIndicatorStyles":false}</code>
so you should see the indicator because it is not being hidden by the default classes.
</p>
<img class="htmx-indicator" src="../img/bars.svg" width="200">
<img class="htmx-indicator" src="../img/bars.svg" alt="Loading..." width="200">
</body>
</html>

2
www/static/test/manual/yes-indicator-css.html
View File

@ -6,6 +6,6 @@
</head>
<body style="padding:20px;font-family: sans-serif">
<h1>You should not see bars here:</h1>
<img class="htmx-indicator" src="../img/bars.svg" width="200">
<img class="htmx-indicator" src="../img/bars.svg" alt="Loading..." width="200">
</body>
</html>