If you provide me a before/after comparison, i can try to tell you if/how it’s possible.
Sure!
Here is the default markup:
<ol class="gtc-list">
<li>
<a class="gtc-content-thumb" href="/perspective/dampak-negatif-pariwisata/">
<img width="100" height="70" src="http://localhost/youthpro/wp-content/uploads/2016/05/2016-05-miskin-dan-kaya-pariwisata-tuca-vieira-100x70.jpg" class="attachment-kopa-image-size-3 wp-post-image alignleft wp-post-image" alt="Foto: Paraisopolis, oleh Tuca Vieira.">
</a>
<a class="gtc-link" href="/perspective/dampak-negatif-pariwisata/">Pariwisata, Tidak Seindah yang Kita dan Pemerintah Bayangkan </a>
</li>
<!-- etc -->
</ol>
I want to change it to:
<ol class="gtc-list">
<li>
<figure class="gtc-content-thumb" href="/perspective/dampak-negatif-pariwisata/">
<a href="/perspective/dampak-negatif-pariwisata/">
<img width="600" height="200" src="http://localhost/youthpro/wp-content/uploads/2016/05/2016-05-miskin-dan-kaya-pariwisata-tuca-vieira-600x200.jpg" class="attachment-kopa-image-size-3 wp-post-image wp-post-image" alt="Foto: Paraisopolis, oleh Tuca Vieira.">
</a>
</figure>
<h3 class="gtc-link">
<a href="/perspective/dampak-negatif-pariwisata/">Pariwisata, Tidak Seindah yang Kita dan Pemerintah Bayangkan </a>
</h3>
</li>
<!-- etc -->
</ol>
So, as you can see, I addde figure to the thumbnail, added h3 to the post title, changed the image size to 600×200, and removed the alignleft class in the image. Your help is really appreciated!
Image size is controlled by your shortcode attributes. Do you have a 600×200 image size defined with add_image_size()? If so, you would set the shortcode thumb_size attribute to the name of that image size.
To update the thumbnail wrap, you’d do this:
function modify_gtc_list_item_thumb( $html, $url, $thumb ) {
return '<figure class="gtc-content-thumb" href="'. $url .'"><a href="'. $url .'">' . $thumb . '</a></figure>';
}
add_filter( 'gtc_list_item_thumb', 'modify_gtc_list_item_thumb', 10, 3 );
And to modify the title wrap:
function modify_gtc_list_item_format( $format ) {
return '<li>%1$s<h3 class="gtc-link"><a href="%2$s">%3$s</a></h3></li>';
}
add_filter( 'gtc_list_item_format', 'modify_gtc_list_item_format' );
Image alignment class is controlled by your shortcode attributes. You would set the shortcode thumb_alignment attribute to a blank/empty string to remove.
Thanks for the response!
I tried the filter, but it doesn’t seem to work though. Nothing has changed in the front. Tried wrapping it with if ( function_exists( 'gtc_list_item_thumb' ) ), but also nothing…
That’s because GTC results/output is cached for a period of time. Add ?delete-trans=1 to your URL as you are testing to bypass/flush the cache.
Works like a charm. Much appreciated!
One more thing, sorry. Is it possible to add the post category and the published date? So it would look something like,
<ol class="gtc-list">
<li>
<figure class="gtc-content-thumb" href="/perspective/dampak-negatif-pariwisata/">
<a href="/perspective/dampak-negatif-pariwisata/">
<img width="600" height="200" src="http://localhost/youthpro/wp-content/uploads/2016/05/2016-05-miskin-dan-kaya-pariwisata-tuca-vieira-600x200.jpg" class="attachment-kopa-image-size-3 wp-post-image wp-post-image" alt="Foto: Paraisopolis, oleh Tuca Vieira.">
</a>
</figure>
<h3 class="gtc-link">
<a href="/perspective/dampak-negatif-pariwisata/">Pariwisata, Tidak Seindah yang Kita dan Pemerintah Bayangkan </a>
</h3>
<span class="gtc-category"><a href="/perspective/">Category: Perspective</a></span>
<time class="gtc-time updated" datetime="2016-05-25T12:43:06+00:00">May 25, 2016</time>
</li>
<!-- etc -->
</ol>
Something like this:
function modify_gtc_list_item( $item_html, $page, $wppost ) {
if ( $wppost ) {
$date = get_the_time( 'M j, Y', $wppost );
$categories = get_the_category_list( 'Category: ', null, $wppost->ID );
$xtra_data = '<span class="gtc-category">'. $categories .'</span>';
$xtra_data .= '<time class="gtc-time updated" datetime="2016-05-25T12:43:06+00:00">'. $date .'</time>';
$item_html = str_replace( '</a></h3>', '</a></h3>' . $xtra_data, $item_html );
}
return $item_html;
}
add_filter( 'gtc_list_item', 'modify_gtc_list_item', 10, 3 );
I’ll leave you to modify that as needed.
Thanks! Much appreciated, Justin. 🙂
