Post image 150x150 left aligned « My Site My Way Support

Post image 150x150 left aligned

resolved (37 posts) (7 voices)

csanyigroup
Member

What should I edit to have post image 150x150px and left aligned to post excerpt?

Right know I have default post image 630x240 (or something like that), and image is not aligned. Post image is too big for my taste, so I would like to be smaller.

Posted 1 year ago #
Elliott
Support

Hello csanyigroup,

Just to make sure you are talking about the "Post Image" that appears above your post excerpts when viewing the blog page?

If this is so then this is possible but you will need to make a few code edits and edit an image as well. Let us know if this is what you were talking about and we will walk you through the process.

Posted 1 year ago #
csanyigroup
Member

Exactly. Here is link to blog page I would like change:
http://electrical-engineering-portal.com/technical-articles

BR;
CsanyiGroup

Posted 1 year ago #

Elliott
Support

Open up /wp-content/themes/infocus/style.css and on lines 547 - 561 you should see this,

.blog_frame{
	background: transparent url(images/blog_thumb.png) no-repeat scroll 0 0;
	height:290px;
	margin-top:-20px;
	position:relative;
	width:624px;}
.blog_frame img{
	background:#F5F5F5 none repeat scroll 0 0;
	border:1px solid #FFFFFF;
	height:234px;
	left:1px;
	padding:4px;
	position:absolute;
	top:25px;
	width:612px;}

Go ahead and change them like this,

.blog_frame{
	float: left; /* changed */
	background: transparent url(images/blog_thumb.png) no-repeat scroll 0 0;
	height:150px; /* changed */
	margin-top:-20px;
	margin-right: 20px; /* changed */
	position:relative;
	width:150px; /* changed */ }
.blog_frame img{
	background:#F5F5F5 none repeat scroll 0 0;
	border:1px solid #FFFFFF;
	height:150px; /* changed */
	left:1px;
	padding:4px;
	position:absolute;
	top:25px;
	width:150px; /* changed */ }

Next open up /wp-content/themes/infocus/lib/includes/template-blog.php and find line 189 which should look like this,

$post_image = webtreats_image_resize($height='234', $width='612', $post_image);

Change the width and height values to copy what you put in the CSS (ex: 150 x 150).

After that you will need to edit the blog frame image which you can find at,

/wp-content/themes/infocus/images/blog_thumb.png

Good Luck!

Posted 1 year ago #

csanyigroup
Member

I did it after lot of work. I had to create copy of .button_link (a, hover...) and adapt it to the new positions. It looks great now, but one thing I couldn't figure out: how to make button background and hover to look the same as it was before.

Here is link: http://electrical-engineering-portal.com/technical-articles

Now I got a pretty dark button with a small changes on background when hover. Can you help with positions of image background of new button. My new button for blog and search results is now:

a.button_link2 {
    background:#111 url(images/buttons.gif) no-repeat scroll right -34px;
    float:right;
    color:#eee;
    display:inline-block;
    font-size:11px;
    height:30px;
    margin-right:5px;
    margin-top:-5px;
    padding-right:17px;
    text-transform:uppercase;}
 
a.button_link2 span {
	background:transparent url(images/buttons.gif) no-repeat scroll -2px -34px;
	display:block;
	line-height:10px;
	padding:9px 0 11px 15px;}
 
a.button_link2:hover {background-position: right -2px;color:#ccc;}
a.button_link2:hover span {background-position:-2px -2px;color:#ccc;}

What should I change it to look like it was before, and to look as it should be afterall?

Thank you in advance,

BR,
CsanyiGroup

Posted 1 year ago #

Elliott
Support

Hello csanyigroup,

The change we did shouldn't have affected the "Read More" button style. I don't remember what they looked like before but they appear to be the same.

Your images are looking nice. I'll go ahead and add this to the tutorials section.

Posted 1 year ago #
csanyigroup
Member

You're right, button is the same! I just added the small change to button style float:right;.

Thank you Eliott for your fast help!

BR,
CsanyiGroup

Posted 1 year ago #
csanyigroup
Member

I just notice that I must change category page also to look like the blog (to change 'Read more' button class 'button_link' to 'button_link2'). Difference between these two button classes it that button_link2 has style float: right;

I tried and edit template template-one-category.php, but it seems that I'm missing the template

Blog: http://electrical-engineering-portal.com/technical-articles
Category: http://electrical-engineering-portal.com/category/medium-voltage

Please point me to find right template to edit button 'Read more' class

Posted 1 year ago #
Elliott
Support

I believe that's your archive page. You need to do the same thing in /wp-content/themes/infocus/archive.php.

Posted 1 year ago #
csanyigroup
Member

You're right! I edited it and now I'm fully satisfied with this!

Thanks Eliott, you're great support.

BR,
CsanyiGroup

Posted 1 year ago #
Elliott
Support

Your welcome csanyigroup, if you have any other questions then let us know.

Posted 1 year ago #
haleila
Member

I was able to make the above modifications, but now I get the correct thumbnail image in the general Blog index page - http://www.womensempowermentfoundation.com/wef-community-blog/

But it gets distorted in the Category index page - http://www.womensempowermentfoundation.com/category/wef-community-blog/illanas-blog/

Did I miss a step?
Thanks,
Haleila

Posted 1 year ago #
Elliott
Support

You'll also need to do the same thing in the archive.php file on line 184. Let us know if that fixes it haleila.

Posted 1 year ago #
haleila
Member

Perfect, thanks!

Now I have another little problem. I added a Featured Image to a(nother) post and it's not showing up in any of the index pages. Any thoughts on what could cause that?

Posted 1 year ago #
Elliott
Support

Not really sure what you mean by index pages. Go ahead and send us a link to your site (or take a screenshot and highlight the areas) so we can take a closer look haleila.

Posted 1 year ago #
haleila
Member

http://www.womensempowermentfoundation.com/wef-community-blog/

The first post titled, "Illana Shoshan at TEDxHolyLand in Jerusalem" has an associated featured image, but it's not showing up in the excerpt.

Posted 1 year ago #
Elliott
Support

Alrighty, go ahead and PM us WP Login details so we can take a closer look.

Posted 1 year ago #
Elliott
Support

Hello haleila,

You need to set an image URL in the "Post Image" field like you did with your "Rose Mapendo- and the meaning of Hanukkah" post.

Don't forget to save/update the post or it will not display.

Posted 1 year ago #
haleila
Member

Worked like a charm! Can you explain the difference between the Post Image field and the Featured Image. I know this goes beyond the scope of InFocus support, but if you have a moment, I would much appreciate it.
Thank you again,
Haleila

Posted 1 year ago #
Elliott
Support

I'm not familiar with the "Featured Image" is it a plugin you are using? I'll go ahead and mark this as resolved but feel free to keep posting.

Posted 1 year ago #
haleila
Member

It seems to be a default feature of WP 3.0. It appears at the bottom right of all page and post admin. I'll look it up. Have a Happy New Year! Haleila

Posted 1 year ago #
Scott
Member

Hi there

Is this possible to have this for the Awake Theme. I would like the Post Images a thumbnail size eg 150x150 aligned left. I don't like them above the text. But I would only like this change in the excerpt (template-blog.asp) and not within the single.asp page.

Is this possible? I thought I could add the [fancy_images height=120 width=190]http://localhost/ozzicom/wp-content/uploads/2008/09/house1.jpg[/fancy_images] within the Post Image Field within WP-Admin but doesn't look like this works.

I would like the same as http://electrical-engineering-portal.com/technical-articles but using the Awake Theme.

Posted 1 year ago #
Elliott
Support
For Awake 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); ?>

You'll need to change the dimensions there to what you want it resized, like this,

$post_image_resized = webtreats_image_resize($img_height=100, $img_width=200, $post_image); ?>

And then you'll need to add these lines in your style.css file,
```
.blog_module .blog_post_image { float: left !important; margin-right: 10px !important; }
.blog_post_image .load_img { height: 120px !important; }
.blog_post_image { height: 120px !important; }
```
And play around with the values until it looks right. This should get you started but if it proves to be too difficult then it would be best to hire a freelancer as it is bordering custom work anyway.

Good Luck!
Posted 1 year ago #
Scott
Member

Looks like it is working for the for the excerpt page https://img.skitch.com/20110109-jcm2whyrx2yq7srnrwmtw9cj5u.jpg

But it seems to also effect the single.php page. https://img.skitch.com/20110109-jc6gc12gjj22icbcfj52uapwj9.jpg

Posted 1 year ago #
Raspo
Support

Hi Scott,
because of how the Awake theme is structured, when you modify the parameter in the "webtreats_image_resize()" function the single page will be affected too.

As Elliott said before, it would be best to hire a freelance for a more accurate job.
Some good places to look are freelanceswitch.com and jobs.wordpress.net.

Posted 1 year ago #
Scott
Member

Yeah but I would have assumed that it would a lest look the same as the excerpt page. alight to the left next to the title. But in the single.php page it is still above but to the left.

Anyway I guess I am pushing the boundaries now of this forum.

Posted 1 year ago #
Scott
Member

Is it possible to keep the Post Image in the excerpt page and remove it from the single.php page. I can always just then add a fancy image or something else.

Edit... I noticed you can select "Disable Post Image" from each individual posts, which is exactly what I was after. But know I have another issue. I am trying to add the same image that I used in the "Post Image" field in my post using "fancy_images" and words are not wrapping around the image.

eg. https://img.skitch.com/20110109-dqc13j8fqrmrajakjrnaurgfif.jpg

If I use either of the "Framed Images" shortcodes my image is to large and I am not able to add specific sizes to the shortcode.

eg. https://img.skitch.com/20110109-ncds8s8srq73euyxrntrfded1t.jpg

Posted 1 year ago #
Elliott
Support
Hello Scott,

You are trying to get the fancy_image and/or galleria to be left or right aligned correct?

The easiest way would be to surround it with a div and style it to float left or right like this,
```
<div style = 'float: left;'>
[fancy_images] etc etc
</div>
```
You can also use the frame shortcodes to achieve the same effect,

http://themes.mysitemyway.com/awake/shortcodes/style-shortcodes/

Let us know if this is what you were looking for.
Posted 1 year ago #
Scott
Member

Yes this is what I am after. But am I not able to use framed_images with hight & width sizes?

Posted 1 year ago #
Elliott
Support

The framed shortcodes are not designed to be used with the resize script. If you need your images to be resized / cropped then it would be best to use the method I shown above with the fancy_images shortcode.

Posted 1 year ago #
Scott
Member

Ok no worries thanks Elliott.

Posted 1 year ago #
Scott
Member

Is it possible to have the "Disable Post Image" option enabled for all posts by default?

http://img.skitch.com/20110111-ptrmi1r9p4n9dmpj91s6h7sruy.jpg

Posted 1 year ago #
Elliott
Support

We would have to edit the code where the image appears in the blog page and also in the widgets to reflect this. It would just be easier for customers to check that where they wish to disable it.

Posted 1 year ago #
Devik
Member

Thanks for the guidance on the Awake theme - using it I've successfully managed to shrink the image on the blog posts "homepage" so that it is more of a thumbnail. On the individual post page I noticed that the image is also the same size. While I've been able to right justify it using style.css :
.blog_post_image { float: right; height: 170px;}
I would still like to have a larger image on the individual posts page - I'm assuming I'll need some conditional to recognize that it's on the individual post page and not the homepage "blog" page. But I'm hoping you have this already elsewhere in the theme_functions.php which I can leverage.

Thanks.

Posted 1 year ago #
Elliott
Support

Hello Devik,

If possible then send us a link to your site or take a screenshot and highlight the areas you are having trouble with so we can take a closer look.

Posted 1 year ago #
bidum00
Member
Featured image above post is cropped wrong, If it could be cropped from the top so peoples heads are not cropped out this would be great. Seems I need to use featured image so that other parts of blog section show thumbnails

What would be the best way to fix this?
Attachments
Untitled-1.jpg (102.9 KB, 0 downloads) 5 months old
Posted 5 months ago #
Elliott
Support

Hello bidum00,

When the image gets resized it will zoom in some depending on it's aspect ratio. So far the only way to get past this is to crop it before uploading. You can also change the image dimensions in Dashboard -> your theme -> Image Resizing and make the image a bit taller so it shows all of the head.

If you need to disable it on your post then there is an option, http://mysitemyway.com/docs/index.php?title=Post_Options#Disable_Featured_Post_Image, when editing the post and you can then insert your own image there with our image_frame and fancy_images shortcodes.

Posted 5 months ago #