Display Text Over Image - Receptar Theme

Support Forms & Blueprints
1

I am using the Receptar Skeleton to build a site. I want to display text on top of an image. The image is rendered like such:

  <div class="entry-media {% if truncate %}entry-{% if page.header.youtube or page.header.soundcloud or page.header.vimeo %}video{% else %}image{% endif %}{% else %} resp_video{% endif %}">
    <div class="post-thumbnail">
      {% if page.media.images|first %}
      {{ page.media.images|first.cropZoom(338,451).html('','', 'attachment-receptar-featured size-receptar-featured wp-post-image')| }}
      {% else %}
      <img class="attachment-receptar-featured size-receptar-featured wp-post-image" src="{{ theme_url }}/images/{{ site.global_featured_image }}">
      {% endif %}

    </div>
  </div>

I’ve added a ‘text’ field to the item.md and want to put this text on top of the displayed image. Later, I will hide the text and display it on img hover. I can get the text to display, but it’s always in a separate div on top, to the side, or below the img.

        {% if page.header.text %}
      {{page.header.text}}
      {% endif %}

Is there a way to display this text on top of the rendered image without brute forcing it with CSS?

Thank you!

2

@logjammin,

Is there a way to display this text on top of the rendered image without brute forcing it with CSS?

You will need css…

Here is just one of the many pages on this topic that can be found using Google: How to place text on image using HTML and CSS?

3

Ha, yes, I had a moment of not using my brain. I guess I am running into the same issue that I had with the other theme where I can remove the text but not resize the dive that contained it. So each blog_item renders with this blank space next to it:

image
image1286×846 51.2 KB

I guess what I really want to do is make it so only the picture is displayed and on hover, text appears, and get rid of the extra white spice. I’m thinking that maybe the blog_item twig is not going to allow for that. I can’t figure out where the size is specified for the containing div.

4

@logjammin, Receptar sets the width of each item at two places:

.posts .hentry {
    float: left;
    position: relative;
    width: 50%;
    overflow: hidden;
}

and

.posts .entry-media {
    float: left;
    width: 50%;
    margin: 0;
}

This means every item takes 50% of the width of the page, leaving white space next to the image.

5

There we go!

I’d tried editing the

.posts .hentry {
	float: left;
	position: relative;
	width: 25%;
	overflow: hidden;
}

before but I must not have saved or something. I am an airhead! Thank you SO much!!