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.

[maxcrn]

I have a problem : when I zoom an image with your CSS. The sides of the images are hidden by the rest of the page. I tried to put "overflow: visible" but it doesn't work. Have you got an idea on how to put the image on the foreground when it is zoomed.

[rcastley]

Here is my latest code @maxcrn

Javascript

document.querySelectorAll('img.zoom').forEach(item => {
    item.addEventListener('click', function () {
        this.classList.toggle('image-zoom-large');
    })
});

CSS

img {
    height: auto;
    width: auto;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px;
    background-color: #fff;
}

.shadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.zoom {
    transition: transform ease-in-out 0.5s;
    cursor: zoom-in;
}

.image-zoom-large {
    transform: scale(1.9);
    cursor: zoom-out;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 100;
    position: relative;
}

Then in the markdown use

![select APM](../images/apm/select-apm.png){: .zoom}

[maxcrn]

@rcastley Thanks, but I have the same issue with this code.
Here is the original picture :

Here is the problem when I click to zoom on it :

It gets hidden on the sides.
Have you got an idea on how to correct this ? I tried "overflow:visible" but it didn't work.

Thanks for your help !

[rcastley]

@maxcrn Confirmed it was also broken in my environment after updating Material theme. Here is the fix:

Javascript

document.querySelectorAll('.zoom').forEach(item => {
    item.addEventListener('click', function () {
        this.classList.toggle('image-zoom-large');
    })
});

CSS

img {
    height: auto;
    width: auto;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px;
    background-color: #fff;
}

.shadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.zoom {
    transition: transform ease-in-out 0.5s;
    cursor: zoom-in;
}

.image-zoom-large {
    transform: scale(1.5);
    cursor: zoom-out;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 100;
    position: absolute;
}

[oschusler]

I have update the CSS slightly, to make the content centered. In my case, I also have the theming on, so I add the bg-color variable to the background as well.

.shadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.zoom {
    transition: transform ease-in-out 0.5s;
    cursor: zoom-in;
}

.image-zoom-large {
    transform: scale(1.5);
    cursor: zoom-out;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 100;
    position: absolute;

    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    height: auto;
    width: auto;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px;
    background-color: var(--md-default-bg-color);
}

Might improve on the JS later (i.e. not pop the image out of the running text, and add an overlay behind the image which you can also click to minimize the image).

[champagnealexandre]

I have update the CSS slightly, to make the content centered. In my case, I also have the theming on, so I add the bg-color variable to the background as well.

.shadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.zoom {
    transition: transform ease-in-out 0.5s;
    cursor: zoom-in;
}

.image-zoom-large {
    transform: scale(1.5);
    cursor: zoom-out;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 100;
    position: absolute;

    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    height: auto;
    width: auto;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px;
    background-color: var(--md-default-bg-color);
}

Might improve on the JS later (i.e. not pop the image out of the running text, and add an overlay behind the image which you can also click to minimize the image).

You can replace position: relative with position: fixed to make the images zoom in the center of the user’s screen, and not the center of the page. If a page contains a large number of images, the zoomed-in image can appear in odd places otherwise.

By the way, thanks for the snippets!

[Sieboldianus]

Thank you! I did not like the glightbox, but this minimal css was awesome. I removed position: absolute and added max-width: 100vw:

.image-zoom-large {
    transform: scale(1.5);
    cursor: zoom-out;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 100;
	max-width: 100vw;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    height: auto;
    width: auto;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px;
    background-color: var(--md-default-bg-color);
}

I also had to modify the js to make it work with instant navigation:

// Hook for zoom in image
document$.subscribe(function() {
    var images = document.querySelectorAll(".zoom")
    images.forEach(item => {
        item.addEventListener('click', function () {
            this.classList.toggle('image-zoom-large');
        })
    })
  })

• this is following https://squidfunk.github.io/mkdocs-material/reference/data-tables/