WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] Resize image in cirlce (87 posts)

  1. Andrew
    Forum Moderator
    Posted 6 months ago #

    What edit did you need to make to functions.php?

  2. Andrew
    Forum Moderator
    Posted 6 months ago #

    What edit did you need to make to the functions.php file?

  3. steves_turn
    Member
    Posted 6 months ago #

    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

  4. Andrew
    Forum Moderator
    Posted 6 months ago #

    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' ) {

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

    In functions.php I want to REPLACE add_image_size( 'home-post', 360, 360, true ); WITH add_image_size( 'post-thumbnail', 360, 360, true );

    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.

  5. steves_turn
    Member
    Posted 6 months ago #

    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

  6. Andrew
    Forum Moderator
    Posted 6 months ago #

    Si because if I upload new pictures I want to also call them 'post-thumbnail', right?

    I think there's a slight misunderstanding of what the repercussions of replacing this (in template-tags.php):

    function spun_get_image( $id, $size = 'home-post' ) {

    with this:

    function spun_get_image( $id, $size = 'post-thumbnail' ) {

    will do;

    The 'set_post_thumbnail_size' function uses the name 'post-thumbnail' by default. The old Spun theme used this function and therefore already had thumbnails saved in to the 'post-thumbnail' name.

    This means we can just tell Spun to load the thumbnails under that name ('post-thumbnail').

    So, to clarify, what this does:

    function spun_get_image( $id, $size = 'post-thumbnail' ) {

    Is set the $size variable to be a string of 'post-thumbnail'. Then further on that $size variable is passed into the 'wp_get_attachment_image' function and then the image thumbnail attached to that name is retrieved.

    $thumb = wp_get_attachment_image( $attachment, $size, false, array( 'title' => esc_attr( strip_tags( get_the_title() ) ) ) );

    This line in the functions.php file becomes irrelevant:

    add_image_size( 'home-post', 360, 360, true );
  7. Andrew
    Forum Moderator
    Posted 6 months ago #

    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' );
  8. steves_turn
    Member
    Posted 6 months ago #

    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' );

  9. Andrew
    Forum Moderator
    Posted 6 months ago #

    Don't we need to either add back set_post_thumbnail_size?

    Actually yes, you do need to set that back to set_post_thumbnail_size so that when new images are uploaded to the library they're set in the same way. Good point. So yes 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.

    Actually yes, you do need to set that back to set_post_thumbnail_size so that when new images are uploaded to the library they're set in the same way. Good point.

    Let me try something out a minute

  10. steves_turn
    Member
    Posted 6 months ago #

    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()

  11. Andrew
    Forum Moderator
    Posted 6 months ago #

    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 360x360 thumbnail. So all should be good.

  12. Andrew
    Forum Moderator
    Posted 6 months ago #

    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()

    Oh, yes, that needs to be changed in the functions.php file too because that CSS is only called when certain options (in the dashboard?) are checked. If we were to change that CSS in the Child Theme style.css file we'd have the problem of those styles always being there.

  13. steves_turn
    Member
    Posted 6 months ago #

    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 360x360 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?

  14. Andrew
    Forum Moderator
    Posted 6 months ago #

    Question: Do you know HOW I actually modify the functions.php file though?

    You don't copy the whole functions.php file.

    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. Then modify it from there, but that only works if the parent theme has this bit of code before the function:

    if ( ! function_exists( '[function name]' ) ):

    Otherwise your website will get an error saying there are duplicate functions.

    In your case you just want to modify the CSS bit inside the 'spun_options_styles()' function?

  15. steves_turn
    Member
    Posted 6 months ago #

    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

  16. Andrew
    Forum Moderator
    Posted 6 months ago #

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

    Yep.

    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

    I think you mean remove it in the parent and then re-add it in the Child, you're right that is not advised.

    In the case of the spun_options_sytles function, what you need to do to override it is a bit complicated. I'm not sure how to do it.

  17. Andrew
    Forum Moderator
    Posted 6 months ago #

    To override the spun_options_styles function I think you need to first add this in your Child Theme functions.php file:

    remove_action( 'wp_head', 'spun_options_styles', 1 );
  18. Andrew
    Forum Moderator
    Posted 6 months ago #

    Then you can copy and paste the function over:

    function spun_options_styles() {
    	if ( false == get_theme_mod( 'spun_grayscale', false ) ) : ?>
    	<style type="text/css">
    		.blog .hentry a .attachment-home-post,
    		.archive .hentry a .attachment-home-post,
    		.search .hentry a .attachment-home-post {
    			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=\'http://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-home-post,
    			.archive .hentry a .attachment-home-post,
    			.search .hentry a .attachment-home-post {
    				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;
    }

    And then modify it.

  19. Andrew
    Forum Moderator
    Posted 6 months ago #

    After that add this line:

    add_action( 'wp_head', 'spun_options_styles', 1 );
  20. Andrew
    Forum Moderator
    Posted 6 months ago #

    Then you can copy and paste the function over:

    Actually, when you copy it over don't keep the same function name. Otherwise I think you'll get the error saying you've got duplicate functions.

    So, in your Child Theme functions.php file call it like, "spun_child_options_styles". Then after the function instead of this:

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

    Add this:

    add_action( 'wp_head', 'spun_child_options_styles', 1 );
  21. steves_turn
    Member
    Posted 6 months ago #

    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

  22. steves_turn
    Member
    Posted 6 months ago #

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

  23. steves_turn
    Member
    Posted 6 months ago #

    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 :)

  24. steves_turn
    Member
    Posted 6 months ago #

    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=\'http://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

  25. Andrew
    Forum Moderator
    Posted 6 months ago #

    Thanks for posting that conclusion :)

  26. wojtek73
    Member
    Posted 4 months ago #

    I'm very THANK YOU 'steves_turn' for this great help :) Now it works !

  27. crossfitqt
    Member
    Posted 3 months ago #

    Where in the code do I put the code for the functions.php? ... I was working on modifying to fix this problem, but when I entered the code for the functions.php there was some syntax error and I ended up having to uninstall the theme. I'm not very good with code or figuring this stuff out.

  28. steves_turn
    Member
    Posted 3 months ago #

    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.

  29. steves_turn
    Member
    Posted 3 months ago #

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.