Square images

Posted in: Newspaper
Post count: 63

Hi,

I’m in the process of upgrading from v4 to v6 and my old site have square images which i changed in functions.php. It seems this have changed for v6. How can I easily set the images to be square. Ideally without hacking the theme so they will be overwritten every time I upgrade.

Cheers

Post count: 22421

Hello,
Unfortunately you cannot force the images to be square without modification to the theme files. The thumbnails used in modules and blocks can be found here: http://screencast.com/t/0KjhLyiEZw
You can see them in the theme panel here: http://screencast.com/t/A8YvgeHwvVZ
Thanks.

Post count: 63

Hi Bogdan,

doesn’t seem to work when I change the size for block 7 to 100×100. After I regen the thumbnails they are huge and cover the text.

Post count: 22421

Hi,
You can make a workaround for it by forcing it to pick up the wordpress thumbnail you can set from here: http://screencast.com/t/tjimgKqmJVv
Simply create a new thumbnail like so: http://screencast.com/t/my2FmKVbjX4d Simply copy and paste the last thumbnail code and rename it to “thumbnail”. Then you need to edit td-module_1.php and set the name “thumbnail” for the image: http://screencast.com/t/XXTVQSa0hM
Result: http://screencast.com/t/085ZlAnlcL3
Thank you!

Post count: 63

Hi,

but wont that make alle the thumbnails the same size always? Ergo not adjust the size responsive?

Here’s my v4 site: http://sagablott.no/
That’s how I want the thumbnails to be like

Here’s my staging site:
http://sagablott.staging.wpengine.com/

Post count: 63

For the record, the images I need to be square are:

Block 4
Block 7
Related articles
Live Search

Post count: 22421

Hello,
You can use the above method to force the blocks/modules you want to display the wordpress square thumbnail as i showed above.
Block 4 uses module 2
Block 7 uses module 6
The related articles uses the module you assign it to display from here: http://screencast.com/t/DoBqScVl263
And the live search uses module mx2
You can find all these files here: http://screencast.com/t/ciBgQqMJiGE6
You can use the methods above to edit these files and modify the thumbnails to get them square. If you cannot manage on your own you can hire a freelancer to help out on this task from sites like studio.envato.com as we cannot offer any custom work at the moment.
Thank you for your understanding.

Post count: 63

I’ll give it a go 🙂

Do you have a list of all the blocks and their corresponding modules?

Thanks 🙂

Post count: 22421

Hi,
You can follow this option from the theme panel to see where each module is used: http://screencast.com/t/y0UZ1KqIEMXx
Thanks.

Post count: 63

Hi,

sadly that option didn’t work as intended either. The images for Block 4 was too small and the images for block 7 was too big (overlapping).

I tried another solution from the forum: https://forum.tagdiv.com/topic/thumbnails-square-featured-image-is-not/

I’ve added this to td_config.php:

        td_api_thumb::add('sb_324x324',
            array(
                'name' => 'sb_324x324',
                'width' => 324,
                'height' => 324,
                '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('sb_100x100',
            array(
                'name' => 'sb_100x100',
                'width' => 100,
                'height' => 100,
                'crop' => array('center', 'top'),
                'post_format_icon_size' => 'small',
                'used_on' => array(
                    'Module 6, 7', 'Block 1, 2, 7, 8, 16'
                )
            )
        );

Then changed td_module_2.php:


<?php echo $this->get_image('sb_324x324');?>

This gives me the sizes I want for my thumbs. But the text is still positioned as it’s the old sized thumbnails. Do I need to add some css to push the text down?

Thanks

Post count: 22421

Hello,
Every modification you make is going to affect other parts of the website. Css is not dynamic. If you change an image size, css will not automatically adapt to the new size. It will maintain it’s position and styling. You will need to edit the css as well to adjust all the titles to your new thumbnails.
Thank you!

Post count: 63

So where and how should I change the css for Block 4 and Block 7?
Basically Block 4 needs an extra 164px and module 7 30px extra.

Thank you.

Post count: 22421

Hi,

You need to create the css code and then add it in the theme panel->custom css box. We use a chrome extension called live css editor and the browser inspector to get to the part we want to edit.
For example on a block 4: you would use the code like so:
.td_block_4 .td_module_2 .td-module-title{
padding-top: 164px;
}

Just the title can get a padding-top and the excerpt will drop as well.
You can use the same method on block 7 by changing the classes and padding value.

Thank you!

Viewing 13 posts - 1 through 13 (of 13 total)
You must be logged in to reply to this topic.