- 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
Hmmmm… that is weird. Our site works perfectly in portrait and landscape on the iPhone 6, which I tested the day I got mine, out of paranoia (see: http://advertisingindustrynewswire.com — not self promoting here!).
In my case, the logo is a little funky top right in the landscape view on the iPhone 6, but that’s because I’m intentionally re-using logo from old site layout while playing with the theme setup, but not a problem.
One thing to double check is the advertisements settings
1) try using the latest non-beta “fully responsive” code from AdWords
2) if using older code, make sure you change the “sizes” for phones and disable the header advert for phones
3) if inserting ads inside stories, make sure they are not colliding with other images or things like long non-breaking words.
Experiment with that.
Might not be the issue, but just some feedback.
I am newbie for website, I hope you all can help me answer with step by step for the below questions, thanks all!
1. how to do if i want my menu with the line of different color when i hover it?http://www.screencast.com/t/oFjjWo2zbid
2. How to changes the different menu’s big slider with different color?
http://www.screencast.com/t/yVOgdySy
3. How to change the font size of this subcategories?
http://www.screencast.com/t/5VnyHm7g0
4. What facebook widget can works more powerful? like this
http://www.screencast.com/t/FuYbyUVPe
5. How to make the social shared button to the side at there? Need some purchased plugin?http://www.screencast.com/t/GCmhBNulX
6. how to change the similar post to random post in the post setting? it is because i want my article’s bottom is random post not similar post…
http://www.screencast.com/t/wJJLFqpdm
7. what plugin can work with newspaper themes when people scroll down the article and pop up a facebook widget box at the right bottom? like this
http://www.screencast.com/t/Zh59h7GX
8. How can work with newspaper theme same like this facebook comment box?
http://www.screencast.com/t/kdU5VD3g
9. How to put gif on my website?like this
http://www.buzzfeed.com/maitlandquitmeyer/b00b-n00bs
10. How to make this big slider big images automatically bigger when it on small screen?
http://www.screencast.com/t/qV7Iyj14VCz
11. How to make the small images bigger when it on small screen?
http://www.screencast.com/t/NIWqnzcHj
12. Any plugin can custom made the facebook shares button?like this
http://www.screencast.com/t/ffHN6GMAePtH
13. How to changes the random post to latest post? i want custom pages and all the images sizes same like the first images…
http://www.screencast.com/t/5MP8lVMl
14. How to changes the sizes of this? i means let it bigger…
http://www.screencast.com/t/4mrxt4pWOqx2
15. How to remove this?
http://www.screencast.com/t/cqd1f67Q
16. How to make small facebook share button at this place?
http://www.screencast.com/t/TFUK4qZ8
17. How to put the small prev and next button on the top of article? like this
http://www.screencast.com/t/PUr5tiaH
18. How to make all images on my website most reasponsive?
http://www.screencast.com/t/OX9YTHosuj1J
19. when i hover the title of the article, the word’s of title underlined, how can i remove the ‘underlined’ when i hover on the title and it appear the color of the categories like this is red http://www.screencast.com/t/ydTTe9kHBM9
and this is orange
http://www.screencast.com/t/Qgds4MHEUA96
20. How to let all of the categories of the article at this place on all of my website?like this http://www.screencast.com/t/ALenmZOGWcb
Hi,
The only WordPress image size that the theme uses is the thumbnail size: http://screencast.com/t/ZamKJmP7ar5I so this is the only media setting you need to consider: http://screencast.com/t/ZamKJmP7ar5I
The other image thumbs sizes are added inside the function.php file: http://screencast.com/t/4XZAbtTQ1
Regarding the featured image from post page it’s showing the image at 483 height because it’s showing the image at original height as the crop feature image option is not enabled in theme panel > post settings: http://screencast.com/t/gJyEjlvs8ng
You can find more info about how thumbs are created and how the crop function works in these topics:
* https://forum.tagdiv.com/search/image+sizes/
* https://forum.tagdiv.com/topic/set-featured-image/#post-25494
* https://forum.tagdiv.com/topic/image-crop-creating-problem/#post-26246
Thanks
I have installed a test of newspaper on my localhost and am running php5.3.13 with GD2 installed, wp v4. I have set my Media settings to 100×65, 326×235 and 700×357. However, when I upload a 745×483 image multiple sizes are being created that do not match up with the sizes you detailed in your documentation and the size that ends up being used on a default article page is 700×453 rather than 700×357 like the demo. I can only guess that there is something wrong with my Media settings, can you please detail how the Media settings should be set up?
Thanks,
jason
Hi,
The images are set responsive via css using the width:100% property. Unfortunately I can’t recommend you a plugin for this as we haven’t tested any plugin for that. You could try to find one that dose that or use css to set a max-height on small screens, like this:
@media (max-width: 500px){
.td_block_big_grid .td-big-grid-post-0 .entry-thumb {
width: 100%;
max-height: 200px;
}
}
You could also use custom css to change the font sizes for slider title which I noticed that are quite large for small screens widths devices.
@media (max-width: 500px){
.td-big-grid-post-1 .td-sbig-title-wrap a, .td-big-grid-post-0 .td-sbig-title-wrap a {
font-size: 13px !important;
}
.td-big-grid-post-2 a, .td-big-grid-post-3 a {
font-size: 12px !important;
line-height: 12px;
}
}
Thanks
Hi,
Thanks Christopher!
@mikefb12 Sorry for the delay unfortunately we do not work on weekends.
1. For your first issue you could try resetting your permalinks and you can do that just by re saving your permalink structure.
2. When you add an image WordPress automatically creates a thumb for each module the theme uses so, besides WordPress’s, we have added new image sizes in functions file.
So that the cropping function doesn’t affect much of your added images you need to upload an image appropriate in aspect ration to the thumb you plan to use it for.
You can read more about the aspect ration in the first link and about WordPress’s cropping in the second:
https://forum.tagdiv.com/topic/set-featured-image/#post-25494
https://forum.tagdiv.com/topic/image-crop-creating-problem/#post-26246
3. As Christopher wrote you can change the comments settings from WordPress Dashboard Settings > Discussion.
Hope this helps!
Thanks
I have troubles with the big slider. It shows one big image and 3 small below it no matter of the image sizes ( just had all thumbs regenerated ) . Tried disabling all plugins and then re-enabling them one by one but its not that either . Anyone has an idea of how to fix that ?
[IMG]http://i.imgur.com/aTMV9kH.jpg?1[/IMG]
Hi,
I have checked your site and found no issue with your thumbs, seems to me like the right thumbs sizes are used:
– examples:
* big slider – big image: http://screencast.com/t/tPcnpBp6h7y
* big slider – small images: http://screencast.com/t/r8dvZyDri
* block 2 – small images: http://screencast.com/t/DdieGRjopC7u
I did noticed that setting the visibility hidden on date doesn’t look right, you should use display:none and hide it via custom css, like this: http://screencast.com/t/koocO0Foc
Add this css in theme panel > custom css field:
.td_mod_wrap .meta-info time {
display: none
}
Thanks
Hi Schauvin,
Although I’m not an expert, I do know you can make responsive ads work with AdRotate, see my screen shot… (http://screencast.com/t/g8BUAcAfnxs). Note that you have to create the different sizes for the responsive ads (I don’t think the software does this automatically).
Also, although I’m not doing so I believe you can actually have no ads at all for certain pages. There are multiple ways you could do this, including creating a custom page type (for no ads) and assigning that page type in NewsPaper.
Another neat trick is to just use the shortcode INSIDE of the newspaper Ad spots. I did this because I was tired of trying to adjust the AdRotate ad to look like the same version I had been using prior to that via NewsPaper Ad in the theme panel. All you have to do is…
1. Create your ad in AdRotate
2. Copy the shortcode and place it into one of the Newspaper Ad positions.
3. Sit back and enjoy the beauty of your ad, controlled by the NewsPaper theme.
Here’s a screen shot showing how the Ad from AdRotate in position on my website using “Sidebar Ad” in NewsPaper… (http://screencast.com/t/2e8sle8Wo)
And here’s a screen shot of the shortcode for the AdRotate ad inside of the “Sidebar Ad” section of the Theme Panel (http://screencast.com/t/wWGEttxhuHF).
Hope that helps!
Hi,
When you upload and image WordPress automatically crops that image on multiple sizes and based on the add_image_size() function, the thumbs needed by the theme to the different modules you are using are made https://forum.tagdiv.com/modules-and-blocks/
You can read more about this here:
1. http://codex.wordpress.org/Function_Reference/add_image_size
2. http://www.davidtan.org/wordpress-hard-crop-vs-soft-crop-difference-comparison-example/
This ius the same way the featured image it’s cropped, you can change this as you like.
Also make sure that you use images around 1200px and 500px height, this will make cropping more accurate as the max image size used by the theme is at 1074px width and 483px height.
Thanks
Hi,
Thanks Christopher!
@skotina
You can change the uploads folder by editing the wp-config.php file and add this line define('UPLOADS', 'wp-content/myimages'); like this: http://screencast.com/t/LYPM7Uqova6q
This will create a new folder for your uploads: http://screencast.com/t/eE8bWdB13bL
Note that you will also have to add again the images for existing post and regenerate thumbnails: https://forum.tagdiv.com/how-to-fix-strange-thumbnails/
If you just worry for the amount of thumbs that are created when uploading an image then you should consider as Christopher pointed to remove from functions.php file the thumb sizes you don’t use and reduce the number of thumbs being created when uploading an image: http://screencast.com/t/uP620qI8C
Hope this helps!
Thanks
I don’t think you can make the thumb function write to different folder since it hooks into the WP image builder and uses that /path/to/files … you might be able to edit the plugin to only build specific sizes vs pulling that from the theme functions, dunno. You can also trim the sizes built by theme by editing the functions.php file (search forum for how to on that). So, instead of 3 sizes from WP and 7 sizes from theme, you can usually line up the WP media small/medium/large to the 3 sizes you use most, then keep couple of sizes from functions; but delete the sizes from modules you don’t use.
Not sure that helps, but food for thought anyway.
Hello,
I would like to ask you if it is possible to make auto youtube/vimeo thumbnails downloader to download images to any specific folder?
Currently the situation is that when I create video post type with e.g. youtube link, the theme downloads video thumbnail image, creates a lot of files with different sizes and stacks them in the month folder (I have media path like /2014/10/21/POSTID). The problem is that I have a lot of video posts and thus the theme creates HUGE amount of files in the months folder.
Is there a way to avoid this?
Hi,
You just need to manually add the width and height so if you plan to use a 728 x 90 size image your div tags should look like this:
<div class="td-visible-desktop">
<a href="#"><img width="728" height="90" src="" /></a>
</div>
<div class="td-visible-tablet-l">
<a href="#"><img width="468" height="60" src="" /></a>
</div>
<div class="td-visible-tablet-tp">
<a href="#"><img width="468" height="60" src="" /></a>
</div>
<div class="td-visible-phone">
<a href="#"><img width="300" height="250" src="" /></a>
</div>Thanks
Hi Lucian – sorry to bother again, but I’m having the same issue with the top header AD. I put in a 728 x 90 image (as mentioned in your demo), but I get the same Gmetrix errror regarding this image (missing width and/or height attributes).
Can you please send me the div tag’s for the header ad image?
Thanks!
I have recommended couple of plugins so many times on the forum it should be a sticky by now 🙂
1) Auto Post Thumbnail PRO – will generate a featured image from the first image in each post (http://codecanyon.net/item/auto-post-thumbnail-pro/4322624)
2) Thumbnail Upscale – to make larger images to match theme sizes from existing mis-matched smaller sizes (e.g., if your image is 600×400, this would give you the larger sizes)
3) Use the Regenerate Thumbnails plugin as needed with the above.
I used both of these to transfer from a Woo Canvas setup to Newspaper, as one example.
(admin: feel free to repost this to a sticky if you want) 🙂
Hi again,
There is something I am probably missing here, so kindly explain it as if for a beginner…
I read your thumbs and image resolutions:
https://forum.tagdiv.com/modules-and-blocks/
I then made some 326×235 images as featured images,
and a 300×100 Logo.
However – when doing the GTmetrix again – I get a very long list of
“The following image(s) are missing width and/or height attributes.”
including images with these sizes 326X235, the 300×100 logo, as well as images of 326X406, 100×65, 745X483 and more.
–> I thought all these are the programmed image sizes of the theme? How come they are missing?
Kindly advise…
Thanks!
Bran
Hi,
WordPress has some default cropping sizes http://screencast.com/t/ifk8fE1HYk and we added more sizes inside the functions.php file – http://screencast.com/t/2QaaubXnqxL
Those sizes are used on modules and sliders (including the Big Slider), you can read here about the thumbs used on modules and sliders https://forum.tagdiv.com/modules-and-blocks/
From the media settings the theme only uses the “thumbnail” size which it’s used on search module.
It’s fine, that is how the theme dose with images. You can read here more about WordPress hard and soft cropping: http://www.davidtan.org/wordpress-hard-crop-vs-soft-crop-difference-comparison-example/
You could try to registers a new image size, you can read hare more about this: http://codex.wordpress.org/Function_Reference/add_image_size
Hope this helps!
Thanks
My Media settings are :
and results are : http://oi59.tinypic.com/2v3qw6b.jpg
Is this ok ? or do I need to
Crop thumbnail to exact dimensions (normally thumbnails are proportional) ?
13 sizes are a bit much, i thing they need crop, but is ok ?
Thanks Lucian for another quick reply!
Will try it and see if it solves it…
Cheers!
Hi,
Use this div tag’s for the sidebar ad image (just add the image URL):
<div class="td-visible-desktop">
<a href="#"><img width="300" height="250" src="" /></a>
</div>
<div class="td-visible-tablet-l">
<a href="#"><img width="250" height="250" src="" /></a>
</div>
<div class="td-visible-tablet-tp">
<a href="#"><img width="200" height="200" src="" /></a>
</div>
<div class="td-visible-phone">
<a href="#"><img width="300" height="250" src="" /></a>
</div>Add the height="40" attribute to the large video icon like this: http://screencast.com/t/qiI1eSi7b
Add height="9" here:
* http://screencast.com/t/IxG5m3Qd8e
* http://screencast.com/t/CDFhEx3Q
After this please check again.
Thanks
Hi again,
I’ve inserted a 300X250 non adsense responsive Ad on the sidebar.
However – when I perform the Gmetrix Performance report, I get this message the some images are missing width and/or height attributes, among them also the 300×250 Ad:
The following image(s) are missing width and/or height attributes.
http://cobras.org/Home/wp-content/themes/Newspaper/images/icons/ico-video-large.png (Dimensions: 40 x 40)
http://cobras.org/Home/wp-content/themes/Newspaper/images/icons/similar-right.png (Dimensions: 6 x 9)
http://cobras.org/Home/wp-content/uploads/2014/10/Small-Ad-box-2.jpg (Dimensions: 300 x 250) (8 uses)
Why is that? And how to repair? (also these first 2 pngs)
Thanks,
Bran
Hi,
Thanks Christopher!
@Branstone
WordPress has some default cropping sizes http://screencast.com/t/ifk8fE1HYk and we added more sizes inside the functions.php file – http://screencast.com/t/2QaaubXnqxL
Those sizes are used on modules and sliders (including the Big Slider), you can read here about the thumbs used on modules and sliders https://forum.tagdiv.com/modules-and-blocks/
You can read here more about WordPress hard and soft cropping: http://www.davidtan.org/wordpress-hard-crop-vs-soft-crop-difference-comparison-example/
You could try to registers a new image size, you can read hare more about this: http://codex.wordpress.org/Function_Reference/add_image_size
Hope this helps!
Thanks
HI, Bran
and welcome!
You may find it super useful to read through the docs (see link top right of forum); and you can find the various sizes for all the blocks here:
https://forum.tagdiv.com/modules-and-blocks/
@tcdraper
the general reason themes don’t make multiple thumbnails for the sizes you’re talking about, is that when an iPad changes from portrait to landscape it’s not technically reloading the page, just refreshing the viewport and the cached stylesheet is applied; otherwise it would be *worse* for mobile since the images would need to actually be reloaded — ever carry an iPad across the room in unlock mode and have it flip back and forth from portrait to landscape; well, you’d be reloading the images in different sizes more than once.
So, one aspect of “responsive” design (good and bad), is that it’s better to load a 25kb image once than load the 25kb image once and the 12kb image together and switch those out on viewport. Better to load the 25kb image ONCE, then resize to fit the aspect you’re looking at when you look at it.
The other benefit of using the larger image is for retina/HD displays on a mobile device which have higher pixel count than desktop; so again, if you do the pixel math, a 700×500 image on a screen with double the pixel count, loaded half size, would still provide the same number of pixels when shown half size — without having to load alternate retina/HD version of image or use “image stacks.”
This is actually one of the cool things about mod_pagespeed … if you have an image loading over and over at 80% size, it will cache the image at THAT SIZE and serve up the smaller image to people who keep requesting it vs loading the larger image and scaling it.
That was mostly anecdotal … but just some techie crap in case you were curious 🙂
