Skip to content

Commit

Permalink
tweaking images again
Browse files Browse the repository at this point in the history
  • Loading branch information
MattReimer committed Dec 13, 2023
1 parent ca2abc3 commit b397ebe
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 7 deletions.
6 changes: 3 additions & 3 deletions sites/devsite/content/page/demo.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -191,12 +191,12 @@ Quick and dirty. **Whenever possible please do images like this**. they are not

#### RSStaticImage (instead of `<img />`)

If you need a bit more control you can use the `<RSStaticImage />` HTML syntax. You can use it the same as an `<img />` tag with all the same attributes.
If you need a bit more control you can use the `<RSStaticImage />` HTML syntax. You can use it the same as an `<img />` tag with all the same attributes. As you can see though, this is not necessarily going to play nice with our theme.

```typescript
<RSStaticImage src='https://placekitten.com/200/300' style={{opacity: 0.2, border: "20px solid orange"}} />
<RSStaticImage src='/images/demoStatic.jpg' style={{opacity: 0.2, border: "20px solid orange"}} />
```
<RSStaticImage src='https://placekitten.com/200/300' style={{opacity: 0.2, border: "20px solid orange"}} />
<RSStaticImage src='/images/demoStatic.jpg' style={{opacity: 0.2, border: "20px solid orange"}} />

#### Caveats and notes:

Expand Down
5 changes: 2 additions & 3 deletions theme/src/components/StaticImage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
*/

import React from 'react'
import { withPrefix } from 'gatsby'

type RSStaticImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
src: string
Expand All @@ -12,7 +13,7 @@ export const RSStaticImage: React.FC<RSStaticImageProps> = ({ src, ...rest }) =>
// If the image is a relative path, append the pathPrefix from gatsby-config.js
let newSrc: string = src
if (newSrc.startsWith('/')) {
newSrc = `${process.env.PATH_PREFIX || ''}${newSrc}`
newSrc = withPrefix(newSrc)
}

return (
Expand All @@ -21,8 +22,6 @@ export const RSStaticImage: React.FC<RSStaticImageProps> = ({ src, ...rest }) =>
style={{
height: 'auto',
margin: '0 auto', // Used to center the image
// Now fill the box and preserve the aspect ratio and make sure it never
// scales bigger than the original image.
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'contain',
Expand Down
9 changes: 8 additions & 1 deletion theme/src/templates/PageTemplate.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,14 @@ const PageTemplate = ({ data: { site, mdx: page, allMdx: childPages }, children,

return (
<Layout location={location} title={siteTitle}>
<Box component="article" itemScope itemType="http://schema.org/Article">
<Box
component="article"
itemScope
itemType="http://schema.org/Article"
sx={{
position: 'relative',
}}
>
{!page.frontmatter.isHome ? (
<>
<Box component="header">{pageHeading}</Box>
Expand Down

0 comments on commit b397ebe

Please sign in to comment.