CODEWITHSUNDEEP
phpwordpress
nsilva
nsilva

Reputation: 5612

PHP - add_image_size

I have the following line of code in a Wordpress theme which I purchased which is:-

add_image_size( 'homeland_property_medium', 330, 230, true );

This adds the following HTML on the page:-

<img class="attachment-homeland_property_medium wp-post-image" width="330" height="230" alt="7-020130322113404" src="http://nathandasilva.co.uk/butlinps/wp-content/uploads/2014/11/7-020130322113404-330x230.jpg"></img>

I have replaced the below code:-

<a href="<?php the_permalink(); ?>">
    <?php if ( has_post_thumbnail() ) { the_post_thumbnail('homeland_property_medium'); } ?>
</a>
<figcaption><a href="<?php the_permalink(); ?>"><i class="fa fa-link fa-lg"></i></a></figcaption>

With:-

<svg width="296" viewBox="0 0 1.286956522 1" height="230" style="margin-left: 0px; margin-top: -17px; z-index: 1;">
  <defs style="">
    <clipPath id="shape">
      <path d="M0.6434782609,0 L1.286956522,0.166666666667 L1.286956522,1 L0,1 L0,0.166666666667z"></path>
    </clipPath>
  </defs>
  <a xlink:href="<?php the_permalink(); ?>">
    <image y="-0.1" x="0" clip-path="url(#shape)" xlink:href="http://nathandasilva.co.uk/butlinps/wp-content/uploads/2014/11/7-020130322113404-330x230.jpg" height="1px" width="1.286956522px"></image>
  </a>
</svg>

For the replaced code I added a static image (http://nathandasilva.co.uk/butlinps/wp-content/uploads/2014/11/7-020130322113404-330x230.jpg) for the image, I need to somehow replace this with the URL to the associated property image but I don't even know where to start?

Maybe I need to show more code in order for you guys to help me, let me know if this is the case and I'll carry on looking...

Upvotes: 1

Views: 278

Answers (1)

nsilva
nsilva

Reputation: 5612

Managed to fix this in the end by changing the HTML section to:-

                <? $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>                 
                <svg width="296" viewBox="0 0 1.286956522 1" height="230" style="margin-left: 0px; margin-top: -17px; z-index: 1;">
                  <defs style="">
                    <clipPath id="shape">
                      <path d="M0.6434782609,0 L1.286956522,0.166666666667 L1.286956522,1 L0,1 L0,0.166666666667z"></path>
                    </clipPath>
                  </defs>
                  <a xlink:href="<?php the_permalink(); ?>">
                    <image y="-0.1" x="0" clip-path="url(#shape)" xlink:href="<?php echo $url; ?>" height="1px" width="1.286956522px"></image>
                  </a>
                </svg>

Basically added this:-

<? $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>

To get the URL of the thumbnail ID, then set the href for the image as:-

<image y="-0.1" x="0" clip-path="url(#shape)" xlink:href="<?php echo $url; ?>" height="1px" width="1.286956522px"></image>

Upvotes: 1

Related Questions