Login with:


Not a member? Sign Up

Forgot Password?

Signup with:


Already have an account? Log in

MDW WordPress Tutorial Media


Written by Michał Krawczyk ,

Material Design for Wordpress allows you to embed media elements on your website. Embedded media elements are fully responsive so they fit in all users' screen size.


Images are defined with the [img] shortcode. Tip: The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). If a browser cannot find an image, it will display the value of the alt attribute.

Image in comparison with figure class has one small, hance important difference - image does not contain caption, while figure is always with the caption.

Media element - Material Design for WordPress
[img alt="Alternate text"]https://mdbootstrap.com/wp-content/uploads/2016/06/widgets1-min.jpg[/img]

Embed Media

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

<!-- 16:9 aspect ratio -->
[media dimension="16by9"]https://www.youtube.com/embed/8SbUC-UaAxE[/media]

<!-- 4:3 aspect ratio -->
[media dimension="4by3"]https://www.youtube.com/embed/8SbUC-UaAxE[/media]


It is recommended to paste the copied code into the "Text" area, otherwise, the shortcode may not work properly. If you copy the code into "Visual" area, it may contain additional operators, which might break the media.

Image size

Remember when I mentioned in the Post lesson, that you can change the size of the image in the post? In the Settings/Media, you can specify the particular size which will be assign to the Thumbnail, Medium and Large size of the image.

Additionally, you may choose whether your thumbnail will be cropped to exact size or left proportional. Medium and Large size are by default proportional, therefore you just set the maximal width and height of the photo. In a result, your photos sizes depend strongly on the original size of the image.

Cropped Thumbnail

Do you want to share?

About author

User avatar

Michał Krawczyk

Digital Marketing Analyst at MDW with a strong Research background, student of Interfaculty Individual Studies in the Humanities at the Jagiellonian University

Leave a reply

Card image cap

Stay up to date

Subscribe to our newsletter

Rapid change in the world of web development is its inseparable quality. New updates and features are being constantly released, almost every week. Don't forget to be up to date.