How to make Clickable Images

As stated before, getting your clickable images where you want them on your page can be kind of a tricky process.  So make sure to keep the following things in mind when you’re trying to create a page like this.

Did you know ProPhoto 5 includes a Grid feature? It automatically creates great-looking image thumbnail grids which can link to stuff on your site or anywhere else online. 

First – Determine Content Area

First, you need to be aware of the size of the “content area” you’re working with.  To determine this, take your blog width, less the content margins you have set under “ProPhoto” > “Customize” > “Background”.   As an example, if your blog width is set to 960px with content margins of 30px, your actual “content area” is 900px.

Don’t worry, you can do this math! 960px – 30px right – 30px left = 900px total

Second – Determine Image Width/Margins

Second, you need to know your image width and built-in image margins.  Even though thumbnail images are generally 150px in width, they actually end up “wider” when formatted as you’ve done.

Because you want your images aligned properly in a row, it’s important that you align your images “left” so that they line up next to each other.  However, because the images are aligned left, each image has built in right-side margin of 30px to allow for adequate spacing between images.

In addition, because you’re adding “captions” to each image to label them, WordPress automatically adds an additional 10px to the right side of the thumbnail image width in order to create additional spacing for the caption area.

So thumbnail images, aligned left, will actually take up 190px in width, not just 150px.

Continuing with our example, if you’re wanting to upload 5 thumbnail images at 150px wide apiece (750px total), there is 30px of right margin for each image (150px total), plus 10px of width added to each image to accommodate for the caption (50px total).  Therefore, the actual space of the images, with margin and additional width, would occupy would be 950px (750px + 150px + 50px).

So, with the content area that we determined above of 900px, these images would take up too much space to fit in one row, so the fifth image would end up getting pushed down into a second row.

Third – Get it to Work!

How do we get this to work then?  There are a couple ways.

One option is you could change your blog width/content margins to fit all the images.  But, this could goof up all your other posts/pages that contain images, so it’s probably not the best option.

A better choice is probably to use custom CSS to change the left and right margins of your images so that they end up getting spaced correctly and centered.

So using our example, paste the following code under the the Custom CSS area of “ProPhoto” “Customize” > “Advanced” > “Custom Code”:

body.page-id-xxx .alignleft {margin-right: 5px !important; margin-left: 15px !important;}

wp411_image_margin_css

(The ‘xxx’ is the actual page id number assigned to your new “clickable images” page.  You can determine your page id in the page editor screen.  We use this page id in our CSS so it only gets applied to this one page, not all your pages.)

Now you can obviously change the left/right margin “px” values in the code to whatever you want.  For our example, they were calculated this way.  Because each 150px image has 10px of width added by WordPress to the right side (which we can’t change), we instead change the default additional 30px of margin that is added to the right hand side to just 5px.  So now we have 15px of margin on the right side in total (10px + 5px).  And to make them look centered, then we add 15px of margin on the left side.

So, within our 900px “content area”, we now have 5 thumbnail images at 150px wide (750px total) with 15px of margin on both sides of each image (30px of margin for each image, 150px in margin total).  Therefore, the total width of our images and margin is exactly 900px (750px + 150px), which will fit our content area just perfectly!

Now this looks good!!

As you can see, you can do this! But it’s probably going to make you hate your Middle School math days even more than you already do…..   So just take your time, get out pen, paper and calculator if you have to and do some trial and error until you get it right.

You’ll get there!


As stated before, getting your clickable images where you want them on your page can be kind of a tricky process.  So make sure to keep the following things in mind when you’re trying to create a page like this.

Did you know ProPhoto 4 includes a Grid feature? It automatically creates great-looking image thumbnail grids which can link to stuff on your site or anywhere else online. 

First – Determine Content Area

First, you need to be aware of the size of the “content area” you’re working with.  To determine this, take your blog width, less the content margins you have set under “ProPhoto” > “Customize” > “Background”.   As an example, if your blog width is set to 960px with content margins of 30px, your actual “content area” is 900px.

Don’t worry, you can do this math!      960px – 30px right – 30px left = 900px total

Second – Determine Image Width/Margins

Second, you need to know your image width and built-in image margins.  Even though thumbnail images are generally 150px in width, they actually end up “wider” when formatted as you’ve done.

Because you want your images aligned properly in a row, it’s important that you align your images “left” so that they line up next to each other.  However, because the images are aligned left, each image has built in right-side margin of 30px to allow for adequate spacing between images.

In addition, because you’re adding “captions” to each image to label them, WordPress automatically adds an additional 10px to the right side of the thumbnail image width in order to create additional spacing for the caption area.

So thumbnail images, aligned left, will actually take up 190px in width, not just 150px.

Continuing with our example, if you’re wanting to upload 5 thumbnail images at 150px wide apiece (750px total), there is 30px of right margin for each image (150px total), plus 10px of width added to each image to accommodate for the caption (50px total).  Therefore, the actual space of the images, with margin and additional width, would occupy would be 950px (750px + 150px + 50px).

So, with the content area that we determined above of 900px, these images would take up too much space to fit in one row, so the fifth image would end up getting pushed down into a second row.

Third – Get it to Work!

How do we get this to work then?  There are a couple ways.

One option is you could change your blog width/content margins to fit all the images.  But, this could goof up all your other posts/pages that contain images, so it’s probably not the best option.

A better choice is probably to use custom CSS to change the left and right margins of your images so that they end up getting spaced correctly and centered.

So using our example, paste the following code under the the Custom CSS area of “ProPhoto” “Customize” > “Advanced” > “Custom Code”:

body.page-id-xxx .alignleft {margin-right: 5px !important; margin-left: 15px !important;}

(The ‘xxx’ is the actual page id number assigned to your new “clickable images” page.  You can determine your page id in the page editor screen.  We use this page id in our CSS so it only gets applied to this one page, not all your pages.)

Now you can obviously change the left/right margin “px” values in the code to whatever you want.  For our example, they were calculated this way.  Because each 150px image has 10px of width added by WordPress to the right side (which we can’t change), we instead change the default additional 30px of margin that is added to the right hand side to just 5px.  So now we have 15px of margin on the right side in total (10px + 5px).  And to make them look centered, then we add 15px of margin on the left side.

So, within our 900px “content area”, we now have 5 thumbnail images at 150px wide (750px total) with 15px of margin on both sides of each image (30px of margin for each image, 150px in margin total).  Therefore, the total width of our images and margin is exactly 900px (750px + 150px), which will fit our content area just perfectly!

Now this looks good!!

As you can see, you can do this! But it’s probably going to make you hate your Middle School math days even more than you already do…..   So just take your time, get out pen, paper and calculator if you have to and do some trial and error until you get it right.

You’ll get there!

As stated before, getting your clickable images where you want them on your page can be kind of a tricky process.  So make sure to keep the following things in mind when you’re trying to create a page like this.

First – Determine Content Area

First, you need to be aware of the size of the “content area” you’re working with.  To determine this, take your blog width, less the content margins you have set under “Appearance” > “P3 Customize” > “Background”.   As an example, if your blog width is set to 960px with content margins of 30px, your actual “content area” is 900px.

Don’t worry, you can do this math!      960px – 30px right – 30px left = 900px total

Second – Determine Image Width/Margins

Second, you need to know your image width and built-in image margins.  Even though thumbnail images are generally 150px in width, they actually end up “wider” when formatted as you’ve done.

Because you want your images aligned properly in a row, it’s important that you align your images “left” so that they line up next to each other.  However, because the images are aligned left, each image has built in right-side margin of 30px to allow for adequate spacing between images.

In addition, because you’re adding “captions” to each image to label them, WordPress automatically adds an additional 10px to the right side of the thumbnail image width in order to create additional spacing for the caption area.

So thumbnail images, aligned left, will actually take up 190px in width, not just 150px.

Continuing with our example, if you’re wanting to upload 5 thumbnail images at 150px wide apiece (750px total), there is 30px of right margin for each image (150px total), plus 10px of width added to each image to accommodate for the caption (50px total).  Therefore, the actual space of the images, with margin and additional width, would occupy would be 950px (750px + 150px + 50px).

So, with the content area that we determined above of 900px, these images would take up too much space to fit in one row, so the fifth image would end up getting pushed down into a second row.

Third – Get it to Work!

How do we get this to work then?  There are a couple ways.

One option is you could change your blog width/content margins to fit all the images.  But, this could goof up all your other posts/pages that contain images, so it’s probably not the best option.

A better choice is probably to use custom CSS to change the left and right margins of your images so that they end up getting spaced correctly and centered.

So using our example, paste the following code under the the Custom CSS area of “Appearance” > “P3 Customize” > “Settings” > “Advanced”:

body.page-id-xxx .alignleft {margin-right: 5px !important; margin-left: 15px !important;}

(The ‘xxx’ is the actual page id number assigned to your new “clickable images” page.  You can determine your page id in the page editor screen.  We use this page id in our CSS so it only gets applied to this one page, not all your pages.)

Now you can obviously change the left/right margin “px” values in the code to whatever you want.  For our example, they were calculated this way.  Because each 150px image has 10px of width added by WordPress to the right side (which we can’t change), we instead change the default additional 30px of margin that is added to the right hand side to just 5px.  So now we have 15px of margin on the right side in total (10px + 5px).  And to make them look centered, then we add 15px of margin on the left side.

So, within our 900px “content area”, we now have 5 thumbnail images at 150px wide (750px total) with 15px of margin on both sides of each image (30px of margin for each image, 150px in margin total).  Therefore, the total width of our images and margin is exactly 900px (750px + 150px), which will fit our content area just perfectly!

Now this looks good!!

As you can see, you can do this! But it’s probably going to make you hate your Middle School math days even more than you already do…..   So just take your time, get out pen, paper and calculator if you have to and do some trial and error until you get it right.

You’ll get there!

If you’ve searched the tutorials and can't find what you need, please contact us. We’re here to help. Contact Us