Clickable images on homepage

ko04

Hey everyone,
I am currently working on a new design for my website it is not published yet though. I am wondering if there is a way to add three images all clickable that will link to my certain galleries so one for my fine art photography, one for my wedding and portrait photography and lastly one for my blog. Currently I am using the "folder, pages and gallery" block and would love to be able make a image for the blog link and it go to my blog on blogger. I have a feeling if I continued to use the block that I could make this happen that but I would have to use my a feed of the blog. I'd rather not do that unless there was a way customize the feed page I wouldn't mind so much but currently I played with this and it doesn't look all that great. What I'd like to happen is make it go to my actual blog I have on blogger. So to simply this I want to have three images all act like links that go to galleries on my website. Here is a screen shot of what my idea looks like so far http://k-ophotography.smugmug.com/photos/i-HX4MLxc/0/L/i-HX4MLxc-L.jpg. I would love some help on this since I really don't have to much experience with code and really im kind of a copy and paste kind of guy. Im able to figure some stuff out on my own but this is kind of above me. Thanks in advance!

Hikin' Mike

I do something similar on my Home page and my 'Portfolio', 'Landscape and Nature', and 'Wildlife' pages. All of those are just custom pages with an HTML/CSS box.

If you don't mind doing something like that, I can put together something like that, just with 3 images like you showed on your screen capture.

ko04

Hikin' Mike wrote: »

I do something similar on my Home page and my 'Portfolio', 'Landscape and Nature', and 'Wildlife' pages. All of those are just custom pages with an HTML/CSS box.

If you don't mind doing something like that, I can put together something like that, just with 3 images like you showed on your screen capture.

Mike yes thats exactly what I am looking to do thank you for offering to put something together for me. I do like to learn how to do these things because thats just the type of person I am. So I'll tell you what I am going to study your site and inspect it and if I can't figure out how you did it I will PM you how's that sound. Thanks for your offer and the response.

Hikin' Mike

Looking at this: http://www.imagesinthebackcountry.com/articles/hdr-photography-using-layer-masks-and-hand-blending-techniques-in-photoshop/ the three images are actually what you want. I used inline syles to do this, but you can use something like this:

HTML
[html]
<div class="home-image">
<a href="url-of-the-gallery"><img src="url-of-the-pohoto" alt="your-alt-tag-here" /></a>
</div>
[/html]

CSS:

.home-image {
    float: left;
    margin: 0 0.5% 0 1%;
    text-align: center;
    width: 31.5%;
    }

Feel free to PM me. I'll be in bed shortly, and I have an appointment in the morning. I should be home by noon.

Hikin' Mike

To add...

I would just use one HTML/CSS box....

[html]
<div class="home-image">
<a href="url-of-the-gallery"><img src="url-of-the-pohoto" alt="your-alt-tag-here" /></a>
</div>
<div class="home-image">
<a href="url-of-the-gallery"><img src="url-of-the-pohoto" alt="your-alt-tag-here" /></a>
</div>
<div class="home-image">
<a href="url-of-the-gallery"><img src="url-of-the-pohoto" alt="your-alt-tag-here" /></a>
</div>
[/html]

TShuibinPhoto

I hope it is ok to piggy back on this thread? I am working on customizing my new site but have not published it yet.

I am trying to do something very similar on my homepage with photos that point to custom pages that I have created ie., one photo that points to the portraits page, one to weddings page, one to events page etc.

(I tried to create this using the various content blocks but can get the photos to link to my pages. Is there is a way to do this that I am missing?)

I entered the code above and the alt tags show up and the links work but the photos are not showing. I copied and pasted the photo urls from the gallery settings so there are no typos but no photos show up at all.

Here is my code:

ko04

TShuibinPhoto wrote: »

I hope it is ok to piggy back on this thread? I am working on customizing my new site but have not published it yet.

I am trying to do something very similar on my homepage with photos that point to custom pages that I have created ie., one photo that points to the portraits page, one to weddings page, one to events page etc.

(I tried to create this using the various content blocks but can get the photos to link to my pages. Is there is a way to do this that I am missing?)

I entered the code above and the alt tags show up and the links work but the photos are not showing. I copied and pasted the photo urls from the gallery settings so there are no typos but no photos show up at all.

Here is my code:

<div class="home-image">
<a href="http://www.tracyshubin.com/Creative-Portraiture-1"><img src="http://www.tracyshubin.com/Portraiture/Portraiture&quot; alt="Portraiture" /></a>
</div>
<div class="home-image">
<a href="http://www.tracyshubin.com/Weddings"><img src="http://www.tracyshubin.com/Weddings-1/Weddings&quot; alt="Weddings" /></a>
</div>
<div class="home-image">
<a href="http://www.tracyshubin.com/Events-1"><img src="http://www.tracyshubin.com/Events-2/Events&quot; alt="Events" /></a>
</div><div class="home-image">
<a href="http://www.tracyshubin.com/Business-solutions"><img src="http://www.tracyshubin.com/Business/Business&quot; alt="Business" /></a></div>

we are all here to learn dont worry about it, im sure ive done the same thing in a post. as far as your question I don't know a lot about code but I'm pretty sure you have to use the "Get Links" feature of smugmug to make this work. If you go to share>get links>then pick the size you want to use and copy it then put it in the img scr spot that should work.

Hikin' Mike wrote: »

To add...

I would just use one HTML/CSS box....

[html]
<div class="home-image">
<a href="url-of-the-gallery"><img src="url-of-the-pohoto" alt="your-alt-tag-here" /></a>
</div>
<div class="home-image">
<a href="url-of-the-gallery"><img src="url-of-the-pohoto" alt="your-alt-tag-here" /></a>
</div>
<div class="home-image">
<a href="url-of-the-gallery"><img src="url-of-the-pohoto" alt="your-alt-tag-here" /></a>
</div>
[/html]

thanks for the code Mike i will play with this in the next few days and let you know if i have any questions.

Hikin' Mike

ko04 wrote: »

we are all here to learn dont worry about it, im sure ive done the same thing in a post. as far as your question I don't know a lot about code but I'm pretty sure you have to use the "Get Links" feature of smugmug to make this work. If you go to share>get links>then pick the size you want to use and copy it then put it in the img scr spot that should work.




thanks for the code Mike i will play with this in the next few days and let you know if i have any questions.

Keith is right, you picked the wrong url on your <img> tag.


Let me know....I'm usually here... <img src="https://us.v-cdn.net/6029383/emoji/rolleyes1.gif&quot; border="0" alt="" >

TShuibinPhoto

Wow thanks! I would never have figured that out as it is not at all intuitive but It is now working. Thank you! Is there any way to have that div block centered on the page?

I have tried this on my homepage:

.sm-page-home .sm-page-widget-body {
text-align:center;
}


And I have this on the Entire Site:

.sm-page-home .sm-tiles-row-organic .sm-tiles-list {
text-align:center;
}


But nothing seems to center it.
Thank you!

Hikin' Mike

TShuibinPhoto wrote: »

Wow thanks! I would never have figured that out as it is not at all intuitive but It is now working. Thank you! Is there any way to have that div block centered on the page?

I have tried this on my homepage:

.sm-page-home .sm-page-widget-body {
text-align:center;
}


And I have this on the Entire Site:

.sm-page-home .sm-tiles-row-organic .sm-tiles-list {
text-align:center;
}


But nothing seems to center it.
Thank you!

Until you publish it, I can't help, especially if you doing something custom.

Hikin' Mike

If you don't want to publish it, I understand. Can you copy the HTML and the CSS, so I can try and replicate it on my test page.