Change post home page hyperlinks to direct to pages
-
I would like complete control of where the featured images link to on the post home page. I’d like to create individual pages and link to these instead. Can I do this with access to the CSS????
The blog I need help with is: (visible only to logged in users)
-
Hi there, no you cannot. That would require editing of the theme PHP script files and we cannot do that at WordPress.com.
Do you think this would work for you though: Create a static front page for your site and then include linked images in that static main page and you can then link the images to whatever you wish to link them to.
-
Hi, thank you for your response :-) Yes potentially but I’d love it to look his the photos are right now with the headers etc. Could I do that?
Thanks in advance -
Yes, that can be done with CSS and HTML. Images would have to be sized correctly so they all fit together in a grid.
I would probably suggest including the grey title area and title in the images. The large image overall size (including title area) would be 560px wide by 498px tall and then the smaller images would be half that at 280px x 249px (including the title area).
-
Thank you again. I’ve started testing it out here http://jessicarguest.wordpress.com/about/ but can’t figure out how to bring the small image up to the top so I can fit four of the small images in.
-
Hi, I think the best way to do this is with a table. The following code gets your images aligned, and I would suggest using very bare minimum image/image link code with no classes or sizes set in them as in the example below.
<a href="LINK_URL"><img src="IMAGE_URL" title="" alt="" /></a>And here is the table code with only placeholder text in the cells.
<table style="max-width: 100%;"> <tbody> <tr> <td style="max-width: 50%; vertical-align: top; padding: 0; border: none;" rowspan="2">large image</td> <td style="max-width: 25%; vertical-align: top; padding: 0; border: none;">TL small image</td> <td style="max-width: 25%; vertical-align: top; padding: 0; border: none;">TR small image</td> </tr> <tr> <td style="max-width: 25%; vertical-align: top; padding: 0; border: none;">BL small image</td> <td style="max-width: 25%; vertical-align: top; padding: 0; border: none;">BR small image</td> </tr> </tbody> </table> -
So I’ve used the code you gave me to align the images to sit side by side but I am still unable to get them to sit alongside each other but they still don’t move to the top?
Also I had a look at the table above but I’m a newbie to wordpress. I’m not quite sure how I’m suppose to fill in the details.
This is what I have in at the moment on page.. http://jessicarguest.wordpress.com/test/ I’ve set the placeholder images smaller for now just to see if I could get them to stack but no luck.
<img title=”alignnone wp-image-52″ alt=”DM Head Shot BW 3″ src=”http://jessicarguest.files.wordpress.com/2014/01/dm-head-shot-bw-31.jpg?w=562″ /><img title=”vertical-align:top size-full wp-image-181″ alt=”Joes-Salon-London” src=”http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg” /><img title=”vertical-align:top size-full wp-image-181″ alt=”Joes-Salon-London” src=”http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg” /><img title=”alignnone size-full wp-image-181″ alt=”Joes-Salon-London” src=”http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg” /><img title=”alignnone size-full wp-image-181″ alt=”Joes-Salon-London” src=”http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg” />
-
Hi, right I think I’ve done it. I’ve put here for you to see: http://jessicarguest.wordpress.com/test-3/
The code I used is:
<table style=”max-width:100%;”>
<tbody>
<tr>
<td style=”max-width:50%;vertical-align:top;padding:0;border:none;” rowspan=”2″><img title=”vertical-align:top size-full wp-image-52″ alt=”DM Head Shot BW 3″ src=”http://jessicarguest.files.wordpress.com/2014/01/dm-head-shot-bw-31.jpg?w=562″ /></td>
<td style=”max-width:25%;vertical-align:top;padding:0;border:none;”><img title=”vertical-align:top size-full wp-image-181″ alt=”Joes-Salon-London” src=”http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg” /></td>
<td style=”max-width:25%;vertical-align:top;padding:0;border:none;”><img title=”vertical-align:top size-full wp-image-181″ alt=”Joes-Salon-London” src=”http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg” /></td>
</tr>
<tr>
<td style=”max-width:25%;vertical-align:top;padding:0;border:none;”><img title=”vertical-align:top size-full wp-image-181″ alt=”Joes-Salon-London” src=”http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg” /></td>
<td style=”max-width:25%;vertical-align:top;padding:0;border:none;”><img title=”vertical-align:top size-full wp-image-181″ alt=”Joes-Salon-London” src=”http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg” /></td>
</tr>
</tbody>
</table>The only problem I have is that when I view on mobile it isn’t reactive like the post home page. What code can I use so that it works on mobile. At the moment it just shrinks the whole table to fit the width instead of stacking the image???
Thank you. I’m going to be fluent soon!!
-
Sorry think I am supposed to put code like this
<table style="max-width:100%;"> <tbody> <tr> <td style="max-width:50%;vertical-align:top;padding:0;border:none;" rowspan="2"><a href="http://jessicarguest.files.wordpress.com/2014/01/dm-head-shot-bw-31.jpg"><img title="vertical-align:top size-full wp-image-52" alt="DM Head Shot BW 3" src="http://jessicarguest.files.wordpress.com/2014/01/dm-head-shot-bw-31.jpg?w=562" /></a></td> <td style="max-width:25%;vertical-align:top;padding:0;border:none;"><a href="http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg"><img title="vertical-align:top size-full wp-image-181" alt="Joes-Salon-London" src="http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg" /></a></td> <td style="max-width:25%;vertical-align:top;padding:0;border:none;"><a href="http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg"><img title="vertical-align:top size-full wp-image-181" alt="Joes-Salon-London" src="http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg" /></a></td> </tr> <tr> <td style="max-width:25%;vertical-align:top;padding:0;border:none;"><a href="http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg"><img title="vertical-align:top size-full wp-image-181" alt="Joes-Salon-London" src="http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg" /></a></td> <td style="max-width:25%;vertical-align:top;padding:0;border:none;"><a href="http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg"><img title="vertical-align:top size-full wp-image-181" alt="Joes-Salon-London" src="http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg" /></a></td> </tr> </tbody> </table> -
-
-
At the moment the whole table just shrinks and I can’t find an answer to fix this online?
-
http://www.image-maps.com/pages/about/
An Image map is a graphic image designed in a way that allows different areas of the main image to be click-able by users. These click-able areas then link to different destinations that usually relate to the part of the image the user has clicked on.
This used to be free, but now it looks like you have to pay a fee for it. I’m not sure—haven’t used it in a long time. I’m not sure it’s what you are looking for either. You can see a post where I make a composite photo and then image-mapped it to other pages:
http://1tess.wordpress.com/2010/01/17/meal-ready-to-eat-mre/You can also do image mapping with PhotoShop.
-
After a bit of experimenting, the image map doesn’t resize as a regular image on a responsive theme as I expected it to. At least not on the Expound Theme. :(
-
Annoying. Thank you anyway. Hoping there is a magic bit of code I’m missing for my table…
-
I did some more experimenting, and it appears some responsive themes are more responsive than others. It works in “Responsive” theme. :) And it seems to work in FontFolio as well.
-
That’s cool! Thank you. I’ll look into it now.
If there are any other solutions with the table set up etc please direct to me. Just want it to look like the theme home :(
- The topic ‘Change post home page hyperlinks to direct to pages’ is closed to new replies.
WordPress.com Forums 
