Featured image in Single author, big preview pic smaller and title above image - Support

Viewing 17 posts - 1 through 17 (of 17 total)

Author

Posts
November 12, 2014 at 7:38 pm #350266

Morticka
Participant

Hi guys :D,

In avia builder for my blogposts I’ve selected single author, big featured image preview pic, inside a section. The posts are nicely centered that way and the single post featured image is larger in width then the text underneath. It looks good on mobile as well, using the entire width of the devices.

But, the featured image stretches to fit the section in desktop mode. Compared to the text it is huge. I’ve tried experimenting with all the settings and column sizes to get almost the same layout like at http://blog.invisionapp.com/ (Only I want the posts centered) But no such luck.

My questions:
1. Is there a way to make the featured image smaller, but still with a bigger width then the text?
2. How can I move the title above the featured image, in summary view as well as in single post view?

Can you help me?

Sincerely,
Morticka

November 12, 2014 at 10:01 pm #350379
Elliott
Inactive Moderator
Hey Morticka!

1. Do you want to reduce the height but leave the width alone? We can do that with CSS but it may make your image look distorted.

2. Open up /enfold/includes/loop-index.php and move lines 90 – 95.
```
//echo preview image
if(strpos($blog_style, 'big') !== false)
{
	if($slider) $slider = '<a href="'.$link.'" title="'.$featured_img_desc.'">'.$slider.'</a>';
	if($slider) echo '<div class="big-preview '.$blog_style.'">'.$slider.'</div>';
}
```
Down to line 187.

Best regards,
Elliott
November 13, 2014 at 11:15 am #350613

Morticka
Participant

Hi Elliot!!

1: Yes, I want to reduce both, only the width should be bigger then the text below. I would like to be able to choose, say a standard width of 701px, without distortion of the image?

2. I work with a child theme and I have already made changes to loop-index.php earlier with you guys, so the line numbers are different now. Can you be more specific where to place the //echo preview image files exactly?

Sincerely,
Morticka

November 13, 2014 at 7:15 pm #350853
Elliott
Inactive Moderator
Hey!

1. Try this CSS out.
```
#top .fullsize .template-blog .big-preview img {
    margin: 0 auto;
    width: 70%;
}
```
2. I’m not sure about previous versions but you should move those lines so they display just above this.
```
// echo the post content
```
Regards,
Elliott
November 15, 2014 at 1:55 pm #351803

Morticka
Participant

Hi Elliot!! :)

1. CSS code worked perfectly!! The images were exactely the size I was looking for, the width bigger than the text :D But…

2. When I moved the php code around, the title appeared on top, great so far,
But the images are now very small. When I removed the CSS code, the images were slightly bigger again, but they now had the same width as the text.

So how can I get the size of the images back, the same effect as with your previous CSS code (1) ?

Sincerely,
Morticka

November 16, 2014 at 2:41 pm #352003
Ismael
Moderator
Hey!

You can use this code to adjust the featured image size:
```
#top .fullsize .template-blog .big-preview img {
width: 100%;
}

#top .fullsize .template-blog .post .entry-content-wrapper > * {
max-width: 800px;
}
```
Best regards,
Ismael
November 17, 2014 at 12:45 pm #352353

Morticka
Participant

Hi Ismael!

I tried your CSS code, but the image has the same width as the text below it and I would like it to have a bigger width then the text.

The CSS code Elliot gave me is the effect I’m looking for.

I put his CSS code back and restored the original loop php file as well, so you can see what I’m after. But, with his code the featured image on deskop looks perfect, but on mobile is too small. If I remove his CSS code as well, the featured image looks good on mobile, but then I’m back where I started and the featured image looks huge on the desktop.

So,

1. How can I make the image look good on mobile and the desktop, with the width bigger then the text below?
2. Is there another way to put the Title above the featured image and keeping the width of the featured image as it is now?

Sincerely,
Morticka

November 17, 2014 at 5:08 pm #352542
Elliott
Inactive Moderator
Hey!

You can try this to increase it a bit more on small screens.
```
@media only screen and (max-width: 479px) {
#top .fullsize .template-blog .big-preview img {
    margin: 0 auto;
    width: 90%;
}
}
```
Cheers!
Elliott
November 17, 2014 at 6:51 pm #352612

Morticka
Participant

Thx Elliot!! Works like a charm, images on desktop and mobile display the way I wanted them to :D

Is there any way to keep the size of the images on desktop and mobile this way after I change loop-index.php like you suggested in post #350379 ?
Because with only the CSS changes the images are perfect, but when I change the loop-index.php file, the images become really small. I tried it again, see for yourself.
Ismael his suggestion did not work unfortunately?

Sincerely,
Morticka

November 18, 2014 at 12:53 am #352784
Elliott
Inactive Moderator
Hi!

I’m sorry but I’m not sure I understand. Go ahead and take a screenshot and highlight what is going on so we can get a better idea.

As for saving the changes between updates create a new folder in your child theme called /includes/ and then copy the loop-index.php file over to it from Enfold.

Regards,
Elliott
- This reply was modified 10 years, 1 month ago by Elliott.
November 18, 2014 at 10:57 am #352882

Morticka
Participant

This reply has been marked as private.

November 18, 2014 at 8:42 pm #353229
Elliott
Inactive Moderator
Hi!

I see, try this out.
```
#top .fullsize .template-blog .post .entry-content-wrapper > .big-preview {
    max-width: 120% !important;
}
```
Best regards,
Elliott
November 19, 2014 at 11:15 am #353544

Morticka
Participant

Hi Elliot,

Tried it, the image width is bigger, but still not the same. I first tried 160 and then 200% but it would not get bigger after 160%

Any other solutions?

Sincerely,
Morticka

November 19, 2014 at 7:45 pm #353912

Elliott
Inactive Moderator

Hey!

Your images are displaying on top of the titles on my end. Did you remove the PHP customization?

Regards,
Elliott

November 20, 2014 at 10:50 am #354178

Morticka
Participant

Hi!

Yes I did, I’m working on new blogposts and I have to test new images.

I just put the changed loop-index.php back, the title is above the blogposts again. :)

Sincerely,
Morticka

November 20, 2014 at 7:26 pm #354400
Elliott
Inactive Moderator
Hey!

You need to leave both the PHP customization and the CSS code in so I can see what’s going on. I don’t see the previous CSS code on your site anymore.

Try adding this along with the other CSS.
```
#top .fullsize .template-blog .big-preview img { width: 100% !important; }
```
Regards,
Elliott
- This reply was modified 10 years, 1 month ago by Elliott.
November 21, 2014 at 1:20 am #354773
Morticka
Participant
Hi Elliot!

Woops, sorry :D

~~I added the last CSS code and the image width is now the same as the text below, so that’s already better. But not yet the bigger width as the CSS code you gave me before (see image at #352882 )~~

~~Do you have another suggestion?~~

Never mind, I thought I just had to add the last code, with the previous CSS code added, it works now!!

You’re wonderful, thank you very much Elliot :D

Sincerely,
Morticka
- This reply was modified 10 years, 1 month ago by Morticka. Reason: Late night edit and brain on standbye
Author

Posts

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Featured image in Single author, big preview pic smaller and title above image’ is closed to new replies.