The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Help amending a Tumblr theme, Need assistance adding an image link
choc_tpot
post Aug 5 2014, 09:19 AM
Post #1





Group: Members
Posts: 5
Joined: 5-August 14
Member No.: 21,359
Hi

I am completely new to HTML so I wonder if anyone can help.

I am using the Organ theme and I've already made a couple of successful changes through trial and error.

There is one thing I don't seem to be able to fix...

On my site apemeetsgirl.com you will notice that the image expands when you hover over it. To open that post you have to click the arrow at the top. However, I'd like to make the image itself also link to the post.

The theme developer as advised me to "wrap another <a> (like around the arrow) also around the images, then it should link to the post detail" but I'm not sure how to do this.

Is anyone able to help?

Many thanks

Kev
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 5 2014, 09:28 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
See http://htmlhelp.com/faq/html/images.html#linked-image .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
choc_tpot
post Aug 5 2014, 09:37 AM
Post #3





Group: Members
Posts: 5
Joined: 5-August 14
Member No.: 21,359
Thanks Pandy. Half the problem is that I don't know where to find the images in the code, or the post itself.

Sorry, as I said, completely new to HTML (typed my first line of code an hour ago, and I got that wrong!)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 5 2014, 12:56 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Well, neither do I since I've never used Tumblr. It's easy enough with normal HTML, but I don't know what you have access to and in what changes you can make to the template.

How do you get the image in there to start with? Can you show the actual code for that and the surrounding stuff?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
choc_tpot
post Aug 5 2014, 01:28 PM
Post #5





Group: Members
Posts: 5
Joined: 5-August 14
Member No.: 21,359
Thanks Pandy. The image is shown when I just make a blog post through Tumblr. The HTML effectively just amends the way the blog is displayed. Unfortunately I don't know where in the code the image is either!

The whole code is a couple of hundred lines long.

Too much to post here?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 5 2014, 02:01 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
No, not too long. But it's enough with the lines that inserts the expanding images. You must have defined what images to show there somehow and somewhere.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
choc_tpot
post Aug 5 2014, 03:45 PM
Post #7





Group: Members
Posts: 5
Joined: 5-August 14
Member No.: 21,359
No, I didn't write that code, it came with the template I downloaded, and then Tumblr automatically does the rest
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
choc_tpot
post Aug 5 2014, 03:50 PM
Post #8





Group: Members
Posts: 5
Joined: 5-August 14
Member No.: 21,359
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<!--

Organ 2.7 - A tumblr theme by simurai.com
More information: http://organ-theme.tumblr.com

-->

<head>

<!-- DEFAULT VARIABLES -->
<meta name="color:Background" content="#000" />
<meta name="image:Background"

content="http://static.tumblr.com/2xhkg2s/CmKkz2h6y/pattern_130.gif" />
<meta name="color:Text" content="#ffffff" />
<meta name="color:Link" content="#929292" />
<meta name="if:MultiColor TextBars" content="1" />
<meta name="if:Show Notes" content="0" />
<meta name="if:Show Info" content="1" />
<meta name="if:Link to Archive" content="1" />
<meta name="if:Link to Random" content="1" />
<meta name="if:Show Theme Credits" content="1" />
<meta name="if:Install Streampad" content="0" />


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{Title}{block:PostSummary} - {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />

<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/2xhkg2s/Hcfl1k0hl/reset-min.css">
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/2xhkg2s/uMRm4mqoj/style.css">

<style type="text/css">
html { background: {color:Background} url('{image:Background}') top left fixed repeat; }
body, .index .count { color: {color:Text}; }
a { color: {color:Link}; }
#footer { background-color: {color:Background}; }
{block:IfInstallStreampad}#footer { bottom: 30px; border-bottom: 1px solid rgba(254,255,255,0.33); }

{/block:IfInstallStreampad}
</style>
<style type="text/css">{CustomCSS}</style>

{block:IndexPage}<script type="text/javascript"

src="http://static.tumblr.com/2xhkg2s/H1Gl1v8mx/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/2xhkg2s/ef6lqx1b8/magic.js"></script>

{/block:IndexPage}



</head>

<body>


<div id="wrapper">

<!-- nav -->
{block:PermalinkPagination}
{block:NextPost} <div class="nav left"><a href="{NextPost}">&larr;</a></div>

{/block:NextPost}
<div class="nav mid"><a

href="/">back</a></div>
{block:PreviousPost} <div class="nav right"><a href="{PreviousPost}">&rarr;</a></div>

{/block:PreviousPost}
{/block:PermalinkPagination}

{block:Pagination}{block:PreviousPage}
<div class="nav left"><a href="{PreviousPage}">&larr;</a></div>
{/block:PreviousPage}{/block:Pagination}



<!-- posts -->
{block:Posts}
<div class="post
{block:IndexPage} index {block:IfMultiColorTextBars}autoColor

{/block:IfMultiColorTextBars}
{block:Text}txt{/block:Text} {block:Link}txt{/block:Link}

{block:Quote}txt{/block:Quote} {block:Chat}txt{/block:Chat}
{block:Photo}bar{/block:Photo} {block:Photoset}bar{/block:Photoset}

{block:Video}bar{/block:Video} {block:Audio}bar{/block:Audio}
{/block:IndexPage}
{block:PermalinkPage} perma{/block:PermalinkPage}
">

{block:IndexPage}<a class="permalink" href="{Permalink}">open</a>

{/block:IndexPage}


{block:Text} <div class="text">
{block:IndexPage}<span class="bodytxt">{block:Title}{Title}{/block:Title} {PlaintextBody}

</span>{/block:IndexPage}
{block:Title}<h2>{Title}</h2>{/block:Title}
<div class="copy">{Body}</div>
</div>{/block:Text}

{block:Photo} <div class="photo">
{block:IndexPage}<img src="{PhotoURL-400}" alt="{PhotoAlt}" />


{/block:IndexPage}

{block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-500}"

alt="{PhotoAlt}" />{LinkCloseTag}
{block:Caption}<div class="copy">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
</div>{/block:Photo}

{block:Photoset} <div class="photoset">
<!--{block:IndexPage}<div class="overlay"></div><div

class="thumb">{Photoset-400}</div>{/block:IndexPage}-->
{block:IndexPage}<div class="overlay"></div><div class="media">

{Photoset-400}</div>{/block:IndexPage}

{block:PermalinkPage}<div class="media">{Photoset-500}</div>
{block:Caption}<div class="copy">{Caption}</div>{/block:Caption}

{/block:PermalinkPage}
</div>{/block:Photoset}

{block:Link} <div class="link">
{block:IndexPage}<a href="{URL}" {Target}>{Name} &rarr;</a>

{/block:IndexPage}

{block:PermalinkPage}<a href="{URL}" {Target}><h2>{Name}

&rarr;</h2></a>
{block:Description}<div class="copy">{Description}</div>{/block:Description}

{/block:PermalinkPage}
</div>{/block:Link}

{block:Quote} <div class="quote">
{block:IndexPage}&ldquo;{PlaintextQuote}&rdquo;{/block:IndexPage}

{block:PermalinkPage}<h2>&ldquo;{Quote}&rdquo;</h2>
{block:Source}<div class="copy">{Source}</div>{/block:Source}

{/block:PermalinkPage}
</div>{/block:Quote}

{block:Chat} <div class="chat">
{block:IndexPage}{block:Title}{Title}{/block:Title}
{block:Lines}{block:Label} {Label}{/block:Label} {Line}

{/block:Lines}
{/block:IndexPage}

{block:PermalinkPage}{block:Title}<h2>{Title}</h2>{/block:Title}
<ul class="copy">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}

{Line}
</li>
{/block:Lines}
</ul>{/block:PermalinkPage}
</div>{/block:Chat}

{block:Video} <div class="video">
{block:IndexPage}<div class="overlay"></div><div class="thumb">

{Video-250}</div>{/block:IndexPage}

{block:PermalinkPage}<div class="media">{Video-500}</div>
{block:Caption}<div class="copy">{Caption}</div>{/block:Caption}

{/block:PermalinkPage}
</div>{/block:Video}

{block:Audio} <div class="audio">
{block:IndexPage}<div class="overlay"></div>{block:AlbumArt}<img

src="{AlbumArtURL}" alt="{TrackName}" width="240" height="240" />{/block:AlbumArt}{/block:IndexPage}

{block:PermalinkPage}<div class="player">
{block:AlbumArt}<img src="{AlbumArtURL}" alt="{TrackName}"

/>{/block:AlbumArt}
{AudioPlayerGrey}
</div>
{block:Caption}<div class="copy">{Caption}</div>{/block:Caption}

{/block:PermalinkPage}
</div>{/block:Audio}


{block:IfShowNotes}{block:IndexPage}{block:NoteCount}
<div class="count"><span class="heart">&hearts;</span> <span class="nr">

{NoteCount}</span></div>
{/block:NoteCount}{/block:IndexPage}{/block:IfShowNotes}

{block:PermalinkPage}
<ul class="meta">
{block:Date}<li>{TimeAgo}</li>{/block:Date}
{block:IfShowNotes}{block:NoteCount}<li><span

class="heart">&hearts;</span>{NoteCount}</li>{/block:NoteCount}{/block:IfShowNotes}
{block:Audio}<li>{PlayCountWithLabel}</li>{/block:Audio}
{block:HasTags}<li class="tags">{block:Tags}<a href="{TagURL}">{Tag}</a>

{/block:Tags}</li>{/block:HasTags}
{block:HighRes}<li><a href="{PhotoURL-HighRes}">&dArr; {lang:High-Res}

</a></li>{/block:HighRes}
</ul>
{/block:PermalinkPage}

{block:IfShowNotes}{block:PostNotes}{PostNotes}{/block:PostNotes}{/block:IfShowNotes}

</div><!--/post-->
{/block:Posts}


<!-- nav -->
{block:Pagination}{block:NextPage}
<div class="nav right"><a href="{NextPage}">&rarr;</a></div>
{/block:NextPage}{/block:Pagination}



</div><!--/wrapper-->


<!-- footer -->
<div id="footer">

<div id="title"><a href="/"><img

src="https://farm6.staticflickr.com/5567/14775714394_253ef65ece_o.jpg">


<p id="metanav">
{block:HasPages}{block:Pages} <a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
{block:IfLinktoArchive} <a href="/archive">{lang:Archive}</a>

{/block:IfLinktoArchive}
{block:IfLinktoRandom} <a href="/random">{lang:Random}</a>{/block:IfLinktoRandom}
{block:SubmissionsEnabled} <a href="/submit">{SubmitLabel}</a>

{/block:SubmissionsEnabled}
{block:AskEnabled} <a href="/ask">{AskLabel}</a>{/block:AskEnabled}
</p>

{block:IfShowThemeCredits}
<p id="copyright"><a href="http://organ-theme.tumblr.com/" target="_blank">Organ Theme</a> by <a

href="http://simurai.com" target="_blank">simurai</a></p>
{/block:IfShowThemeCredits}

</div><!--/footer-->



{block:IfInstallStreampad}<!-- Streampad --><script type="text/javascript"

src="http://o.aolcdn.com/art/merge?f=/_media/sp/sp-player.js&f=/_media/sp/sp-player-

tumblr.js&expsec=86400&ver=11&bgcolor=#000000&clicktext=Play&clickimg=true&progressfrontcolor=aaaaaa&progressbackco

lor=ffffff&drawersize=215&btncolor=white-gray"></script>{/block:IfInstallStreampad}


</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Web Site Functionality · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th April 2024 - 06:47 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC