Modifying HTML markup

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="https://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="https://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="https://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. ??