Mkdocs-material: CSS for improving images in docs

[rcastley]

Hi,

Just want to say absolutely love this theme and putting it to great use. Whilst we have been developing our docs we have come up with a few CSS tweaks to improve image handling in our docs and just wanted to share them for consideration in including them in a future release.

Support for:

• Centering images in the page
• Adding shadow to images
• Adding borders to images
• Adding Zoom features to images

To use e.g. the zoom features just add #zoom to the end of the image URL

img {
    height: auto;
    width: auto;
    border: 1px solid #9f9f9f;
    transition: transform ease-in-out 0.3s;
}

img[src*="#shadow"] {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img:active[src*="#zoom"] {
    cursor: zoom-out;
    transform: scale(2.0);
}

img[src*="#zoom"] {
    cursor: zoom-in;
}

img[src*="#center"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img[src*="#no-border"] {
    border: 0px;
    width: 200px;
}

a.md-logo img {
    border: none;
}

Once again thank you :-)

[squidfunk]

Thanks, glad to hear that! 😄Those are some pretty cool hacks! I've never seen this technique, but it makes pretty much sense to me. However, I don't whether all users of the theme want those hacks included by default.

Do you have a public deployment where we can see them in action?

[rcastley]

@squidfunk

Zoom - https://signalfx.github.io/app-dev-workshop/module6/hotrod/ - Step 5 hover over NavBar. Click and hold to zoom

Shadow - https://signalfx.github.io/app-dev-workshop/module2/muting/ - modal dialogs

These could _potentially_ be included in default CSS as they are only activated when you append the image url e.g.

Open SignalFx in your browser and select the APM tab to open the APM UI.

![select APM](../images/module6/M6-l1-select-apm.png#zoom)

[facelessuser]

Why do it with odd source paths? There is already things like attr_list extension which allow you to add classes etc.

![zoom image](myimage.png){: .zoom}

Then instead of creating CSS that triggers off the path, you could go with a slightly more expected convention of triggering on a class.

[fveauvy]

Awesome, thanks a lot !

[squidfunk]

I guess we could add some more convenience classes via the attribute-lists extension. There's already .md-button and .md-button--primary which can be added to any link to be rendered as a button and which are used on the landing page, but it's not documented. Somebody can open a new issue for us to collect ideas on what other "components" would be useful besides zooming and buttons. We can then document everything under the Extensions tab.

[squidfunk]

I'm closing this issue with a lookout what's already possible - let's continue the discussion in a new issue!

[Button](#){ .md-button }
[:fontawesome-brands-github: GitHub](#){ .md-button .md-button--primary }
[:smile: Emojis](#){ .md-button }

!!! Buttons

    [Button](#){ .md-button }
    [:fontawesome-brands-github: GitHub](#){ .md-button .md-button--primary }
    [:smile: Emojis](#){ .md-button }

[Stephen-Gates]

As a new mkdocs-material user I've just discovered the .zoom idea above. I think it is really neat and exactly what I was looking for. Perhaps it is worth mentioning in the Image Attribute list section?

[squidfunk]

What would you like to document? The additional CSS for zooming? The problem with this approach is that it is more or less desktop-only. Scaling without a transform origin (or at least some context about the environment) will not work well on mobile. For this reason it’s more or less a hack, which is why it isn’t documented.

[Stephen-Gates]

True. I just tried it on my mobile and not pretty. Will try improve and if viable, document.