The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Tumblr : Captions not working when multiple photos.
ohelle
post Sep 9 2013, 05:05 PM
Post #1





Group: Members
Posts: 1
Joined: 9-September 13
Member No.: 19,700



Hi there,

As you can see, I have manipulated a theme to create a portfolio website here www.ellekorhaliller.co.uk

I am finally getting some of the functions to work such as showing a caption (title) of a post on top of the image on the main page.

However, only the photo- posts that contain ONE single image seem to allow the caption to show on my index page.
As soon as I add another image to the post, the caption disappears.. as you can see on most of the rest of my photo posts.

I would like the captions to show on everyone of my posts but I need to post multiple images in each post therefore I need to find out what is blocking the caption when I add more images.

I think it's probably this section that is causing the problem, but I'm not sure:

{block:Photo}
<div id="caption">{block:Caption}{Caption}{/block:Caption}</div>
{block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
<img src="{block:IndexPage}{PhotoURL-500}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}

{/block:PermalinkPage}" alt="{PhotoAlt}"/>
{block:IndexPage}</a>{/block:IndexPage}
{block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}
{/block:Photo}

{block:Photoset}
{block:IndexPage}
<div class="photos">
{block:Photos}
<img alt="" src="{PhotoURL-500}">
{/block:Photos}
</div>
{/block:IndexPage}

{block:PermalinkPage}
{Photoset-500}
{/block:PermalinkPage}
{/block:Photoset}


Please see below for all of my code.

Many thanks,

Elle.

CODE
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Quicksand:300,400,700:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>
  
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}



<!--
Passive Aggressive 3.0
Created by Aiurare
-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/javascript"></script>

<script type="text/javascript" src="http://static.tumblr.com/twte3d7/BH7lio0yf/jquery.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".postnotes").hide();
//toggle the componenet with class msg_body
jQuery(".viewnotes").click(function()
{
jQuery(this).next(".postnotes").slideToggle(700);
});});
</script>


<!-- DEFAULT COLORS -->
<meta name="color:Text" content="#000000"/>
<meta name="color:Links" content="#8D8D8D"/>
<meta name="color:Accent" content="#E9E9E9"/>
<meta name="if:Endless Scroll" content="1"/>
<meta name="if:Hide Footer" content="0"/>

<link rel="shortcut icon" href="{Favicon}">
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}

<style type="text/css">


body{
text-align:justify;
font-family: 'Quicksand', sans-serif;
font-size: 13px;
color:{color:text};
background-color:#fff;
}
::-webkit-scrollbar-thumb:vertical {
background-color:{color:Links};
height:100px;
}
::-webkit-scrollbar-thumb:horizontal {
background-color:{color:Links};
height:10px !important;
}
::-webkit-scrollbar {
height:10px;
width:5px;
background-color:#fff;
}
.tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}

a{
text-decoration:none;
color:{color:Text};
}
{block:PermalinkPage}
a:hover{
    
    text-decoration:none;
    color:#ffffff;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;}
color:{color:Text};
}
{/block:PermalinkPage}

img {
border:none;
margin:0px;
padding:0px;
}

a img {
-webkit-transition: opacity 0.3s linear;
border-width:0;
outline: none !important;
}

px solid #fdfcfc;
    }
    
    #right{
    width:780px;
    float:left;
    }
    


#entry{
{block:IndexPage}
top:100px;
width:360px;
-webkit-transition: opacity 0.3s linear;
display: inline-block;
overflow:hidden;

padding-left: 15px;
margin:75px 20px 15px 0px;
max-height:215px;
{/block:IndexPage}
{block:PermalinkPage}
width:770px;
padding-top:100px;
{/block:PermalinkPage}
}
#entry img{
{block:IndexPage}
text-align:center;
display: block;
margin:auto;
max-width:360px;
max-height:215px;
{/block:IndexPage}
{block:PermalinkPage}
width:770px;
{/block:PermalinkPage}
}
.title, .h2{
font-weight:bold;
font-size:16px;
line-height:20px;
text-align:left;
}
.quote{
margin-bottom:3px;
font-size:11px;
font-weight:bold;
}
.quoteicon {
padding-top:3px;
width:20px;
float:left;
}
{block:IndexPage}
.audio {
width:240px; height:240px;
}
.art{
width:240px !important;
height:240px !important;
background:#000;
}
.player {
width:240px;
height:240px;
position:relative;
}
.player img {
width:240px; height:240px;
}
.audioplayercircle {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
position: absolute;
z-index: 3;
background: white;
top: 75px; left: 90px;
}
.audioplayer {
width: 28px;
height: 30px;
overflow: hidden;
margin: 15px 15px 13px 15px;
}
{/block:IndexPage}
{block:PermalinkPage}
.audio{
position:relative;
overflow:hidden;
color:#222!important;
}

.art{
float:left;
width:215px !important;
height:215px !important;
margin-right:20px;
background:#000;
}
.audio img{ width:215px!important; height:100px!important;}
.audioplayer{
width: 28px;
height: 30px;
overflow: hidden;
margin: 15px;
}
.audioplayercircle {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
position: absolute;
left:22px;
top:22px;
z-index: 3;
background: white;
}
{/block:PermalinkPage}
div.video embed,
div.post div.video object {
{block:IndexPage}
width:240px; height:168px;{/block:IndexPage}
{block:PermalinkPage} width:770px; height:500px;{/block:PermalinkPage}
}
#footer { width: 770px; margin:20px 0px 0px 0px; text-align:center; color:#333; }
#pagination { float:left; width:770px; margin:20px 0px 20px 0px; padding:0px 0px 0px 0px; text-align:left; letter-

spacing:1px;}
#pagination a {padding:3px;
-moz-transition: all 0.3s ease-out; /* FF3.7+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */}
#pagination a:hover { background:{color:Accent};
-moz-transition: all 0.3s ease-out; /* FF3.7+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */ }
.current_page { padding-top:3px; background:{color:Links};}

#entry:hover .notecount{
-moz-transition: all 0.3s ease-out; /* FF3.7+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
transition: all 0.3s ease-out;
opacity:1 !important;
background:url('http://static.tumblr.com/twte3d7/gpQlk3sfc/overlay.png');
}
.notecount{
background:url('http://static.tumblr.com/twte3d7/gpQlk3sfc/overlay.png');
-moz-transition: all 0.3s ease-out; /* FF3.7+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
transition: all 0.3s ease-out;
z-index:1000;
font-size:30px;
opacity:0;
display:table;
position:absolute;
height:215px;
overflow:hidden;
width: 360px;
}

#caption{
    padding:70px 10px 10px 70px;
    color: white;
    text-align: center;
    font-size: 25px;
    position: absolute;
}
    
#content{
margin:auto;
width:795px;
padding-top:20px;
}
#header {
width:770px;
top: 0px;
padding:20px 0;
margin:0 0 35px 0;
border-bottom:1px solid #000;
z-index:5000;
  position: fixed;
  background-color:#ffffff;
}
.box {
position:relative;
width:770px;
border-top:1px solid #ccc;
margin-top:20px;
padding:20px 0;
float:left;
}
.blogtitle {
-webkit-text-stroke: 1px transparent;
text-transform:uppercase;
font-weight:bold;

padding-top: 17px;
font-size:17px;
}
.navigation {
padding-top:22px;
float:right;
text-transform:uppercase;
font-size:10px;
}
.navigation a {
border-bottom:2px solid white;
margin:0 0 0 15px;
padding-bottom: 4px;
-moz-transition: all 0.3s ease-out; /* FF3.7+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
transition: all 0.3s ease-out;
}
.navigation a:hover {
border-bottom:2px solid;
padding-bottom: 4px;
-moz-transition: all 0.3s ease-out; /* FF3.7+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
transition: all 0.3s ease-out;
}
ol.notes {
border-bottom: solid 1px #eee;
padding: 0px;
opacity:0.7;
font-size:11px;
margin: 15px 0px 0px 0px;
list-style-type: none;
}
ol.notes li.note {
border-top: solid 1px #eee;
padding: 7px 0px 7px 0px;
}
ol.notes li.note img.avatar {
display:none;
height:0px;
width:0px;
}
ol.notes li.note span.action {
font-weight: normal;
}
ol.notes li.note .answer_content {
font-weight: normal;
}
ol.notes li.note blockquote {
border-color: #eee;
padding: 4px 10px;
margin: 10px 0px 0px 25px;
}
ol.notes li.note blockquote a {
text-decoration: none;
}
{CustomCSS}

<body class="{block:IndexPage}index-page{/block:IndexPage}">

</style>

<script type="text/javascript" src="http://static.tumblr.com/53unaru/kx3lgzker/jquery-1.3.2.min.js" charset="utf-

8"></script>
<script type="text/javascript" src="http://static.tumblr.com/53unaru/4jtlgzkf8/easing.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/53unaru/y8wlgzkbt/jquery.ui.totop.js"></script>

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

src="http://static.tumblr.com/q0etgkr/J5bl3lkz1/tumblrautopagernopage.js"></script>
{/block:IfEndlessScroll}

</head>

<body>

<div id="content">

<div id="header">
<div class="navigation"><a href="http://www.ellekorhalillerweb.tumblr.com">Editorial</a> <a href="http://www.ellekorhalillercommercial.tumblr.com">Commercial</a> <a href="http://www.ellekorhalillerweb.tumblr.com/information">Info</a> {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a> {/block:Pages}{/block:HasPages} <a href="http://www.ellekorhalillerweb.tumblr.com/contact">Contact</a></div>
<div class="blogtitle"><a href="/">{Title}</a></div>
</div>

{block:IfEndlessScroll}
<div class="autopagerize_page_element">
{/block:IfEndlessScroll}

{block:Posts}
<div id="entry">
{block:Title}
<h1><a href="{Permalink}">{Title}</a></h1>
{/block:Title}
{block:IndexPage}{block:Date}<a href="{Permalink}"><div class="notecount"><div style=" _position: absolute;

_top: 50%; display: table-cell; vertical-align: middle;">
<p style=" _position: relative; _top: -50%"></p></div></div></a>{/block:Date}{/block:IndexPage}

{block:IndexPage}
<div style="display: table; height: 215px; width: 260px; _position: relative; overflow: hidden;">
<div style=" _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;">
<p style=" _position: relative; _top: -50%">{/block:IndexPage}

{block:Text}
{block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
{Body}
{/block:Text}
[b]
{block:Photo}
<div id="caption">{block:Caption}{Caption}{/block:Caption}</div>
{block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
<img src="{block:IndexPage}{PhotoURL-500}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}

{/block:PermalinkPage}" alt="{PhotoAlt}"/>
{block:IndexPage}</a>{/block:IndexPage}
{block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}
{/block:Photo}

{block:Photoset}
{block:IndexPage}
        <div class="photos">
        {block:Photos}
            <img alt="" src="{PhotoURL-500}">
        {/block:Photos}
        </div>
    {/block:IndexPage}

    {block:PermalinkPage}
        {Photoset-500}
    {/block:PermalinkPage}
{/block:Photoset}
[/b]
{block:Quote}
<div class="quote"><div class="quoteicon"><img src="http://static.tumblr.com/twte3d7/toGlmwngb/left_quote_12x12.png"></div>{Quote}</div>
{block:Source}<p>— {Source}</p>{/block:Source}
{/block:Quote}


{block:Link}
<div class="h2"><a href="{URL}">&raquo; {Name}</a></div>{block:Description}
{Description}
{/block:Description}
{/block:Link}
{block:Chat}
{block:Title}<b><a href="{Permalink}">{Title}</a></b>{/block:Title}
{block:Lines}{block:Label}<b>{Label}</b> {Line}<br>{/block:Label}{/block:Lines}
{/block:Chat}


{block:IndexPage}{block:Audio}
<div class="audio">
<div class="player">
<div class="audioplayercircle"><div class="audioplayer">{AudioPlayerWhite}</div></div>
<div class="overlay"></div>
<a href="{Permalink}"><div class="art">{block:AlbumArt}<a href="{permalink}"><img src="{AlbumArtURL}"></a>
{/block:AlbumArt}</div></a>
</div>
</div>
{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}
{/block:Audio}{/block:IndexPage}
{block:PermalinkPage}
{block:Audio}
<div class="post audio">
<div class="art">{block:AlbumArt}<a href="{permalink}"><img src="{AlbumArtURL}" width="50"

height="50"></a>
{/block:AlbumArt}</div>
<div class="audioplayercircle"><div class="audioplayer">{AudioPlayerWhite}</div></div>
<div style="display: table; height: 215px; width: 380px; _position: relative; overflow: hidden;">
<div style=" _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;">
<p style=" _position: relative; _top: -50%">{/block:IndexPage}{block:Caption}{Caption}</p>{/block:Caption}</div></div>


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


{block:Answer}
<b>{Asker}: {Question}</b>
{Answer}
{/block:answer}

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

{block:IndexPage}</p></div></div>{/block:IndexPage}
</div>
{/block:Posts}

{block:IfEndlessScroll}</div>{/block:IfEndlessScroll}

{block:IfNotEndlessScroll}
{block:Pagination}<div id="footer"><div id="pagination">
{block:PreviousPage}
<a href="{PreviousPage}">&laquo; Previous</a>
{/block:PreviousPage}
{block:JumpPagination length="5"}
{block:CurrentPage}
<span class="current_page">{PageNumber}</span>
{/block:CurrentPage}
{block:JumpPage}
<a class="jump_page" href="{URL}">{PageNumber}</a>
{/block:JumpPage}
{/block:JumpPagination}
{block:NextPage}
<a href="{NextPage}">Next &raquo;</a>
{/block:NextPage}</div></div>
{/block:Pagination}
{/block:IfNotEndlessScroll}

{block:IfNotHideFooter}<div class="box"><div style="float:left;"><img src="{PortraitURL-96}"></div>
{block:Description}<div style="width:240px; float:right; position:relative; right:0;">{Description}</div>
{/block:Description}</div>{/block:IfNotHideFooter}
</div>

</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 29th March 2024 - 05:23 PM