1

I'm building site a with store images, although some stores don't have an available image. The best I can do is use its placeholder text to display the store title. However, by default the placeholder text is located at the top left of the div and is unstyled.

How can I target the placeholder text to style it??

UPDATE

Ok, maybe I should mention that I'm using WordPress. Perhaps using a simple PHP if else statement would suffice?? Show img if it exists, else show h4 element that I can add in.

Jcode
  • 223
  • 1
  • 10

4 Answers4

1

You can style some properties directly on img:

img {
  color:red;
  font-size:20px;
  text-align:center;
  line-height:200px;
}
<img title="Test Text" src="http://exmaple.com/123.jpg" width="200" height="200"/>
Sebastian Brosch
  • 37,059
  • 14
  • 61
  • 73
  • Thank you. But how can I alter the texts position without moving affecting the image itself? – Jcode May 01 '17 at 19:27
1

Put the text into a and style it as you would for any other html element.

<div class="store-title">
This is where the store name goes.
</div>

If the text is already into an HTML element you can not modify you will have to use existing class or id to hook up to it and style it.

Of you can style the <img> element as well.

sebster77
  • 11
  • 1
1

You can use line-height to vertically center:

HTML

<img title="Test Text" src="http://example.com/i-dont-exist.png" width="200" height="200" onerror="this.classList.add('no-image')" />

CSS

img.no-image {
  color: red;
  font-size: 20px;
  line-height: 200px;
  text-align: center;
}

JSFiddle demo: https://jsfiddle.net/ugr6gp8n/2/

Here's another way to style alt text but it only works in Chrome so it's not recommended:

HTML

<img title="Test Text" src="http://example.com/i-dont-exist.png" width="200" height="200" onerror="this.classList.add('no-image')" />

CSS

img[title] {
  position: relative;
}

img[title]:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  color: red;
  line-height: 200px;
  text-align: center;
  content: attr(title);
}

JSFiddle Demo: https://jsfiddle.net/cxa37mLd/1/

Sources:

Community
  • 1
  • 1
Miguel Mota
  • 17,966
  • 5
  • 37
  • 55
  • The inline js code you provided doesnt seem to work for me. I like the idea tho. I'm using WordPress, perhaps that has something to do with it?? – Jcode May 01 '17 at 19:51
  • http://stackoverflow.com/questions/6949148/css-after-not-adding-content-to-certain-elements ... http://stackoverflow.com/questions/37159484/why-doesnt-line-height-work-on-img-elements – Ason May 01 '17 at 20:28
  • If you add info to your answer that this is not suppose to work, though on Chrome it still does, I'll retract my down vote ... and notify me if you do, so I don't miss it – Ason May 01 '17 at 20:37
0

UPDATE 2

Ok this is resolved

HTML/PHP:

  <?php if(have_posts() ) : while (have_posts() ) :the_post(); ?>

  <div class="col-xs-12 col-sm-6 col-md-4">
    <a class="store-item-link" href="<?php the_permalink(); ?>">
      <div class="store-item" style="border-bottom: 10px solid <?php the_field('color'); ?>">
/* Starting here */
        <?php if(wp_get_attachment_url(get_post_thumbnail_id()) == ''):?>

          <h3><?php the_title(); ?></h3>

        <?php else: ?>

          <img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>">

        <?php endif; ?>
/* Ending here */
      </div>
    </a>
  </div>

  <?php endwhile; endif; ?>

CSS

    h3{
    margin:  0;
    font-weight: bold;
    font-size: 3rem;
    line-height: 175px;
    text-align: center;
  }

This worked great and thanks everyone for your ideas.

Jcode
  • 223
  • 1
  • 10