Skip to content

New image placeholders #2105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
seho-nl wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

New image placeholders #2105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bbc1b27
Update alignment.md
seho-nl Feb 25, 2025
a851780
* Update placehold.it to placehold.co in other doc files.
Feb 25, 2025
dc88c60
Remove idea folder...
Feb 25, 2025
25b48df
Fix coloured images with correct syntax.
Feb 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,4 @@ inky
.download
foundation-emails.zip
bower_components
.idea/
14 changes: 7 additions & 7 deletions docs/pages/alignment.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ Just wrap the `<center>` around an image you’ll be good to go. Inky will handl
<row>
<columns>
<center>
<img src="https://placehold.it/200?text=center" alt="image of clever meme that made me chuckle">
<img src="https://placehold.co/200?text=center" alt="image of clever meme that made me chuckle">
</center>
</columns>
</row>
Expand All @@ -98,7 +98,7 @@ If you need to center an image only on mobile clients, you can apply the `.small
<container>
<row>
<columns small="12" large="3" class="large-offset-1">
<img class="small-float-center" src="https://placehold.it/200?text=small-center" alt="please don't forget me">
<img class="small-float-center" src="https://placehold.co/200?text=small-center" alt="please don't forget me">
</columns>
<columns small="12" large="8">
<h4 class="small-text-center">What is the deal?</h4>
Expand All @@ -118,9 +118,9 @@ You can also align images to the left or the right.
<container>
<row>
<columns>
<img class="float-left" src="https://placehold.it/200?text=left" alt="">
<img class="float-center" src="https://placehold.it/200?text=center" alt="">
<img class="float-right" src="https://placehold.it/200?text=right" alt="">
<img class="float-left" src="https://placehold.co/200?text=left" alt="">
<img class="float-center" src="https://placehold.co/200?text=center" alt="">
<img class="float-right" src="https://placehold.co/200?text=right" alt="">
</columns>
</row>
</container>
Expand Down Expand Up @@ -198,7 +198,7 @@ You can vertically align your content within columns by using `valign` attribute
```inky_example
<row>
<columns large="3" valign="top">
<img class="float-right" src="https://placehold.it/50" alt="">
<img class="float-right" src="https://placehold.co/50" alt="">
</columns>
<columns large="3" valign="bottom">
<h4>Bottom</h4>
Expand All @@ -208,7 +208,7 @@ You can vertically align your content within columns by using `valign` attribute
<p style="margin-bottom: 0;" class="text-right subheader">SUBHEADLINE</p>
</columns>
<columns large="3" valign="middle">
<img class="small-float-center" src="https://placehold.it/250" alt="">
<img class="small-float-center" src="https://placehold.co/250" alt="">
</columns>
</row>
```
Expand Down
8 changes: 4 additions & 4 deletions docs/pages/grid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,8 @@ Collapsing a row removes the gutters from every column, which is the spacing bet

```inky_example
<row class="collapse">
<columns large="6"><img src="https://placehold.it/300x150/777777/&text=These columns touch" alt=""></columns>
<columns large="6"><img src="https://placehold.it/300x150/999999/&text=These columns touch" alt=""></columns>
<columns large="6"><img src="https://placehold.co/300x150/777777/white?text=These columns touch" alt=""></columns>
<columns large="6"><img src="https://placehold.co/300x150/999999/white?text=These columns touch" alt=""></columns>
</row>
```

Expand All @@ -112,7 +112,7 @@ Use the class `.large-offset-n` to create an offset, where `n` is the amount of

```inky_example
<row>
<columns large="3" class="large-offset-3"><img src="https://placehold.it/150x150/999999/&text=offset column" alt=""></columns>
<columns large="3"><img src="https://placehold.it/150x150/999999" alt=""></columns>
<columns large="3" class="large-offset-3"><img src="https://placehold.co/150x150/999999/white?text=offset column" alt=""></columns>
<columns large="3"><img src="https://placehold.co/150x150/999999/white" alt=""></columns>
</row>
```
4 changes: 2 additions & 2 deletions docs/pages/thumbnail.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ The `.thumbnail` class can be applied directly to an `<img>` element, or an `<a>
The thumbnail style adds padding and a box shadow to an image. To use it, just add the class `.thumbnail` to an image element.

```inky_example
<img src="https://placehold.it/200x200" class="thumbnail">
<img src="https://placehold.co/200x200" class="thumbnail">
```

<!-- <table class="thumbnail">
<tr>
<td><img src="//placehold.it/300x300" class="thumbnail" /></td>
<td><img src="https://placehold.co/300x300" class="thumbnail" /></td>
</tr>
</table> -->
2 changes: 1 addition & 1 deletion docs/pages/wrapper.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ Creating a fluid header with the `<wrapper>` component is pretty straight forwar
<container>
<row class="collapse">
<columns small="6" valign="middle">
<img src="https://placehold.it/200x50/663399">
<img src="https://placehold.co/200x50/663399/white">
</columns>
<columns small="6" valign="middle">
<p class="text-right">BASIC</p>
Expand Down