CODEWITHSUNDEEP
htmlcssjekyll
Manu
Manu

Reputation: 319

Making Jekyll img's wider than the text?

For my Jekyll blog, I want the images to span the whole width of the column, while having padding on either side of the text, like this: http://www.webdesignerdepot.com/2015/05/the-ultimate-guide-to-web-animation

The main problem I'm having is that Jekyll wraps images in <p> tags, so there's no way (that I know of) to target the width of images without and not the paragraphs.

<p>
  "Some text."
</p>
<p> <img src="#"> </p>

How would you suggest tackling this issue?

Upvotes: 2

Views: 523

Answers (3)

Mr. Hugo
Mr. Hugo

Reputation: 12590

You can also choose to create an HTML block. This is done by wrapping an img tag in a div like this:

line

<div><img src="image.jpg" /></div>

line

No clean markdown, but a pretty clean solution nevertheless. Found the solution here.

Upvotes: 0

Mr. Hugo
Mr. Hugo

Reputation: 12590

I think Davids answer is really good. However, if you have no problem solving this with jQuery, you can do this:

$('.content > p > img').parent().css('padding','0');

That way your markdown will stay clean.

Upvotes: 3

David Jacquel
David Jacquel

Reputation: 52829

I understand that you are writing your post/page in markdown.

In order to apply a specific style to the P container you can use kramdown block attributes to set a class on it.

Some test

![Alt text](/path/to/img.jpg)
{: .imgContainer}

Will render as

<p>Some test</p>

<p class="imgContainer"><img src="/path/to/img.jpg" alt="Alt text" /></p>

You can then style .imgContainer.

Upvotes: 3

Related Questions