Why Are Some Shopware 6 Thumbnails Missing After Generation?
When managing a Shopware 6 store, handling media assets and thumbnails efficiently is essential for proper display across responsive layouts, product galleries, and marketing needs.
However, you may encounter a situation where some of your defined thumbnail sizes do not appear after running the thumbnail generation command.
This guide explains the root cause of this issue and provides a practical solution, including the full code override.
The Problem: Thumbnail Size Limit Restriction
By default, Shopware 6’s admin interface limits the number of thumbnail sizes it fetches to 25.
Even if you define more than 25 thumbnail sizes in your system, the additional ones are not displayed in the admin and aren’t used during regeneration.
This leads to missing thumbnails in your media folder configuration.
The Solution: Override Default Component Limit
The solution involves overriding the sw-media-modal-folder-settings component via a custom plugin.
We increase the query limit from 25 to a higher number (e.g., 50, 100, or 999), allowing the system to fully load and process all defined thumbnail sizes.
Key Steps (Summary):
- Override sw-media-modal-folder-settings.
- Modify the Criteria limit from 25 to 50 (or more).
- Register the override in your plugin’s main.js.
- Clear Shopware cache and rebuild administration assets.
- Re-run thumbnail generation with bin/console media:generate-thumbnails.
Developer Reference – Full Override Example
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | import template from 'src/app/asyncComponent/media/sw-media-modal-folder-settings/sw-media-modal-folder-settings.html.twig'; const { Component, Context } = Shopware; const { Criteria } = Shopware.Data; Component.override('sw-media-modal-folder-settings', { methods: { async createdComponent() { this.mediaFolder = await this.loadMediaFolder(); await this.getUnusedThumbnailSizes(); await this.getThumbnailSizes(); this.configuration = await this.mediaFolderConfigurationRepository.get(this.mediaFolder.configurationId, Context.api); this.mediaFolderConfigurationThumbnailSizeRepository = this.repositoryFactory.create( this.configuration.mediaThumbnailSizes.entity, this.configuration.mediaThumbnailSizes.source, ); // Increased limit to 50 this.configuration.mediaThumbnailSizes = await this.mediaFolderConfigurationThumbnailSizeRepository.search( new Criteria(1, 50), // Previously: (1, 25) Context.api, ); if (this.mediaFolder.parentId !== null) { this.parent = await this.mediaFolderRepository.get(this.mediaFolder.parentId, Context.api); this.parent.configuration = await this.mediaFolderConfigurationRepository.get(this.parent.configurationId, Context.api); } }, async ensureUniqueDefaultFolder(folderId, defaultFolderId) { const criteria = new Criteria(1, 50).addFilter( Criteria.multi('and', [ Criteria.equals('defaultFolderId', defaultFolderId), Criteria.not('or', [Criteria.equals('id', folderId)]), ]), ); const items = await this.mediaFolderRepository.search(criteria, Context.api); await Promise.all( items.map((folder) => { folder.defaultFolderId = null; return this.mediaFolderRepository.save(folder, Context.api); }), ); } } }); |
Conclusion & CTA
By applying this simple override, you unlock the ability to manage and display more than 25 thumbnail sizes in Shopware 6, ensuring a fully responsive and professional image strategy.
Need help implementing custom Shopware solutions or optimizing your store?
Explore our Shopware Development Services and let our experts support your next project.
Recent help desk articles
Greetings! I'm Aneesh Sreedharan, CEO of 2Hats Logic Solutions. At 2Hats Logic Solutions, we are dedicated to providing technical expertise and resolving your concerns in the world of technology. Our blog page serves as a resource where we share insights and experiences, offering valuable perspectives on your queries.
