Hello,
I have several questions related to issues I have with images.
1) I notice that images that I upload are sized differently to scale in different elements. For example, on my homepage for collabhype.com, the images in the features articles are sized to scale differently from the posts below. Is there a way to change this or make sure it’s always consistent so images don’t get cut off?
2) For the tagdivslider image gallery, all the images I upload get scaled differently and get cut off. For example, https://collabhype.com/uniqlo-x-disney-illuminates-mickey-and-the-sun/, the images in the gallery are cut off. Is there a way to change this? Or do you recommend an alternative image gallery?
3) Images within my articles posts don’t seem to load right away until I reload the page. For example, https://collabhype.com/mexico-66-x-disney-polka-dots/. What is the reason?
4) When I embed an Instagram post like in this article, https://collabhype.com/kid-dangerous-x-native-son-empowers-pride/, the image is huge. Is there an easy way to resize this? Similarly for the tagdivslider image galleries. Is there a way to make these smaller or use an alternative with more options?
Thanks,
Matt
Hello,
1. The theme will create the thumbs necessary for the blocks but it cannot enlarge images. Your image is smaller than the thumb needed for that block. Your image is 640×415 while the thumb requires 741px width minimum.
2. Please use the “force regenerate thumbnails” plugin to regenerate all your thumbs.
3. It seems this could be a plugin conflict. Please test this without plugins as it seems the js for the lazyload animation does not get through properly.
4. The width of the element comes from the iframe itself. Please check iframe controls to select a different width for your embed.
Thank you!
Thanks for the reply.
1. I didn’t realize that the thumb requires 741px width minimum. Where can I find the minimum or ideal picture image sizes for each element in this theme, so I can adjust accordingly?
3. For the suggestion of plugin conflicts. I’ve heard this suggestion before, but am not using any plugin that’s different than what is recommended in your documentation. Are there any other suggestions? If I can’t using this theme with basic popular plugins, then it’s not useful.
4. Where do I check and change iframe controls of image galleries and instagram posts?
Hi,
1. In the theme panel the thumbnail sizes are mentioned along which element uses them
– https://www.screencast.com/t/Bgp6wElkwXd2
It would depend on what elements like blocks/grids you are using. So for example big grids will require bigger original images to be set as featured images.
The thumbnails will also be affected by image aspect ratio
– https://forum.tagdiv.com/thumbnails-vs-featured-image-size/
The same image will produce different results depending on module.
2. I see you use the Jetpack lazy load, try disabling that and check if the images are displayed properly
– https://jetpack.com/support/lazy-images/
The theme already applies a lazy load, so there might be a conflict there
– https://www.screencast.com/t/QjSh9cH1eb
4.The embed seems to adapt to the container it is in, it will take 100% of the available space. So the original image you used on Instagram of 460px would be stretched to fill the available space
– https://www.screencast.com/t/qNWXlhm8C
So in this case that embed would look best if it was forced to display as auto size and maybe centered
– https://www.screencast.com/t/vPobOmY3L
.td-post-content iframe.instagram-media {
width:auto!important;
margin: auto!important;
}
Thanks
1) What does the “force regenerate thumbnails” plugin do to resolve my problem? When I upload images, I am taking various images from the web and reusing them. As a result, they are unlikely to be an exact match of the recommended block/grid element resolutions. Will the plugin resolve this? Is there an easier way to make sure the images auto-resize appropriately? Or do I have to edit (ex. crop, resize, etc.) each image one at a time before uploading? Or is it recommended to always upload a larger resolution to allow the auto-resize to downsize appropriately?
2) As for the lazyloading. I have disabled this but I get the same result. When I load the homepage for the first time, all the images up to the first article under “The Latest” load. Then as I scroll down there’s a delay before all the other images load.
3) Where do you make changes to edit the iframe controls to resize? Can this be done within the theme or just for a specific post?
Thanks
hello,
1) The force regenerate plugin deletes old thumbnails and creates the new thubs required by the theme. if your image is big enough to fit the thumbnail contianer, the proper thumbnail will be created. But as Simion mentioned, you need to have images at least the size of the thumbnail you want them to show up in.
2) Are you maybe referring to the infinite load you have set as pagination? The block pagination causes the load of the next few posts to be a bit delayed. Please check the block pagination if you do not want it paginated and want all the articles loaded on the first page load.
3) unfortunately the theme cannot handle iframe controls. Iframes are handled by the embed code from the iframe source.
Thank you!
Hi Bogdon,
1) Do I need to run this plug every time I create a post and upload/new images? When am I supposed to use this? Is there any risk that I will lose all my images? When you say it deletes old images and regenerates, does that mean the newly regenerated images are saved in the Media Library?
2) If you visit my website or see the screenshot (http://www.screencast.com/t/2bdHvdRJ), as I’m scrolling down the homepage, it’s only the images that are delayed in displaying, except the first article. The article posts and text look to be loaded immediately. Is this behavior or infinite scrolling or lazy loading? Or is this a performance issue?
3) Simion mentioned above that embed would look best if it was forced to display as auto size and maybe centered
– https://www.screencast.com/t/vPobOmY3L
.td-post-content iframe.instagram-media {
width:auto!important;
margin: auto!important;
}
Where do I update this code?
Thanks
Hi,
1. No, the regeneration is used for older content. Images you upload since the theme has been activated will automatically be used for thumbnails.
I believe the force regenerate plugin will remove older thumbs which are not needed anymore, keep only what is required. All the images are kept in the wordpress media library by default.
2. That would be the lazy loading, images not in view will not be loaded. Once you scroll to them they will be visible
– https://forum.tagdiv.com/newsmag-loading-image-effects/
This setting can be disabled if needed, in the theme panel.
3. Such CSS codes can be entered in the theme panel, custom code section
– https://www.screencast.com/t/STw0yKeHhjkZ
Seems I forgot to mention it above, sorry.
Thanks
Hello,
I have used the “force regenerate thumbnails” plugin as you have suggested multiple times, but my images on my image galleries are still overly enlarged and offset. See the gallery here as an example. https://collabhype.com/vans-x-marvel-black-panther-sk8-hi-roars-with-style/
How can I fix this? Can the images I upload be autoresized? Should I use a different gallery plugin?
thanks
Hi,
They are cropped, because the theme is cropping all the thumbnails it makes. A center top method is used, which is considered to be better overall. So in this case the center top of the images will be focused.
You could try some gallery plugins and make tests, choose the one that displays the images as needed. Try free plugins
– https://premium.wpmudev.org/blog/wordpress-gallery-plugins/
– https://kinsta.com/blog/wordpress-photo-gallery-plugins/
Thanks
Is this cropping behavior applied to all images displayed on this theme, or just the slider gallery? If so, how can this image sizing issue be resolved across the theme?
If a new gallery plugin is required, what is the benefit of using the force regenerate thumbnails plugin? What problem does it solve?
Thanks
It is applied to all the thumbnails the theme creates, including the gallery
– https://forum.tagdiv.com/featured-image/
– https://forum.tagdiv.com/thumbnails-vs-featured-image-size/
It is not really an issue, that is how the theme is supposed to work. The focus will be on the center top of the images used.
Let’s take this image you use in the gallery for example, it has top and bottom empty space
– https://collabhype.com/wp-content/uploads/2018/09/black_panther_3.png
When the theme crops it and focuses on the center top, the result will be like this
– https://www.screencast.com/t/oKFrFAX7UCJ
Having better results also depends on the images you use in the first place.
Using a regenerate thumbnails plugin is needed in these cases
– https://forum.tagdiv.com/thumbnails-fix-strange-looking-images-on-blocks/
In this case regenerating will not do anything, the same thumbnails will be created.
I suggested you try a gallery plugin which may display images differently. Maybe try installing a few and make tests in a test post, with the same images from your media library.
