Trying to insert hyperlinks onto separate pictures within my mosaic gallery

• 

  nicolaticola · Member · Jul 29, 2014 at 5:27 am

  • Copy link
  • Add topic to favorites

  Hi, I’ve been trying to create a home page with a mosaic gallery of pictures each with their own individual hyperlink to another page in my site. i.e picture of an envelope that takes the user to my contact us page.

  I can’t seem to insert hyperlinks to the individual pictures in the gallery mode and can’t find a way to insert individual pictures within a table (so i can create my own mosaic) to allow for me to separately add the links.

  Can anyone help?

  The blog I need help with is: (visible only to logged in users)

• 

  jeremeylduvall · Member · Jul 29, 2014 at 8:43 pm

  • Copy link

  Hi there,

  I’m afraid you cannot specify URLs for images within a gallery so this likely isn’t the best option. One way to accomplish this would be to use a table to add and organize the images on your page. For example, on your page titled “Home”, you could use tables to have the images look like this:

  

  The basic format for this would be as follows:

  <table>
  <tbody>
  <tr>
  <td><a title="Reviews" href="http://cruxdevotion.com/reviews"><img class="wp-image-22 aligncenter" src="http://cruxdevotion.files.wordpress.com/2014/07/shutterstock_154489901.jpg" alt="Reviews" width="300" height="300" /></a></td>
  <td><a title="Climbing Locations" href="http://cruxdevotion.com/climbing-locations"><img class="wp-image-58 aligncenter" src="http://cruxdevotion.files.wordpress.com/2014/07/shutterstock_96933623.jpg" alt="Maps " width="300" height="300" /></a></td>
  <td><a href="http://cruxdevotion.com/contact-us"><img class="wp-image-60 aligncenter" src="http://cruxdevotion.files.wordpress.com/2014/07/screen-shot-2014-07-29-at-1-02-49-pm.png?w=300" alt="Screen Shot 2014-07-29 at 1.02.49 PM" width="300" height="300" /></a></td>
  </tr>
  </tbody>
  </table>

  Basically, you would place the following around each individual image:

  <td>Image code</td>

  Then, bookend all of the images with the following:

  <table>
  <tbody>
  <tr>
  Image codes with td's
  </tr>
  </tbody>
  </table>

  One note, you’ll want to make sure the images are the same size prior to uploading or edit them to the same size after uploading. Instructions on how to do that can be found here:

  http://en.support.wordpress.com/images/image-editing/

  Can you give that a try?

• 

  nicolaticola · Member · Jul 30, 2014 at 5:55 am

  • Copy link

  Hi, Thank you!! That worked… only question, how do I re-size the images?

• 

  jeremeylduvall · Member · Jul 30, 2014 at 6:22 pm

  • Copy link

  Hi there,

  The best way to do this would actually be to resize the images prior to uploading. It looks like you’re on a Mac so you should be able to do this in Preview (Tools -> Adjust Size). Alternatively, you can do this at WordPress.com as explained here:

  http://en.support.wordpress.com/images/image-editing/#resizing

  You’ll want to either crop or resize the images so they’re the same size. Can you give that a try?

• 

  nicolaticola · Member · Jul 31, 2014 at 10:19 am

  • Copy link

  That worked perfectly. Thank you

• 

  jeremeylduvall · Member · Jul 31, 2014 at 4:08 pm

  • Copy link

  Not a problem! Happy to help.