Tumblr : Captions not working when multiple photos. |
Tumblr : Captions not working when multiple photos. |
ohelle |
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}">» {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}">« 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 »</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> |
Lo-Fi Version | Time is now: 29th March 2024 - 05:23 PM |