- NewspaperRetina Images
- Thumbnails vs. Featured image size
- NewspaperIntroduction to CPT and ACF with Newspaper Theme
- NewspaperFlex Block Settings Guide
- NewspaperThe Newspaper Mobile Theme: Introduction
- NewspaperBig Grid Flex Settings
- NewspaperAd Box Element and Ads Overview
- NewspapertagDiv Composer Tutorial
- NewspaperThe Mobile Theme
- NewspaperUsing Other Ads
- NewspaperTheme Thumbs
- NewspaperHeader ads
- NewspaperSidebar ads
- NewspaperArticle Ad
- NewspaperPost template ads
- NewspaperAbove footer ads
Hi,
The theme uses the add_image_size() function and the featured image is cropped to different sizes(thumbs) used on modules/blocks. So for mobile devices it is not used another thumb and it is scaled that’s why this error appear.
To have a different image size for each device your will have to create a script to crop the image also for tablets and phones, but even then you may have this errors as like you know there many resolutions for these devices and I’m afraid it will be almost impossible to achieve this.
Thanks!
I wanted to change currently availiable image sizes. I’ve managed to do that (I need 600×400 image size on featured). td-config.php is the file i think. How safe is this regarding the aspect of future theme updates?
Regards,
Ivan
Hi,
I’m having an issue with thumbnails size. Not all thumbnails dimensions are created for my featured images and the result is the one you can see here, with the image that is not cropped and overlaps the contents below (Block 18)
I ran both “Regenerate thumbnails” and “Force regenerate thumbnails” plugin with no result.
If I see their output I see that not all dimensions are generated for each image, as you can see here
(the one of the screenshot above should have been td_696x385)
Finally, this is the part of my td_config.php file that goes about thumbnails sizes. All thumbnails sizes are active in the theme control panel
/**
* the thumbs used by the theme
* Thumb id => array parameters. Wp booster only cuts if the option is set from theme panel
*/
td_api_thumb::add('td_80x60',
array(
'name' => 'td_80x60',
'width' => 80,
'height' => 60,
'crop' => array('center', 'top'),
'post_format_icon_size' => 'small',
'used_on' => array(
'MX2', 'Block 18', 'Block 19', 'Live search', 'tagDiv Image Gallery thumbs'
)
)
);
td_api_thumb::add('td_90x90',
array(
'name' => 'td_90x90',
'width' => 90,
'height' => 90,
'crop' => array('center', 'top'),
'post_format_icon_size' => 'small',
'used_on' => array(
'Prox Dischi Vert', 'tagDiv Image Gallery thumbs'
)
)
);
td_api_thumb::add('td_100x70',
array(
'name' => 'td_100x70',
'width' => 100,
'height' => 70,
'crop' => array('center', 'top'),
'post_format_icon_size' => 'small',
'used_on' => array(
'Module 6, 7', 'Block 1, 2, 7, 8, 16'
)
)
);
td_api_thumb::add('td_350x350',
array(
'name' => 'td_350x350',
'width' => 350,
'height' => 350,
'crop' => array('center', 'top'),
'post_format_icon_size' => 'small',
'used_on' => array(
'Lista dischi, Altri dischi'
)
)
);
td_api_thumb::add('td_218x150',
array(
'name' => 'td_218x150',
'width' => 218,
'height' => 150,
'crop' => array('center', 'top'),
'post_format_icon_size' => 'normal',
'used_on' => array(
'Module 10, MX4, MX7, MX13, Mega menu, Related posts', 'Block 11, 15, 16, 18, Big grid 6'
)
)
);
td_api_thumb::add('td_265x198',
array(
'name' => 'td_265x198',
'width' => 265,
'height' => 198,
'crop' => array('center', 'top'),
'post_format_icon_size' => 'normal',
'used_on' => array(
'Big grid 1, 3, 7 - small image'
)
)
);
td_api_thumb::add('td_324x160',
array(
'name' => 'td_324x160',
'width' => 324,
'height' => 160,
'crop' => array('center', 'top'),
'post_format_icon_size' => 'normal',
'used_on' => array(
'Module 1, 2', 'Block 2, 3, 4, Big grid 2'
)
)
);
td_api_thumb::add('td_324x235',
array(
'name' => 'td_324x235',
'width' => 324,
'height' => 235,
'crop' => array('center', 'top'),
'post_format_icon_size' => 'normal',
'used_on' => array(
'Module 3, 4, 5, 11, MX3', 'Block 1, 5, 6, 13, 17, 20'
)
)
);
td_api_thumb::add('td_324x400',
array(
'name' => 'td_324x400',
'width' => 324,
'height' => 400,
'crop' => array('center', 'top'),
'post_format_icon_size' => 'normal',
'used_on' => array(
'Slide - 1 column'
)
)
);
td_api_thumb::add('td_356x220',
array(
'name' => 'td_356x220',
'width' => 356,
'height' => 220,
'crop' => array('center', 'top'),
'post_format_icon_size' => 'normal',
'used_on' => array(
'Module MX1, MX12', 'Block 14, 19', 'Big grid 5, 7, 8'
)
)
);
td_api_thumb::add('td_356x364',
array(
'name' => 'td_356x364',
'width' => 356,
'height' => 364,
'crop' => array('center', 'top'),
'post_format_icon_size' => 'normal',
'used_on' => array(
'Module MX14', 'Big grid 8'
)
)
);
td_api_thumb::add('td_533x261',
array(
'name' => 'td_533x261',
'width' => 533,
'height' => 261,
'crop' => array('center', 'top'),
'post_format_icon_size' => 'normal',
'used_on' => array(
'Module MX11', 'Big grid 3'
)
)
);
td_api_thumb::add('td_696x385',
array(
'name' => 'td_696x385',
'width' => 696,
'height' => 385,
'crop' => array('center', 'top'),
'post_format_icon_size' => 'normal',
'used_on' => array(
'Block 18','Module MX8', 'MX800', 'Block News List'
)
)
);
td_api_thumb::add('td_534x462',
array(
'name' => 'td_534x462',
'width' => 534,
'height' => 462,
'crop' => array('center', 'top'),
'post_format_icon_size' => 'normal',
'used_on' => array(
'Module MX5,', 'Big grid 1, 3, 4, 6'
)
)
);
td_api_thumb::add('td_696x0',
array(
'name' => 'td_696x0',
'width' => 696,
'height' => 0,
'crop' => array('center', 'top'),
'post_format_icon_size' => 'normal',
'used_on' => array(
'Default post template', 'Post template 2', 'Post template 11', 'Module 12, 13, 15', 'Smart list style 1, 2, 5, 6'
)
)
);
td_api_thumb::add('td_741x486',
array(
'name' => 'td_741x486',
'width' => 741,
'height' => 486,
'crop' => array('center', 'top'),
'post_format_icon_size' => 'normal',
'used_on' => array(
'MX9', 'Big grid 2'
)
)
);
td_api_thumb::add('td_1068x580',
array(
'name' => 'td_1068x580',
'width' => 1068,
'height' => 580,
'crop' => array('center', 'top'),
'post_format_icon_size' => 'normal',
'used_on' => array(
'Slide - 3 column'
)
)
);
td_api_thumb::add('td_1068x530',
array(
'name' => 'td_1068x530',
'width' => 1068,
'height' => 530,
'crop' => array('center', 'top'),
'post_format_icon_size' => 'normal',
'used_on' => array(
'Bio DP'
)
)
);
td_api_thumb::add('td_1068x300',
array(
'name' => 'td_1068x300',
'width' => 1068,
'height' => 300,
'crop' => array('center', 'top'),
'post_format_icon_size' => 'normal',
'used_on' => array(
'Concerti'
)
)
);
td_api_thumb::add('td_1068x0',
array(
'name' => 'td_1068x0',
'width' => 1068,
'height' => 0,
'crop' => array('center', 'top'),
'post_format_icon_size' => 'normal',
'used_on' => array(
'Post template 3, Post template 4, Post template 9, Post template 10', 'Smart list style 1, 2, 5, 6'
)
)
);
td_api_thumb::add('td_0x420',
array(
'name' => 'td_0x420',
'width' => 0,
'height' => 420,
'crop' => array('center', 'top'),
'post_format_icon_size' => 'normal', //what play icon to load (small or normal)
'used_on' => array(
'tagDiv Image Gallery'
)
)
);
You can upload any image to your media folder, or ftp to a folder like /assets/ in your public root.
Docs for using non-adsense ads are in the theme docs, right side of the page under the ‘ads’ section.
to wit: https://forum.tagdiv.com/newsmag-using-other-ads/
so, by the example in the theme docs, for a custom ad using a local image you upload, you’d need to put in your own HTML code, as per the EXAMPLE:
Show different ads depending on the device:
* do not use this method for AdSense. This is just for custom ads. For AdSense just paste your full code in the box 🙂 and customize the ad via the on of switches and the predefined sizes.
<div class="td-visible-desktop">
<!-- Your NON AdSense code here - this ad will show only on desktops -->
</div>
<div class="td-visible-tablet-landscape">
<!-- Your NON AdSense code here - this ad will show only on tablets in landscape orientation -->
</div>
<div class="td-visible-tablet-portrait">
<!-- Your NON AdSense code here - this ad will show only on tablets in portrait orientation -->
</div>
<div class="td-visible-phone">
<!-- Your NON AdSense code here - this ad will show only on phones -->
</div>
Hello,
The featured images work like this: https://forum.tagdiv.com/featured-image/
You have to be careful of the images you upload and check how they are displayed in different blocks. In the theme panel->block settings you will see a section for thumbnails: http://screencast.com/t/Dt7016hmpr6. These are the sizes used across the site. You need to upload images bigger than the block thumbnail you want it to display in. I hope this helps.
Thank you!
Hello Alfredo,
The thumbnail size of big grid 3 is 534 X 462. Please make sure your images are bigger than these sizes otherwise your images will not fit the big grid. As for the YouTube video thumbnail, the theme does not control the image size of the YouTube video’s featured image. You could try to regenerate your thumbs using ‘Force regenerate’ and if the problem is still there, you can use the ‘Thumbnail upscale’ plugin.
Thank you!
Hi,
When you upload a featured image it will be cropped to different sizes so the thumbs will be used on modules. If you use all the modules you will have to enable the thumbs on blocks and modules so all these thumbs will be generated – http://screencast.com/t/alnwgtw5n
Please note that the featured image size should not be smaller than the thumb used on module as the WordPress doesn’t enlarge images. Lucian already provided an example on email regarding an image from your site.
Thanks!
hi
would like to know if it is possible to resize the Slide Block in Visual Composer. I am using Block 7 which calls for the Featured Image to be 4:3 ratio, but the Slide Block resizes the same image to be 300×350 vertical.
thanks
Hi,
Please explain why the theme doesn’t use small size for feature images?
Of course, I have done the following actions:
– Install and activate the theme
– Install Simple-image-sizes plugin
– Regenerate the thumbnails
Sorry, the urgent thing I need to solve is a problem with adsense ad and the exterior of the ad.
You can see in the image http://screencast.com/t/RHiBUQA9
I did remove all the margin etc.. I still get those grey marks up and down the ad. have you seen that problem before. Tjis happens with all the ad sizes, I’ve tried. This happens when I’m putitng in ads manually, not from the ads dashboard (not precise enough, as I need to put in the ad precisely into the content)
(I’m sorry maybe I should open a new discussion for that), but I need to solve this before I solve the category page missing.
Thank you !
Greetings,
We are using latest version of WordPress and Newsmag available. We are using different backgrounds for different categories. But when we enable clickable background ad, other backgrounds direct clicks to same url.
What we need is, defining different clickable background images for different categories with different urls. How can we do this?
This is our primary concern now.
Also some advertisers are not happy with background ad because they can’t correctly see the 1920×1080 backgrounds in their 1366×768 laptops or netbooks. Although I’m well aware we are in the age of at least Full HD, they are not. My suggestion for future updates is an option to include lower resolution devices in the background, as in the ad system where we can choose lower resoultion or different sizes for different devices. But this time different backgrounds for different resoultions.
This is not our primary concern but I believe such an option would increase viability of Newsmag for medium, large publishers as a main theme or system. I’m also aware that you may just ask us to customize our theme with a freelancer for such changes. But that road comes with update and maintenance difficulties and other unforseen bugs.
Best Regards,
Ran the update script, updates plugins, and am having all sorts of problems.
1. wp booster error:
Please update your [tagDiv social counter] Plugin!
2. Update script didn’t end up giving me the same header & footer (header is blank, footer is different colour with extra stuff displayed)
3. new them using different images sizes
!!??!!
Can I pay you to fix my website?
Cheers
Rick
Hi
Regarding the featured image size please check this topic: https://forum.tagdiv.com/topic/recommended-images-sizes/
You need to update the Social Counter plugin from Newspaper-th/plugins/td-social-counter path, also you can install the plugin using theme’s panel: http://screencast.com/t/3DQmj3Kp
Thanks!
Two quick questions:
For featured images, what are the recommended dimensions so that the image fills the block in the Big Grid and other displays?
Whenever i activate the Social Counter plugin I get the following error message posted in the top left of my website:
wp booster error:
Please update your [tagDiv social counter] Plugin!
How do I update the plugin? Did not find it in the general plugin store.
I’m having a problem with the font sizes below the posts. I have 3 related articles with images but the font below the images is compressed and unreadable. How would I change that?
For example check out this post http://www.fivevictory.com/top-15-nhl-player-rankings/ below the article. Thanks
You tell me to enable the thumbs from the theme panel, but the problem is that I have disabled thumbs from theme panel as I want a default image to be appeared for the all posts and do not want the theme to create images in different sizes for all images uploaded to my server. That is why I need to use a default image and replaced it in both no-thumbs and thumbs-disabled folders.
I tried the plugin and although it said that the thumbnails were created, the problem is still there.
In my wp-content/uploads folder, I could see different sizes – say flood-assam-533×261.jpg, flood-assam-100×70.jpg etc – images. But the news images are uploaded as it is and no such different sizes are being created. Is this some server issue? I recently reinstalled my VPS and uploaded the backup. I guess this is some server issue and I hope you could guide me what needs to be changed.
Hello,
I have inspected your site and it seems you have no thumbnails created for the images. Please regenerate your thumbs: https://wordpress.org/plugins/force-regenerate-thumbnails/
Here are the sizes used by our theme: https://forum.tagdiv.com/theme-thumbs/
Let us know how it goes!
Thank you.
Hi,
I have checked your site and you use pagebuilder with latest article template on your homepage, without content, just latest articles. You can control this from loops settings – http://screencast.com/t/FsNTwCOV
The theme uses the add_image_size() function and the featured image is cropped to different sizes. Also the image used on post page is cropped, here you can find all thumbs used by the theme – http://screencast.com/t/4weZ6lSkpKl If you want to change this you need to alter the code(to change the size or add a new size) here – http://screencast.com/t/Mkyyuly8o6vi The specific thumb is used on post pages – http://screencast.com/t/jodz2kpYM If make any changes please regenerate your thumbnails – https://forum.tagdiv.com/using-the-theme-with-existing-content/
Thanks!
Hi,
The theme uses the add_image_size() function and the featured image is cropped to different sizes, for each image are created thumbnail to be used on module. Here you can find all sizes(including the size used on post pages) – http://screencast.com/t/aWvLdtvDghW2
If you want to change this you need to alter the code(to change the size or add a new size) here – http://screencast.com/t/Mkyyuly8o6vi The specific thumb is used on modules – http://screencast.com/t/tJfnkusU and post pages – http://screencast.com/t/jodz2kpYM If make any changes please regenerate your thumbnails – https://forum.tagdiv.com/using-the-theme-with-existing-content/
Here you can find more details about the featured image, aspect ratio… https://forum.tagdiv.com/image-size/
Thanks!
Hi,
@shoxa You need to use Thumbnail Upscale plugin only if you use small featured images as they are cropped for different sizes and need to fit into the thumb container on modules. I have checked your site and your images are large enough but they are not cropped to the thumb size(the thumb is not created) – http://screencast.com/t/fv6nXc8bq Try just to regenerate your thumbnails – https://forum.tagdiv.com/using-the-theme-with-existing-content/
If it doesn’t work please check if the GD Library is installed on your side, wordpress requires it for cropping. Also that you have writing permissions on /wp-content/uploads and also check your /uploads folder and see if the thumbs are created.
@asoukhoverkhov There is no ideal size for the feature images but in order to fit the thumb container it should have at least the sizes of thumb’s container, because WordPress doesn’t enlarges images. The modules have thumbs with different aspect ratio and a part of the image may get lost on the cropping process. You could read more about the featured image size here (it’s from Newsmag documentation but the principles are the same) – https://forum.tagdiv.com/image-size/ You have to do some tests and see what aspect ratio to use, depending what blocks/modules you use most.
Thanks!
Hi Chris, Yes!! Your solution is that i am looking for. Thanks.
I have a little trouble with the image regeneration. Could you help me?.
The sizes that i am using in the index are:
Block 4 = 250 X 160
Block 16 = 218 X 150
Block 1 = 100 X 70 and 324 X 235
Block 7 = 100 X 70
Block 14 = 356 X 220
Then, the first i do is:
1) in the setup MEDIA Thumbnail sizes i put the following:
Small : 100 x 70
Medium: 250 x 160
Big : 356 x 220
2) Then i run the “Regenerate Thumbnail plugin” and i could see this..
Debugging Information
Total Images: 67
Images Resized: 0
Resize Failures: 67
function (){if(h){var d=h.length;!function f(b){m.each(b,function(b,c){var d=m.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&f(c)})}(arguments),b?e=h.length:c&&(g=d,j(c))}return this}
And the last line is repeated a lot of times.
The good thing is that when i go to see the index, all images are now with perfect size.
But, finally, i must edit a news, and when i press <Save> appear the “white windows of death”, with this errors:
Warning: imagecreatetruecolor(): Invalid image dimensions in /Applications/MAMP/htdocs/wordpress-clean-new6.5/wp-includes/media.php on line 2130
Warning: imagecopyresampled() expects parameter 1 to be resource, boolean given in /Applications/MAMP/htdocs/wordpress-clean-new6.5/wp-includes/class-wp-image-editor-gd.php on line 198
Warning: imagecreatetruecolor(): Invalid image dimensions in /Applications/MAMP/htdocs/wordpress-clean-new6.5/wp-includes/media.php on line 2130
Warning: imagecopyresampled() expects parameter 1 to be resource, boolean given in /Applications/MAMP/htdocs/wordpress-clean-new6.5/wp-includes/class-wp-image-editor-gd.php on line 198
Warning: imagecreatetruecolor(): Invalid image dimensions in /Applications/MAMP/htdocs/wordpress-clean-new6.5/wp-includes/media.php on line 2130
Warning: imagecopyresampled() expects parameter 1 to be resource, boolean given in /Applications/MAMP/htdocs/wordpress-clean-new6.5/wp-includes/class-wp-image-editor-gd.php on line 198
Warning: Cannot modify header information - headers already sent by (output started at /Applications/MAMP/htdocs/wordpress-clean-new6.5/wp-includes/media.php:2130) in /Applications/MAMP/htdocs/wordpress-clean-new6.5/wp-admin/post.php on line 242
Warning: Cannot modify header information - headers already sent by (output started at /Applications/MAMP/htdocs/wordpress-clean-new6.5/wp-includes/media.php:2130) in /Applications/MAMP/htdocs/wordpress-clean-new6.5/wp-includes/pluggable.php on line 1207
The first that i have checked is if the GD library is installed. But YES!.. It is in my phpinfo.!
Searching in google i saw that the thumbnail must be in certain size or the resize isn’t work.
how it work?. How i can setup my own sizes?.
Regards.
Hi, the best way for Google speed is actually to have actual thumbs for each size, and use the regenerate thumbnails plugin to build for all the sizes. Otherwise you end up with images being “resized” and masked by the web browser, and loading larger images in each spot, which impacts over page load time by loading larger images.
I use the free “thumbnail upscale” plugin and then the regenerate thumbnails plugin at it makes all the right sizes to “fill” each spot.
If that was not what you were asking about, pardon the reply here. 🙂
Hi,
I have different sizes of images in the index, there are a lot of modules with similar image sizes.
I need a custom CSS for fill the FIG when the image is smaller than the contenedor.
Because, (for optimization purpose), i think is better use similar modules (in image size) and it is not necessary generate so many resize.
how i can “fill… expand.. upscale” the same image with CSS???

Thanks
Hi Pandian,
Sorry for the delay, we to not work on weekends.
1) You can see image sizes used in different locations in the theme panel: http://screencast.com/t/OpR8bRP5mA4f
2) use this custom css to style the slider header
.td_block_slide .td-slide-meta a{
background-color: rgba(77, 178, 236, 0.7)
}
3)You will have to update to the latest version to be able to use the new features. You will find a list of fixes for the 6.4 and 6.5 versions here: http://tagdiv.com/blog/
4) For the grey tint, try to regenerate your thumbs: https://forum.tagdiv.com/using-the-theme-with-existing-content/
Thank you