OK I tried hard, changing default portfolio post image with sidebar size

resolved (13 posts) (2 voices)

Mike
Member

OK Eliott I honestly tried really hard on my own to get this. The code you provided me with to resize the full size post full image works awesome and I now have a perfect full size version. In case others may want to know This is the code to edit provided by our code ninja elliott:

/wp-content/themes/awake/lib/includes/template-portfolio-single.php on line 41,

$portfolio_full = webtreats_image_resize($height=516,$width=882,$portfolio_full); ?>

What I really was trying to do was to re-size the portfolio post image with side bar size. (in this case I of course have the normal blog layout option checked so I can have the side bar on some posts) It defaults to 240(h)x582(w) which I would like to change.

I tried to just edit the height in line 53 in Awake/single.php but that just removed the bottom of the picture frame and the image not resizing in height as I asked it to, but I suspect I was playing with the wrong file. so I restored my modification there so it's back to normal.

This should be my last change I need to make for some time till I get to the lightbox behavior once the blog is built.

Cheers,

Mike.

Posted 1 year ago #
Elliott
Support

Hello Mike,

Open up /wp-content/themes/awake/lib/functions/theme-functions.php and on line 475 you should see this,

$post_image_resized = webtreats_image_resize($img_height=240, $img_width=568, $post_image); ?>

If that does not work for you then if possible send us a link to your page or take a screenshot so we can get a better idea of which image it is.

Posted 1 year ago #
Mike
Member

Hmm It appears you should have the right one, but it doesn't seem to change the dimensions when I edit the code. I will keep looking. I think the link to the page would give you more data, heres the test page:

http://www.hotpressthemes.com/test-post-3/

Posted 1 year ago #
Elliott
Support
You should be able to change that in /wp-content/themes/awake/single.php on line 53,

$portfolio_full_resized = webtreats_image_resize($img_height=240, $img_width=568, $portfolio_full);

You may also need to edit the height with CSS in /wp-content/themes/awake/style.css on lines 654 - 661,
```
.blog_post_image .load_img {background:url(styles/_shared/slider_loader.gif) no-repeat scroll 50% 50% transparent; display:inline-block; height:256px; overflow:hidden; padding:0 0 4px 0; position:relative; width:100%;}
.blog_post_image{height:282px;}
```
Let us know if that works for you Mike.
Posted 1 year ago #
Mike
Member

I just wanted to report my progress here because this is rather interesting what is happening. When I edit the single.php and change the image height it removes the bottom section of the picture frame but the actual image does not resize to fit. what is really interesting is that when you look at it in firebug and you hover over the code you can clearly see the outline of the div,or container has changed to the approperate size, also in fire bug when inspecting the image you see the little thumbnail preview that firebug creates clearly shows the image properly resized, and also lists the image dimensions of the values I edited, yet the actual image on the page dosn't fill out the resized container.

Editing the css didn't change anything, but I have a sneeking feeling that if I now go and edit this code you posted in your previous post it may work.
/wp-content/themes/awake/lib/functions/theme-functions.php and on line 475 you should see this,

$post_image_resized = webtreats_image_resize($img_height=240, $img_width=568, $post_image); ?>

I think it is an issue with the image resizing function, because the picture frame container changes in size, the firebug image thumb shows as correct when inspecting the image element.

I will edit the functions file and report back.

Posted 1 year ago #
Mike
Member

OK now editing theme-functions.css to match the height I edited in single.php made the actual image inside that container resize which it never did ever before which is great.

Now we still have the bottom of the image not filling out the rest of the container. The bottom of the picture frame is still missing, the div shows as proper size, it's just the image itself will not fill out the new container size.

I will contunue to play with the css file styles you pointed out, but I will try to leave the image as it is now so you can see whats going on. If I can't get it with the css changes, I guess I can just leave it alone and forget about it.

http://www.hotpressthemes.com/test-post-3/

Posted 1 year ago #
Elliott
Support
Go ahead and add these lines to your style.css file,
```
.blog_post_image { height: 582px !important; }
.blog_post_image .load_img { height: 556px !important; }
```
And then play around with the values until it looks right for you.
Posted 1 year ago #
Mike
Member

OK That works great everything works good, except the bottom of the picture frame is still missing. The text or any content you enter inside the admin post WYSIWG editor must be started half way down the viewable editing area, otherwise if you start editing in the editor with whatever content your putting in, be it text or what have you at the very top, when you publish it that content hugs right up tight to the bottom of the post image that is missing it's bottom frame.

I suspect this happns because the image is missing the bottom of the frame, so the content doesn't know where to pad from the image.

I mean it's working, if it's not causing any errors or anything critical, I will live with that. I'm just happy to have the image rezised.

Posted 1 year ago #
Elliott
Support

I can't see any changes on your site, http://www.hotpressthemes.com/test-post-3/

Did you take the CSS changes off?

Posted 1 year ago #
Mike
Member

no sir css changes are in place, It looks different to me when I refresh from my end, the latest css changes you had me do are installed and running, and they did work, are showing (at least on my 3 browsers to rule out that) but with the issues of no bottom image frame and the text "Test post for 3rd portfolio image" stuffed right up tight to the bottom of the image as I was describing. Using the link you displayed I followed it and shows up to me just as I have applied the size changes. The image is showing as 568wx400h in dimension (so to me it showing the changes)

You may have checked the link while I was poking around or uploading something, but I assure you everything is installed as directed, no mistakes 100% sure.

(I can always restore every file touched today, and start again with only the latest changes you had me do to rule any fluke mistakes I made out) I have made backups and loged everything I have touched and where so restoring it and starting over would be no problem.

Something something so silly as this image resize can turn into a huge ball of wax lol. I feel bad you are spending so much time on this, I would be happy to let you close the topic and help others at any time here. Just thankful for all the past help. I can make do with what I have.

Mike.

Posted 1 year ago #
Elliott
Support
Alrighty I see it now,

On line 659 you should have this,
```
.blog_post_image {
    height: 400px !important;
}
```
Try increasing that to 420 or 440.

And on line 660 you should have this,
```
.blog_post_image .load_img {
    height: 400px !important;
}
```
Try changing it to 420. You kind of have to play around with the values to get the frame to show.
Posted 1 year ago #
Mike
Member

Ahhhh Damnit damnit damnit! I forgot to do the ratio calculations. I am guessing it's the ratio of the image size that causes that. I should have known better.

but yeah...YESSS!! it's working great at 420px.

Now I'd like to ask you a question here, It's obvious you looked over my style changes because you were able to quote the exact lines my new code was on. I added the comment i'm sure you seen to remind me (or anyone else) whats going on there. That said Is it better to add all that code to the very end of the style? I was thinking if ever I needed further help when asked to check a specific line in that file, all my lines would now be off by 3, 1 for the comment, and 2 for those new lines of css code.
I can always make logs of what I did and where, but being inexperienced maby this is bad practice. I just didn't know if in css style sheets it matters where some code goes.

Posted 1 year ago #
Elliott
Support

The best way would be to create a child theme to hold all of your customizations, we have a similar solution in our new framework which you'll enjoy.

Otherwise you can place all of your edits at the end of the file to overwrite them. In case they are not taking place then add a !important at the end to force it.

Let us know if you need anything else Mike.

Posted 1 year ago #