steves_turn

Child Themes

Hi – you have to read steps 1 & 2 above. Basically you need to create a child theme and then create a new functions.php in that Child theme with the changes docents above. Yeah it will definitely break if you just override the parent (existing) functions.php. I wouldn’t recommend modifying parent themes (although I guilty of doing so for testing, but I switch the changes back and then implement in a child theme). Hope that helps.

Hi,

Please see Andrews comment on this thread. That should fix it.
https://www.ads-software.com/support/topic/after-spun-theme-update-some-images-are-distorted-in-circles#post-5273204

To resolve the issue I worked with Andrew and this is what worked:
https://www.ads-software.com/support/topic/resize-image-in-cirlce/page/3?replies=83#post-5203042

Thanks

Alright, for anyone else actually following/reading this thread – In order to fix the skewed Feature Image when updating to Spun 2.02 here is what I did that fixed the issue. Thanks to Andrew Nevins for coming up with this and working with me for a few days to get it working!

1. Create a Child Theme or modify your existing child theme
2. Add or modify the following files content-home.php, functions.php, & style.css
3. In the content-home.php copy the parent content-home.php into your child theme and modify

$spun_image = spun_get_image( get_the_ID());

to

$spun_image = spun_get_image( get_the_ID(), 'post-thumbnail');

4. In the functions.php add this

<?php 

add_image_size( 'post-thumbnail', 360, 360, true );

remove_action( 'wp_head', 'spun_options_styles', 1 );

function spun_child_options_styles() {
	if ( false == get_theme_mod( 'spun_grayscale', false ) ) : ?>
	<style type="text/css">
		.blog .hentry a .attachment-post-thumbnail,
		.archive .hentry a .attachment-post-thumbnail,
		.search .hentry a .attachment-post-thumbnail {
			filter: grayscale(100%);
			-webkit-filter: grayscale(100%);
			-webkit-filter: grayscale(1); /* Older versions of webkit */
			-moz-filter: grayscale(100%);
			-o-filter: grayscale(100%);
			-ms-filter: grayscale(100%); /* IE 10 */
			filter: gray; /* IE 9 */
			filter: url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox */
		}
		@media screen and ( max-width: 800px ) {
			/* Remove hover effects for touchscreens */
			.blog .hentry a .attachment-post-thumbnail,
			.archive .hentry a .attachment-post-thumbnail,
			.search .hentry a .attachment-post-thumbnail {
				filter:none;
				-webkit-filter:none;
				-moz-filter:none;
				-o-filter:none;
			}
		}
	</style>
		<?php
	endif;

	if ( false == get_theme_mod( 'spun_opacity', false ) ) : ?>
		<style type="text/css">
			.site-content #nav-below .nav-previous a,
			.site-content #nav-below .nav-next a,
			.site-content #image-navigation .nav-previous a,
			.site-content #image-navigation .nav-next a,
			.comment-navigation .nav-next,
			.comment-navigation .nav-previous,
			#infinite-handle span,
			.sidebar-link,
			a.comment-reply-link,
			a#cancel-comment-reply-link,
			.comments-link a,
			.hentry.no-thumbnail,
			button,
			html input[type="button"],
			input[type="reset"],
			input[type="submit"],
			.site-footer {
				opacity: .2;
			}
			.site-header,
			.entry-meta-wrapper,
			.comment-meta,
			.page-links span.active-link,
			.page-links a span.active-link {
				opacity: .3;
			}
			@media screen and ( max-width: 800px ) {
				/* Increase opacity for small screen sizes and touch screens */
				.site-header,
				.site-content #nav-below .nav-previous a,
				.site-content #nav-below .nav-next a,
				.site-content #image-navigation .nav-previous a,
				.site-content #image-navigation .nav-next a,
				.comment-navigation .nav-next a,
				.comment-navigation .nav-previous a,
				#infinite-handle span,
				.sidebar-link,
				a.comment-reply-link,
				a#cancel-comment-reply-link,
				.site-footer,
				.comments-link a,
				.comment-meta,
				.entry-meta-wrapper,
				.hentry.no-thumbnail,
				.page-links span.active-link,
				.page-links a span.active-link {
					opacity: 1;
				}
			}
		</style>
		<?php
	endif;

	if ( false == get_theme_mod( 'spun_titles', false ) ) : ?>
		<style type="text/css">
			.hentry .thumbnail-title {
				display: none;
			}
		</style>
		<?php
	endif;
}
    add_action( 'wp_head', 'spun_child_options_styles', 1 );
?>

5. In the style.css add this

@import url("../spun/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

/* =Homepage
----------------------------------------------- */

.blog .hentry a .attachment-post-thumbnail,
.archive .hentry a .attachment-post-thumbnail,
.search .hentry a .attachment-post-thumbnail {
	border-radius: 180px;
	opacity: .8;
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	width: 100%;
	height: 100%;
	z-index: 1;
}

That should do it, hopefully – it worked for me! Thanks

I think that totally worked…I tested with a new upload and post…Deleted the old one I used to test. Man, you are the man Andrew…Thanks so much for all your help – we can put this one to rest. I might make one more reply before I mark this closed just so that if anyone else wants to make the change they know how…because I have seen several people asking for the same exact fix ??

ok, you are way fast, I wrote that before your previous comment, funny we are for sure on the same page…thanks! Testing…

Yup, that is actually pretty close to what i was just modifying, haha, you are quick…my only exception is I was going to rename the spun_options_styles() functions, but I don’t think I need to, because I am removing it, then just adding it back… let me try it

What you do most of the time is just copy the function from the parent theme and paste it into your Child Theme functions.php file.

Ah, Ok, so then I can just add add_image_size( 'post-thumbnail', 360, 360, true ); right into my functions.php file? Cool

In your case you just want to modify the CSS bit inside the functions.php file?

Right, I just want to modify that css part in the function spun_options_styles(). I guess I remove that function in the child and then add a new function in the child to add everything back with the changes I want, but not sure that is advised

So, it looks like you can just add this to your Child Theme functions.php file:

add_image_size( ‘post-thumbnail’, 360, 360, true );

And that will create a thumbnail for each uploaded image, by 360x360px, to the name of ‘post-thumbnail’ .

I just checked my upload folder and it looks like that ‘add_image_size’ function isn’t generating an additional 360×360 thumbnail. So all should be good.

Yeah, I tested that before (before I created the child theme and it worked). I think it works because set_post_thumbnail_size was meant to default thumbnails to a custom size and add_image_size is just to add another custom image…but somehow it is smart enough to know if you have both set_post_thumbnail_size & add_image_size, it only creates one image, perhaps because the image would have the same name…or I just don’t follow, LOL…either way I get it…so just adding add_image_size( 'post-thumbnail', 360, 360, true ); I think would fix it along with .attachment-post-thumbnail

Question: Do you know HOW I actually modify the functions.php file though? That is one where I cannot just copy the whole file and modify. Do I have to add a function somehow?

you do need to modify functions.php, but when you say to modify ‘.attachment-home-post’, no you don’t need to edit the functions.php file for that. You can just add the correct CSS to your Child Theme style.css file.

Well, the reason I wanted to modify functions.php there is because there is a function being called for the gray overlay (before you hover over an image) function spun_options_styles()

I think I understand and follow, but then if

This line in the functions.php file becomes irrelevant:

add_image_size( 'home-post', 360, 360, true );

Don’t we need to either add back set_post_thumbnail_size?

Also in the functions.php file, wouldn’t I need to replace anywhere it says

.attachment-home-post

with

.attachment-post-thumbnail

?

Maybe I don’t completely follow – I think I get where you are going with the redundancy of

add_image_size( 'home-post', 360, 360, true )

. but that would need to be replaced with something, wouldn’t it?

Yes, I think this would work…but I would still need to modify the functions.php file as well, just not the template-tags.php

In fact what would be even better than modifying the ‘template-tags.php’ file would be if you just changed the ‘content-home.php’ file that calls this spun_get_image function.
There all you’d need to do is change this:

$spun_image = spun_get_image( get_the_ID() );

To this:

$spun_image = spun_get_image( get_the_ID(), ‘post-thumbnail’ );

I don’t think you want to do that. That line is going to be made redundant. The reason why you may want to edit that is to remove it completely.

I think I know how to remove it completely, but the reason I would want to REPLACE add_image_size( ‘home-post’, 360, 360, true ); WITH add_image_size( ‘post-thumbnail’, 360, 360, true ); Si because if I upload new pictures I want to also call them ‘post-thumbnail’, right?

Yes, if you’ve copied the whole file over then the same code should be there and you can just change that line.

Also, thanks, I didn’t know I could copy the whole template-tags.php file

Create a new folder in your Child Theme and call it “inc”, then in that folder copy over the ‘template-tags.php’ file from the Spun Theme

Nah, I understand that…but what I don’t know how to do is to modify the actual function.

So then IN template-tags.php (inc/template-tags.php)
I want to REPLACE function spun_get_image( $id, $size = 'home-post' ) { WITH
function spun_get_image( $id, $size = 'post-thumbnail' ) {

In functions.php I want to REPLACE add_image_size( 'home-post', 360, 360, true ); WITH add_image_size( 'post-thumbnail', 360, 360, true ); and also change anywhere functions.php lists .attachment-home-post REPLACE with .attachment-post-thumbnail

That should fix it I think

OK, I setup the child, but a little stumped on how to edit the functions.php with the updates I wanted as well as the template-tags.php file…any help there? Thanks!

It doesn’t look like you’ve a Child Theme set up

Yeah, I was just testing it out…I will definitely setup a child theme first…I was just reading up on that. Thanks for the help thus far. It’s good practice not to mess with the parent, I agree…to be continued once I setup it up