[Resolved] Featured Image (3 problems)

[anamoore]

Hello! I just purchased GP Premium today. Until now, I fully customized my site. Two things I want to ask you, so my site can be “perfect”:

1. On Homepage (latest post), is there any chance that featured post images to be set to main container full-width but the rest of the post excerpt remains with the pading options? I use sidebar-content-sidebar for homepage.

2. How can I add a slider ONLY on my homepage (still set to latest posts), that works with random images? And which slider would you recommend, if the procedure is posible?

3. How can you make a video to be post-featured, and able to be played on homepage?

Thank you!

[Tom]

Hi Roxana,

1. I’m not too sure what you mean – do you have a link to an example I can take a look at?

2. There’s lots of slider options out there. Meta Slider is the most popular free one, while Master Slider, Revolution Slider and a couple others are really good premium ones. Once you create a slideshow, grab the shortcode and go to “Appearance > Blog Page Header” (Page Header add-on required) and insert the shortcode into the content field.

3. I show how to do this in one of the Page Header videos (second video on this page: http://generatepress.com/knowledgebase/generate-page-header/). Basically, you insert the embed code into the Page Header content metabox while adding your post. Then set the “Show in excerpt” option.

Let me know if you have any problems 🙂

[anamoore]

1. Example: What I want is highlighted with light green. As you can see, the featured image has the full-width of the content container, but the text excerpt still respects the margins. Example: http://roxirose.com/wp-content/uploads/2015/02/wanted.png

In my case: On the homepage, and on every category, the excerpts are entirely respecting the margins. The only thing I should modify is the width of the featured images. To better understand, compare this link with the other one: (my site) http://roxirose.com/wp-content/uploads/2015/02/mycase.png

2. Right now I am reading similar posts on this forum. (Think I’ll make it soon)
3. Just saw the video.

So the only question remains the first one…

[Tom]

Hi Roxana,

This CSS should do the trick:

.post-image-above-header .post-image {
      margin-top: -40px;
      margin-right: -40px;
      margin-bottom: 40px;
      margin-left: -40px;
}

You’ll have to adjust the 40px if you’ve changed the content padding in the Spacing add-on.

Hope this helps 🙂

[anamoore]

Worked like magic! Thank you very much, for your time and advices!

[Tom]

You’re welcome 🙂

[Ross Robson]

Would it be possible to add a transparency option to the page header image option, would save us creating pictures with a transparency look and that way whatever background color we have we could use that as the color overlay?

Thanks

[Tom]

It’s best to do transparency within your image itself instead of asking the server to do it – getting the server to do it will hurt performance.

[Ross Robson]

Do you use photoshop or illustrator? whats best?

[Tom]

I use Photoshop, but Gimp is a free version which can handle a job like that easily 🙂

[Author]

Posts