Assign a preview image

We activated our theme and updated it’s logo, but if you are distributing your module to others, you’ll also probably want to add a preview image to it. If you go to Admin > Content > Design > Themes, it shows all of the themes that are available to activate. And if you click View to view the theme, for example Luma, there’s a preview image of the theme. But if we go over to our theme, there is no preview image. This means it’s time to create one!

Create a new media directory in the root of our theme folder. Then, copy over the preview image for your theme. The core themes use a resolution of 800x800 for this image. If you don’t have a preview image, don’t worry, because I uploaded the sample preview image that you can use below this video.

You can name it whatever you wish, but it’s common convention to name it preview.jpg.

Once that is done, we can make Magento aware of this preview image by going back to our theme.xml file and create a new media node, with a child node named preview_image. The value of this node will be the location of our preview image, which is media/preview.jpg.

<?xml version="1.0"?>
<theme xmlns:xsi="<http://www.w3.org/2001/XMLSchema-instance>" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Juno</title>
    <parent>Magento/blank</parent>
    <media>
        <preview_image>media/preview.png</preview_image>
    </media>
</theme>

Now, we can clean the config cache with:

bin/magento cache:clean config

When we reload the admin area, we’ll see that our theme now has a preview image.

Now when we go back to this page and refresh, it won't find our theme. But there is another Juno theme that's populated. If we go ahead and check this out, we will now see this preview image. What happened is that when Magento reloaded it detected, the Juno theme was no longer installed and it reinstalled it with a new ID, and pull in that preview image. This is something you should be aware of. In almost every other scenario, you would create the media image preview at the time the theme was created, so anytime you distribute your theme this won't be really an issue.

This is a good mention though, just so you are aware that some of these values are cached in the database. If we then try to reload our page on the front end, it looks like we opened a can of worms here because now it's trying to load that theme with the ID of 4 that no longer exists. And that's because the 4 was assigned to that theme configuration. This is a pretty easy fix. All we need to do is go back to the admin and then go to Content, Configuration, go back to this Global Edit action, and then under Applied Theme, we can see it's set to No Theme because that theme 4 has been removed. This will reassign the Juno theme to the site, and when we Save and purge the cache,we should be able to go ahead and now reload our site.

That was a bit of a tangent with this media preview image, as it normally won't be an issue. Now that someone can preview our theme, our initial configurations all set for creating a custom theme, so we will now deep dive into page layouts which control how things are rendered on the screen.