Reputation: 31
I've build a simple site using the WP template http://wpshower.com/themes/expositio/
The site is: Mathiaswarnich.dk
It's alright but it does not show alt texts and I can't figure the php setup out. This is the code for images:
* The template for displaying image attachments
// Retrieve attachment metadata.
$metadata = wp_get_attachment_metadata();
get_header();
?>
<section id="primary" class="content-area image-attachment">
<div id="content" class="site-content" role="main">
<header class="entry-header">
<?php the_title('<h1 class="entry-title">', '</h1>'); ?>
<div class="entry-meta">
<div class="full-size-link">
<a href="<?php echo wp_get_attachment_url(); ?>"><?php echo $metadata['width']; ?> × <?php echo $metadata['height']; ?></a>
</div>
<div class="parent-post-link">
<a href="<?php echo get_permalink($post->post_parent); ?>" rel="gallery"><?php echo get_the_title($post->post_parent); ?></a>
</div>
</div>
</header><!--
--><article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="entry-content">
<div class="entry-attachment">
<div class="attachment">
<?php expositio_the_attached_image(); ?>
</div><!-- .attachment -->
<?php if (has_excerpt()) : ?>
<div class="entry-caption">
<?php the_excerpt(); ?>
</div><!-- .entry-caption -->
<?php endif; ?>
</div><!-- .entry-attachment -->
<?php
the_content();
wp_link_pages(array(
'before' => '<div class="page-links"><span class="page-links-title">'.__('Pages:', 'expositio').'</span>',
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
));
?>
Upvotes: 1
Views: 1627
Reputation: 11
Yes, I have also noticed recently the same issue on my photography website which uses WP Expositio theme as well.
The workaround introduced in Stender's answer will not work because the gallery is handled by a custom function.
The solution is very easy:
Step 1: Open /inc/template-tags.php in theme directory.
Step 2: Go to line 87 and inspect code here:
function expositio_image_tag($thumbnail_id, $size = 'post-thumbnail') {
$meta = wp_get_attachment_metadata($thumbnail_id);
if ($meta === false || $meta === '') {
return sprintf(
'<img src="%s" width="%s" height="%s" alt="" />',
wpShower::defaultImage(),
wpShower::$default_image_width,
wpShower::$default_image_height
);
}
$src = wp_get_attachment_image_src($thumbnail_id, $size);
$size_available = isset($meta['sizes'][$size]);
return sprintf(
'<img src="%s" width="%s" height="%s" alt="" />',
$src[0],
$size_available ? $meta['sizes'][$size]['width'] : $meta['width'],
$size_available ? $meta['sizes'][$size]['height'] : $meta['height']
);
}
Step 3: Replace above code block with this:
function expositio_image_tag($thumbnail_id, $size = 'post-thumbnail') {
$meta = wp_get_attachment_metadata($thumbnail_id);
if ($meta === false || $meta === '') {
return sprintf(
'<img src="%s" width="%s" height="%s" alt="" />',
wpShower::defaultImage(),
wpShower::$default_image_width,
wpShower::$default_image_height
);
}
$alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
$src = wp_get_attachment_image_src($thumbnail_id, $size);
$size_available = isset($meta['sizes'][$size]);
return sprintf(
'<img src="%s" width="%s" height="%s" alt="%s" />',
$src[0],
$size_available ? $meta['sizes'][$size]['width'] : $meta['width'],
$size_available ? $meta['sizes'][$size]['height'] : $meta['height'],
$alt
);
}
Step 4: Save/upload edited file. Refresh the site.
Basically, we're creating an $alt variable here which retrieves an image alt attribute and adding it to an formatted string values array. Enjoy.
Upvotes: 1
Reputation: 2492
if it is a featured image - you can change
<?php expositio_the_attached_image(); ?>
to this
//full is the size - If you have a size from the theme, use that instead.
//don't know how your theme works, but maybe 'expositio_attachment_size'
<?php the_post_thumbnail('full'); ?>
Or even this
<div class="attachment">
<?php expositio_the_attached_image(); ?>
</div><!-- .attachment -->
To this
<?php if ( has_post_thumbnail() ) : ?>
<div class="attachment">
<?php the_post_thumbnail('full'); ?>
</div><!-- .attachment -->
<?php endif; ?>
You can also add attributes to this function, if there is some image classes that you are missing: like this
<?php if ( has_post_thumbnail() ) : ?>
<div class="attachment">
<?php the_post_thumbnail('full', ['class' => 'img-responsive responsive--full', 'title' => 'Feature image']); ?>
</div><!-- .attachment -->
<?php endif; ?>
Good luck, have fun!
Upvotes: 0