Forums » Support

Blog CSS - Getting Started with Images as Links

    • 77 posts
    September 18, 2016 7:24 AM EDT

    Hi everyone :-)

     
    Following on from Phil's “Getting Started – Blog CSS”, we're going to take a look at a slightly more advanced topic – using pictures for links, specifically for use with chapter navigation. This doesn't work in the same way here as it did with ning, so I'm going to talk you through one way to do this.

     
    Here's an example of what we're trying to achieve:

    Blog Example

    First things first, make sure you have the links for your images available. I keep all images for my story in a private album, and then for ease of reference I have a text document with all of the url's saved into it, then I can easily update or add pictures in a blog or discussion. Once you're ready, it's time to fire up the source code editor of your blog:

    Blog Editing

    As you can see the site generates a lot of HTML code and styling properties just to make your blog look the way it does:

    Blog Source Code

     

    To add in images as navigation and also to place a link to the ToC, we'll be adding the following HTML and CSS, I'm going to break this down step by step and using some colour coding to make it clearer:

    Bluefish colour coded

    Firstly, if you haven't already, add a paragraph break to the end of your story (if you entered a few blank lines at the end in the normal editor, then you're all done), it's probably easier to go back into the standard editor to do this.

    So, at the end of the code. We need to create a paragraph to contain our links and images, I found this was the best way to make sure everything lines up nicely:

    Starting the paragraph

    The style property in the p tag will ensure that any text will be centred, and the span tag allows us to style a section of an element, I have kept my initial styling just in case I decide to go back to text links. After adding the opening we can now add our link. To do this we use an a tag, this is an anchor and can be used to link to other pages, and also link to another section of the current page (more on that another time if it's needed). So we open our a tag and within it add our url and target= “_self”; so it opens in the current browser window.

    Adding the link

     

    Next we add our image, using the img tag:

    Adding the first image


    To the img tag I have added a style property “float:left”, this takes the image and literally floats it as far left as it can without interfering with anything else.

    Then we add the image url using the src (source) property, I also use the alt property as this can be displayed by the browser if the image fails to load, and finally the width and height, when using numbers only, the browser assumes you mean px (pixels), so it will be handy to know these in advance. Once our image has been added, we need to close the a tag for the link. Images are elements in their own right and do not need to be closed.

     
    Okay, so that's the back button/image added, now for the ToC, it's best to work in the order the items will be displayed, just so it's simpler.

     
    The ToC is a little simpler and looks like most of the other links you may have added to your blogs, with one difference, it sits inside our p tag along with our images. Add your a tag with the url to your ToC and target, then add in Table of Contents and close the a tag:

    ToC Code

    We can now add our forward button/image, still in the same p tag, this is almost the same as our first section for the back button, but instead of “float:left;” we're going to use “float:right;”. Once you've added your closing tags, you can now close the span tag with /span, and then the p tag with /p . In this example I haven't got a link to add, but when I do need to add the link, I'll do it in the same way as the back button shown above, just by using the a tags for the link around it:

    Forward image link code

    I had a few problems when I made the images slightly taller and added the text into the image, and I remembered there was something else we should do when using the “float” (rusty HTML and CSS brain), and that is that we should clear them afterwards.

    Clear the float

    I have also tested this in regular group posts (discussions), and it appears to work fine.

    And finally, if you feel inclined to use an image for the link to your ToC, or maybe even a link to all of your blogs, here is the code to adding a single picture link:

    Single image link code

    Again, we keep everything in a p tag which has the style property “text-align: center;” , and then a for any additional text used in the same sections. We then add our a tag as previously, updating the url (I used the link for my blog summary), and then our picture using the img tag, and then closing all the tags.

    Unfortunately I am unable to post the code as text, Social Engine is a little too clever for it's own good and converts it into code it can use. Please let me know if any of the images need adjusting for you to be able to read the codes correctly.

     
    Thanks for reading, I hope you find this useful, and if you have anything to add, have comments or questions, please leave them below.


    This post was edited by Meli at September 18, 2016 10:07 AM EDT
    • 649 posts
    September 18, 2016 8:10 AM EDT

    Hmm. I don´t know, seems overly complicated to me. I mean...isn´t this little bit easier? 

    I don´t really have time to write a guide, but I seriously recommend everyone to use Online HTML Editor in combination with Vault one. Posting discussions and everything is much easier when you combine these two editors together. Especially for editing, because SE´s discussion editing lacks things like add Link and such. 

    • 77 posts
    September 18, 2016 8:17 AM EDT

    Hi Karver,

    Floating is one way to do it, not the only one, it is one way I know that "should" work on most browsers as it's straight CSS, and no tables are used (which used to be the favoured way of doing complex web layouts. Unfortunately due to the site not showing full size images at the moment, I can't read your code on the left side of your screen shot, so I can't compare the two methods, I'm an old fashioned text coder though :-)

    • 649 posts
    September 18, 2016 8:21 AM EDT

    Crappy pictures...

    The point is, I haven´t done a single thing with the code, I just put it together in the editor to the left and when I copy the source code into Vault it works perfectly fine. My knowledge of CSS is literally zero, mate. I´m just trying to say it is possible to do the same thing without actually messing around with CSS. 

    • 321 posts
    September 18, 2016 8:23 AM EDT

    Funny story actually....

    I was just trying to add a link to one of my images for my story, and all I did was highlight the selected picture and pressed the link button and typed in the destination. I didn't even touched the HTML part. :P

    • 321 posts
    September 18, 2016 8:24 AM EDT

    Damn it accidentally double-posted...

    • 77 posts
    September 18, 2016 8:24 AM EDT

    lol re crappy pictures, I know, looking forward to the update :-)

    Fair enough, everyone can use their preferred method as they find it, just throwing it out there as an option is all.

    • 77 posts
    September 18, 2016 8:26 AM EDT

    Axius Revan said:

    Funny story actually....

    I was just trying to add a link to one of my images for my story, and all I did was highlight the selected picture and pressed the link button and typed in the destination. I didn't even touched the HTML part. :P

    I tried that earlier when testing the single image link, and it replaced the image with a text link :-/ Maybe it likes you better :-)

    • 649 posts
    September 18, 2016 8:27 AM EDT

    Fair enough, everyone can use their preferred method as they find it, just throwing it out there as an option is all.

    Crap. Sorry, mate, I didn´t want it to sound like I don´t appreciate what you´re doing here. I actually do, I just wanted to point out other option. Sorry. 

    • 321 posts
    September 18, 2016 8:28 AM EDT

    Meli said:

    Axius Revan said:

    Funny story actually....

    I was just trying to add a link to one of my images for my story, and all I did was highlight the selected picture and pressed the link button and typed in the destination. I didn't even touched the HTML part. :P

    I tried that earlier when testing the single image link, and it replaced the image with a text link :-/ Maybe it likes you better :-)

    Lucky me... :D I only touched the Url bar, not the "Text to Display" bar.

    • 77 posts
    September 18, 2016 8:33 AM EDT

    Karver said:

    Fair enough, everyone can use their preferred method as they find it, just throwing it out there as an option is all.

    Crap. Sorry, mate, I didn´t want it to sound like I don´t appreciate what you´re doing here. I actually do, I just wanted to point out other option. Sorry. 

     

    No issue whatsoever Karver :-) No offence taken, darn I tried writing that last response really carefully so you wouldn't think I was upset :-( My bad, must try harder (I'll make it up to you soon, by posting more Orsimer poetry). Options are good, there's generally more than one way to do something ;-)

    • 649 posts
    September 18, 2016 8:38 AM EDT

    Meli said:

    Karver said:

    Fair enough, everyone can use their preferred method as they find it, just throwing it out there as an option is all.

    Crap. Sorry, mate, I didn´t want it to sound like I don´t appreciate what you´re doing here. I actually do, I just wanted to point out other option. Sorry. 

     

    No issue whatsoever Karver :-) No offence taken, darn I tried writing that last response really carefully so you wouldn't think I was upset :-( My bad, must try harder (I'll make it up to you soon, by posting more Orsimer poetry). Options are good, there's generally more than one way to do something ;-)

    Yeah. I think that for you, as someone who plays with CSS, the HTMl Editor I linked will be perfect. You have both normal and HTML editors next to each other, so you can see what are you doing. Also, for anyone else, the Online Editor is slightly better but very similar to Social Engine´s one, so I highly recommend it. 

    Now I will slide back into the shadows................................. :D

    • 203 posts
    September 18, 2016 9:44 AM EDT

    I don't know guys, so far selecting the pic and then using the link button on the toolbar works fine for me. You're all making your lifes a lot more difficult than it needs to be I'm afraid

    • 77 posts
    September 18, 2016 10:10 AM EDT

    Teineeva said:

    I don't know guys, so far selecting the pic and then using the link button on the toolbar works fine for me. You're all making your lifes a lot more difficult than it needs to be I'm afraid

    Strangely that doesn't work for me, this could be linked to browsers, who knows. Karver's suggestion will work well for those who want it really simple if they have a similar issue, mine is for those who are a little more advanced and still have the problem.

    I've just made a couple of updates to the screen shots and wording as I noticed something I could simplify and also some formatting issues with the text.

    • 557 posts
    September 18, 2016 10:46 AM EDT

    Has nobody seen the "Photo Upload" button yet? :P

    • 649 posts
    September 18, 2016 10:48 AM EDT
    We did. But it doesn't work when you want to edit discussion. You can upload URL pic, but not from your comp.
    • 312 posts
    September 18, 2016 1:47 PM EDT

    Karver said: We did. But it doesn't work when you want to edit discussion. You can upload URL pic, but not from your comp.

    This. You'll have to either upload to a private album on Tamriel Vault or go to something like Photobucket.

    • 649 posts
    September 18, 2016 1:51 PM EDT

    WuYiXiang said:

    Karver said: We did. But it doesn't work when you want to edit discussion. You can upload URL pic, but not from your comp.

    This. You'll have to either upload to a private album on Tamriel Vault or go to something like Photobucket.

    Not true. Here´s what I do.

    If I want to edit already posted discussion, I open new discussion, upload pictures there and then I just copy the pictures from new (not posted yet) discussion into one I want to edit. Or I use the HTML Editor along with new discussion. It certainly is more work to do, but it works and honestly, I don´t see it as that big problem anymore. You always have to found some way around the system, right?

    • 557 posts
    September 18, 2016 1:56 PM EDT

    We'll work on this - I'm sure we can get someone to add this functionality in for us. 

    • 312 posts
    September 18, 2016 2:00 PM EDT

    Karver said:

    Not true. Here´s what I do.

    If I want to edit already posted discussion, I open new discussion, upload pictures there and then I just copy the pictures from new (not posted yet) discussion into one I want to edit. Or I use the HTML Editor along with new discussion. It certainly is more work to do, but it works and honestly, I don´t see it as that big problem anymore. You always have to found some way around the system, right?

    As far as I can tell, uploading images into discussions ends up creating a new album for you anyway.

    • 649 posts
    September 18, 2016 2:05 PM EDT

    WuYiXiang said:

    Karver said:

    Not true. Here´s what I do.

    If I want to edit already posted discussion, I open new discussion, upload pictures there and then I just copy the pictures from new (not posted yet) discussion into one I want to edit. Or I use the HTML Editor along with new discussion. It certainly is more work to do, but it works and honestly, I don´t see it as that big problem anymore. You always have to found some way around the system, right?

    As far as I can tell, uploading images into discussions ends up creating a new album for you anyway.

    Exactly. Means you don´t have to upload them separately. 

    • 77 posts
    September 18, 2016 2:11 PM EDT

    @Todd - Originally this post was to explain how to use images for navigation between blog posts (use as a hyperlink rather than text), I offered to take a look at how to do this for another member.

    Having seen how the upload feature works, I've always pre-upload images as I re-use images a lot between chapters, so the image link feature works well for this.

    • 312 posts
    September 18, 2016 3:22 PM EDT

    Karver said:

    Exactly. Means you don´t have to upload them separately. 

    I'm a little obsessive with my organization, so I like to upload them separately anyway.

    • 295 posts
    September 18, 2016 4:14 PM EDT

    Thanks for the leg work on this Meli and Karver. I will consider this when I am ready to be more advanced. 

    • 64 posts
    September 24, 2016 1:16 PM EDT

    Is it possible to make the white page in the middle of my profile transparent? And, more importantly, will it be possible to showcase my contents on my page?