Se uma imagem for mais larga que a coluna de conteúdo principal, como geralmente ocorre em telas menores, o DevSite vai restringir automaticamente a largura da coluna. No entanto, se a imagem tiver os atributos width e height definidos, apenas a largura será redimensionada, causando distorções. Consequentemente, não defina o height da imagem. Isso significa que a página pode ser redesenhada se a imagem for carregada lentamente (causando um salto), mas isso é melhor do que uma imagem que não cabe na tela.
É possível aplicar class="screenshot" a uma imagem para dar a ela uma borda que a compensa do texto próximo. Isso é usado geralmente para capturas de tela com fundo branco que se perdem na página. Não use para imagens que não precisam dele.
Flutuante ao lado do texto
A imagem à direita também tem class="attempt-right", que flutua a imagem à direita em telas maiores, mas força a imagem a um layout vertical em telas menores, tablets e dispositivos menores, em que a flutuação à direita causaria problemas. Também está disponível class="attempt-left". Para usar attempt-left e attempt-right juntos, verifique se o elemento attempt-left vem primeiro.
Quando as imagens estão flutuando, elas não podem exceder 50% da largura da coluna. Se forem, elas serão redimensionadas.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
É possível usar as mesmas classes para flutuar outros elementos, como um <figure> que contenha uma imagem e uma legenda:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Limpar texto flutuante
Para evitar que o texto seja quebrado em torno de um elemento flutuante e exibido na largura nativa, adicione uma classe clear aos elementos afetados que seguem o elemento flutuante.
<p class="clear">Hello world.</p>
Exemplo com a classe clear
Neste exemplo, o segundo parágrafo inclui uma classe clear.
Este parágrafo envolve a imagem flutuante . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Este parágrafo tem uma classe clara e não envolve a imagem flutuante. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Exemplo sem a classe clara
Neste exemplo, os dois parágrafos são ajustados à imagem flutuante.
Este parágrafo envolve a imagem flutuante. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Este parágrafo envolve a imagem flutuante. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Imagens do tema escuro
O DevSite fornece um pequeno conjunto de nomes de classe que podem ser aplicados a imagens para modificar a aparência delas quando o tema escuro está ativado.
Escurecimento da imagem
Por padrão, todas as imagens, exceto arquivos SVG, ficam um pouco mais escuras no tema escuro.
Para remover o escurecimento padrão de uma imagem quando o tema escuro estiver ativado, adicione uma classe no-filter à imagem:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Como inverter uma imagem
Para imagens com uma paleta de cores monocromáticas pretas ou escuras, adicione uma classe invert à imagem para que ela apareça em branco/claro no tema escuro:
<img src="/site-assets/logo-github.png" class="invert" alt="">
Para uma página _index.yaml, adicione invert ao campo classname de um item de linha:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Imagem separada da variante do tema escuro
Se você quiser fornecer uma imagem separada que só aparece quando o tema escuro está ativado, envolva o elemento <img> em um elemento <picture> e adicione um elemento <source> para a variante do tema escuro.
No exemplo abaixo, há dois arquivos SVG para a marca nominativa do Google em um elemento <picture>. Quando o tema escuro está desativado, o arquivo de imagem no elemento <img> é exibido, mostrando a marca de texto com as quatro cores da marca do Google. Quando o tema escuro está ativado, o arquivo de imagem no elemento <source> é mostrado, e a marca registrada é totalmente branca e não tem cores da marca.
Exemplo
Código
<picture>
<source
srcset="/devsite/images/google-dark-theme.svg"
media="(prefers-color-scheme: dark)"
class="devsite-dark-theme"
alt="">
<img src="/devsite/images/google.svg" alt="">
</picture>
Observações
Como o tema escuro é ativado por uma flag de recurso, observe o seguinte sobre os atributos do elemento <source>:
O elemento <source> precisa incluir uma classe devsite-dark-theme, que fornece um gancho para o front-end do DevSite atualizar o atributo de mídia e o valor dele, dependendo da opção de tema escuro selecionada pelo usuário: light, dark ou device.
O atributo de mídia precisa incluir uma consulta de mídia (prefers-color-scheme: dark) no valor.
Se você já tiver elementos <source> com consultas media no atributo de mídia, anexe as consultas de mídia atuais com and (prefers-color-scheme: dark) ou adicione um novo elemento <source> cujo valor do atributo de mídia seja (prefers-color-scheme: dark). A consulta media e o valor dela serão removidos ou substituídos de acordo com a opção de tema escuro selecionada pelo usuário.
Embora o nome do arquivo da imagem da variante do tema escuro no atributo srcset possa ser qualquer coisa, é recomendável anexar -dark-theme ao nome do arquivo da imagem.