- 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
I run a recipe blog that relies heavily on post layouts made with WP Bakery Visual Composer and an add-on for displaying recipes. My only complain with TagDiv Composer is that it will not allow me to display my images correctly on posts using WP Bakery Visual Composer’s “Single Image” module.
If I de-activate WP Bakery Visual Composer, TagDiv Composer doesn’t seem to work on Posts; only Pages.
How can I:
A) stop TagDiv Composer from giving me weird image display sizes/cropping on Posts
or
B) use TagDiv Composer on Posts and not just on Pages?
Hi,
In addition to the WordPress created thumbnails, the theme will also create thumbnails when you upload images. These thumbnails will be used for theme elements like blocks and grids. You can disable the sizes you do not use if necessary
– https://forum.tagdiv.com/theme-thumbs/
Then they will not be created anymore by the theme from the moment you disable the thumbs sizes.
Leave only the sizes you use if you want to display thumbnails on the theme elements used.
Plugins or other implementations could also create thumbnails, check what sizes those images are and compare with the theme sizes.
Thanks
You could add a new module or block, or modify an existing one to display a different thumbnail. Add modules/blocks like this
– https://forum.tagdiv.com/api-modules-introduction/
Add thumbnails sizes like this
– https://forum.tagdiv.com/api-thumbnail-introduction/
Use the custom size on existing modules or new modules you add. Be sure to regenerate the thumbnails after making any changes
– https://forum.tagdiv.com/thumbnails-fix-strange-looking-images-on-blocks/
Hello,
I am having a problem when I am uploading an image.
I have switched off the selector for the sizes I am not using, but it is generating 12 images per image uploaded.
They are so much files and it is occupying all the space.
There is any solution or some method in order to not creating so much image clippings?
Many thanks,
Hi Edward,
Thanks for testing. It seems to be an issue with my computer then. I tried both Ctrl+R and Ctrl+F5 but still the problem persists. I am happy to hear though that on other computers it looks fine!
I just had another idea and have done some testing. I think it has to do with screen resolution. My laptop’s standard screen resolution is 1920 x 1080 with text/app size, etc. on 125 % when I have this issue. I have now switched to 1366 x 768 and text/app size on 100 % and the issue is gone. Hence, there seems to be trouble with high screen resolutions but again only in Firefox. It looks fine in all other browsers.
I have thus now tried and activated all available image sizes in the theme panel – also the ones actually not required by my setup – including retina version. I have then regenerated all thumbnails and cleared all caches. Still, in Firefox, the grey bar remains for the high resolution.
Would you have any idea how to solve this? Otherwise I’ll probably have to give up on it as I am out of ideas now.
Thanks for your help!
I think my issue may be about upscaling. For Big Grid 1’s sizes of images, what minimum thumbnail size is required?
Hi. Thank you. The links are helpful. I have GB library and added the plug-in. I am a little confused and need to clarify. I think we are having an issue because there is no upscaling in WP.
Should we only use image sizes that are seen in the Panel > Block Settings > Thumbs on Modules/Blocks list?
e.g.: 80×60, 100×70, 218×150, 265×198, 324×160, and so on?
I do not understand how to have an image that is not having blank space. I thought 4:3 would work fine because I read this article:
https://forum.tagdiv.com/thumbnails-vs-featured-image-size/
But my 400×300 image results in empty borders when in Big Grid 1, whereas 400×286 works fine. Why is that happening, and how do I prevent it?
The flex block has at the moment 3 image sizes you can choose from and use inside the block, the setting is here
– https://www.screencast.com/t/pmBDm0DzlJg4
The smallest image size that can be used for the flex block would be small (696px). Use the smaller size to reduce the size of the images. More image sizes may be added in the future.
Lubo it’s not a problem of compression 🙂
Flex Block module is serving the largest uploaded file into WordPress Media Library. For example https://retailnet.pl/wp-content/uploads/2018/03/renata-gralec.jpg
Look at the options in TagDiv Composer in Flex Block module options. We have three sizes to choose:
Small, Medium, Large – in my case I have setup Small size selected, so served Image should have 696px width and name of serving file should be https://retailnet.pl/wp-content/uploads/2018/03/renata-gralec-696×392.jpg
But when you check the image serving on website is https://retailnet.pl/wp-content/uploads/2018/03/renata-gralec.jpg and the flexbox block is serving wrong size file.
By using min-width:320px and min-width:768px, the images go to the right edge on those sizes. It’s the sizes in between 320 and 768 where I get a right margin or padding of 10px somehow.
I’m trying to get the .size-full images to override the page padding, so they will touch the edges on tablet size and smartphone. I have achieved this for videos, but not for images. https://bingewhat.com/2018/03/22/the-best-romantic-comedies-1/
I can force a min-width 768px for tablet, and 320px for iPhone — but there are other sizes that it won’t work for. Example: http://mobiletest.me/google_nexus_7_emulator/?u=http://www.bingewhat.com
I’ve tried everything. Here’s the tablet example of the code I’m using…
.td-post-content p .size-full {min-width:768px;margin-left:-14px;margin-right:-14px;}
Hi Gang!
I’m having some image issues.
I’m using Elementor to create landing pages.
The ONLY reason I’m using Elementor is that your TagDiv composer (as I referenced in another post) keeps on deleting information for when I go back into the page/post to edit it. It’s beyond frustrating, since no one has helped clear up this issue at all.
HOWEVER, Elementor has been amazing in using to create landing pages, but there is an issue with image sizes.
Elementor already gave me a css code to fix an opacity issue of images not showing up, but now there’s an image size issue.
Newspaper theme is making the images appear vertically, when in fact they are horizontal images.
It’s filled with white space, and I’ve tried everything that I know to try to fix this issue.
Can I actually have some help with this please? I love this theme, and my readers love my layout and theme…but it’s very difficult in trying to use.
Thank you for any help!
Here’s the link to the screenshot for foodnservice.com
https://pasteboard.co/HdodtUV.png
Hello,
The images are responsive, but they provide different sizes for different devices. Please disable any image optimization plugins or rich pins and test with the default theme image implementation. The code for your images gets altered.
Thanks.
Hello,
It is just the way different browsers interpret resized images. your image is bigger than the logo spot so the theme resizes the image to fit: https://www.screencast.com/t/Mny8c6QPjGnw
Please try to resize the image in your favorite photo editor and upload it in the size of 329×80 px
Thank you!
Have an issue with an image in the footer of https://drw.org.uk/ it’s blurred, it’s a HD image, tried different sizes, can’t get it to appear sharp, any suggestions as to what may be wrong? Thanks
Simi360 #221975
Mar 8, 2018 at 8:18 pm
Is there a chart that you can provide so i can make sure all photos are correct sizes per section? This is becoming a constant problem.
Please let me know how I can fix this
REPLY
Catalin
Post count: 16140
Catalin #222101
Mar 9, 2018 at 3:24 pm
Hello Simi360,
You should regenerate the thumbnails using the Force Regenerate and Thumbnails Regenerate plugins. Please check the following documentation from here -> https://forum.tagdiv.com/thumbnails-fix-strange-looking-images-on-blocks/
Thanks for your understanding!
REPLY
Post count: 8
Simi360 #222236
Mar 10, 2018 at 3:40 pm
I also wanted to know if there were specific dimensions for each block? Sometimes they do not show up centered and instead show only part of a picture I would like to make sure that all photos are centered evenly.
REPLY
Post count: 771
Edward #222240
Mar 10, 2018 at 4:25 pm
https://forum.tagdiv.com/thumbnails-vs-featured-image-size/
https://forum.tagdiv.com/theme-thumbs/
REPLY
Post count: 8
Simi360 #222242
Mar 10, 2018 at 4:37 pm
Also your suggestion did not fix the issue is there anything else we can do to put this into gear
REPLY
Post count: 8
Simi360 #222368
Mar 12, 2018 at 7:37 am
Hello is there anyone here to help me?
One other problem, what are the correct sizes for images on Newspaper? We are currently using 800X400, but they are not appearing correctly.
https://www.dropbox.com/s/7bfsf6b8weudo9d/Screen%20Shot%202018-03-06%20at%2012.29.19%20AM.png?dl=0
Hello,
For the moment the smallest image size is 696. This is the way our developers implemented the block. There is no simple method to change the image sizes unfortunately as the flex block is a very complex element. If this request becomes more popular we will consider implementing a smaller size. We have to prioritize requests based on popularity as we get lots of requests.
Thank you for your suggestion and thank you for understanding our position.
Hi. I think it would be nice like I had said in another post in this forum to introduce smaller image sizes than 696px in the flex block because the homepage size in Pingdom tools shows the images as having the biggest size. Is this possible?
The theme comes with a fixed width (I think 1164px) and it cannot be stretched in the manner you indicate because most elements are fixed at this width and messing with it will break the responsiveness. However, you can create a custom homepage with the td composer and then stretch the rows with the content (On Add element, select a row and drag it to somewhere on the page. Then click on that row and on the left, the box will display something like this http://prntscr.com/ikmfay. Click on the small font saying ‘row’ at the top, then scroll until you see something like this http://prntscr.com/ikmdqm and select the ‘stretch row’ option. There are several options to choose from there for various screen sizes (1400px+). For the posts, this will not work though. Coz even if you remove the background image and colour, there will be white space on the edges of the screen.
Hello,
I activated Version 8.7 AMP plugin but I’m facing a problem: images are not shown, the code for every picture is like
<amp-img class=”lazy lazy-hidden size-medium wp-image-49734 aligncenter amp-wp-enforced-sizes i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout” src=”data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7″ alt=”” width=”400″ height=”266″ sizes=”(min-width: 400px) 400px, 100vw” style=”width: 100vw;”><i-amphtml-sizer style=”display: block; padding-top: 66.5%;”></i-amphtml-sizer></amp-img>
That corresponds to an empty GIF.
Images works fine in “non AMP” version of the page.
I’m using Offload S3 plugin for images, so they’re serverd using Cloudfront, can it be related?
There’s a way I can solve this problem?
You can use any image you want as background. Then simply enable the parallax option. Rows can be stretched to predefined sizes or full width
– https://www.screencast.com/t/1G3UdSVdYM
For example lets say you have these 2 blocks (block + empty row + block)
– https://www.screencast.com/t/KYPskK3Wv
The row in between can have a parallax image set, either use the full height as I mentioned above, or maybe use an empty space element in that empty row to control the height
– https://www.screencast.com/t/qtdSgzoMMeh
Also there is a CSS tab on the rows, that can be used to make adjustments to the positioning. For example if you want to reduce the space between rows
– https://www.screencast.com/t/egmKmGrJkKOJ
These are some tagDiv composer guides
– https://forum.tagdiv.com/tagdiv-composer-tutorial/
– https://www.youtube.com/watch?v=C0ARTSimnUY&index=4&list=PL6CsDkMaejhr2ExZCO73U11SSVKB9r_NE&t=102s
Also block settings – https://forum.tagdiv.com/block-settings-tutorial/
Thw crypto demo is very huge (4.28mb on gtmetrix). Any way to modify the image sizes @Simion C>
Hi, I have done the update today and after the update the size of images on pages (made with visual composer) isn’t anymore correct. It is not fitting anymore correctly to the size of the column. Even if I change the size of the image to a thumbnail it is not shown in thumbnail style and size.
Could it be possible that the actual visual composer is missing in the new update file (can’t find the js_composer.zip file in the new 8.7 version).
Please help me, as the website is not presentable atm.
Regards,
Patrik
Hello rrathore21,
Please regenerate thumbnails after doing this, so the custom sizes will be created
– https://forum.tagdiv.com/thumbnails-fix-strange-looking-images-on-blocks/ Clear all the caches and check the results.
Thanks!
