The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Tumblr HTML Help- Image sets
pearadactyl
post Aug 1 2014, 12:00 PM
Post #1





Group: Members
Posts: 1
Joined: 1-August 14
Member No.: 21,339



My image sets are not the same width as singular photos, and I've tried changing the size, but it just makes the photosets not show up. Here is my tumblr.

HTML:


<head>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Open+Sans+Condensed:300:latin' ] }
};
(function (newElements) {
var $tumblelog = $('#content');
$tumblelog.infinitescroll({
navSelector: ".pagination",
nextSelector: ".pagination a:last-child",
itemSelector: "article",
},

function (newElements) {
var $newElems = $(newElements).css({
opacity: 0
});
$newElems.imagesLoaded(function () {
$newElems.animate({
opacity: 1
});
$tumblelog.masonry('appended', $newElems);
});
});
$tumblelog.imagesLoaded(function () {
$tumblelog.masonry({
columnWidth: function (containerWidth) {
return containerWidth / 100;
}
});
});
})(); </script>

<meta name="color:Background" content="#transparent"/>
<meta name="color:Text" content="#000000"/>
<meta name="color:Title" content="#000000"/>
<meta name="color:Hover" content="#transparent"/>
<meta name="color:Link" content="#000000"/>
<meta name="color:Sidebar" content="#transparent"/>
<meta name="color:Scrollbar" content="#000000"/>
<meta name="color:Border" content="#aaaaaa"/>
<meta name="image:Sidebar" content="transparent"/>
<meta name="image:Background" content="transparent"/>
<meta name="if:sidebar on top" content="0" />
<meta name="if:Show sidebar image" content="0"/>
<meta name="if:Show blog title" content="1"/>
<meta name="if:Rainbow links" content="0"/>
<meta name="if:Faded images" content="0"/>
<meta name="if:Rounded photos" content="0"/>
<meta name="if:Sidebar border" content="0"/>
<meta name="if:Tiny cursor" content="1"/>
<meta name="text:Link 1 Title" content=""/>
<meta name="text:Link 1 URL" content=""/>
<meta name="text:Link 2 Title" content=""/>
<meta name="text:Link 2 URL" content=""/>
<meta name="text:Link 3 Title" content=""/>
<meta name="text:Link 3 URL" content=""/>
<meta name="text:Link 4 Title" content=""/>
<meta name="text:Link 4 URL" content=""/>
<meta name="text:Link 5 Title" content=""/>
<meta name="text:Link 5 URL" content=""/>


<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="scrolltopcontrol.js">
</script>
<script type="text/javascript" src="http://static.tumblr.com/2plu7ye/jt0mgeac5/top.txt"></script>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<link href='http://fonts.googleapis.com/css?family=Dr+Sugiyama' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>


<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

{block:iftinycursor}body, a:hover {cursor: url(http://i.imgur.com/ZOrzC.png), progress !important;} a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), progress !important;}{/block:iftinycursor}


::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
background-color:{color:scrollbar};
border:3px solid {color:background};
height:70px;
}

::-webkit-scrollbar-thumb:horizontal {
border:3px solid {color:background};
height:7px !important;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
}

::-webkit-scrollbar {
height:12px;
width:13px;
background-color:{color:background};}

#tumblr_controls{
z-index:555;
position:absolute !important;
-webkit-filter: invert(100%) ;}

.wrapper{
margin: 0px auto;
width: 802px;
}

.header{
float: left;
width: 100%;
}

.left{
float: left;
margin-right: 20px;
width: 802px;
}

.right{
float: right;
width: 200px;
background-color: {color:Background};
}

body{
padding: 0px;
margin: 0px;
color:{color:text};
font-family: helvetica;
font-size: 10px;
background-color: {color:Background};
background-image:url({image:Background});
background-size: repeat;
background-repeat: repeat;
background-attachment: fixed;
}

a:link, a:active, a:visited{
color: {color:Link};
text-decoration: none;
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
}

a:hover{
color:{color:Hover};
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
{block:ifshadowhover}text-shadow:0px 0px 4px #000{/block:ifshadowhover};
}

img{{block:ifroundedphotos}
border-radius:5px;
{/block:ifroundedphotos}}

.entry {
margin:4px;
float:left;
font-family: helvetica;
font-size: 10px;
line-height:11px;
{block:iffadedimages}-webkit-transition: opacity 0.5s linear;
opacity: 0.70;{/block:iffadedimages}
{block:IndexPage}
width:300px;
{/block:IndexPage}
{block:PermalinkPage}
width:500px;
margin-left: 357x;
{/block:PermalinkPage}
}

.entry:hover{
{block:iffadedimages}-webkit-transition: opacity 0.5s linear;
opacity: 1;{/block:iffadedimages}
}
.title{
font-family: 'Open Sans Condensed', sans-serif;
font-size: 19px;
line-height:20px;
color: {color:title};
font-weight: bold;
padding:0px 0px 0px 0px;
}


.entry .perma{
width:300px;
height: 13px;
position: absolute;
font-size: 10px;
line-height: 10px;
letter-spacing: 0px;
text-align: center;
font-family:georgia;
font-style:italic;
overflow:hidden;
opacity: 0.0;
background-color: #fff;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
padding-top: 5px;
padding-bottom: 3px;
bottom: 0px;
margin-left: 0px;
}

.entry:hover .perma{
overflow:visible;
-webkit-transition: opacity 0.3s linear; opacity: 0.9;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
bottom: 15px;
}

.permahover {
text-align: center;
opacity: 0.0;
filter: alpha(opacity = 0);
font-size: 10px;
line-height: 9px;
margin-top:0px;}

.entry:hover .permahover {
text-align: right;
opacity: 1;
font-family:georgia;
margin-top:5px;
font-style:italic;
filter: alpha(opacity = 50);
-webkit-transition-duration:1s;}

.videoperma embed, .post div.video object {
width:400px !important;
height:350px !important;
}

div#sidebar{
position:fixed !important;
width: 245px;
height:auto;
{block:ifsidebarontop}top:25px;{/block:ifsidebarontop}
{block:ifnotsidebarontop}top:105px;{/block:ifnotsidebarontop}
margin-left:-90px;
padding-top:0px;
padding-left:4px;
padding-right:4px;
padding-bottom:4px;
text-align: center;
font-family: helvetica;
font-size: 10px;
line-height:11px;
letter-spacing:0px;
margin-bottom: 5px;
background-color: transparent;
{block:ifsidebarborder}
border:1px solid {color:border};{/block:ifsidebarborder};
}

#posts {
width:830px;
margin-left:202px;
margin-top:20px;
float:left;
}

#infscr-loading {
position: absolute;
bottom: 0;
left: 25%;
}

.question {
border-radius:5px;
padding: 5px 10px;
background-color: #eee;
margin-bottom: 10px;
position: relative;
font-size: 11px;
line-height: 175%;
color:#000000;
}

.question::after {
content: '';
position: absolute;
top: 100%;
left: 10px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #eee;
width: 0;}

.asker_line {
margin: 0;
margin-left: 10px;
font-weight:bold;
font-family:helvetica;
font-size:11px;
}

.as {
text-align: center;
padding: 0 12px;
color: {color:link};
margin: 0px;
}

.cb a {
margin-right: 6px;
}

.cb {
text-align: center;
padding: 0px 12px;
opacity: 0;
filter: alpha(opacity = 0);
margin-top: -10px;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
-o-transition: all 0.8s ease;
}


.m {
display: block;
padding: 3px;
}

.m:hover .cb {
opacity: 1;
filter: alpha(opacity = 100);
margin-top: 0px;
}

.links {font-size: 10px;font-family:tahoma;color:#adacac;line-height:17px;text-align:center;marging:7px;}

.links:hover {color:{color:hover};text-align:center;background:{color:nav hover bg};}

.blogtitle{
text-align:center;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 24px;
line-height: 22px;
color: {color:Title};
font-weight:bold;
padding-bottom:4px;
}

blockquote {
margin: 0px;
padding-left: 5px;
margin-left: 5px;
border-left: 3px solid #000000;}

#linksss{
position:absolute !important;
width:auto;
height:auto;
right:3px;
top:26px;
-webkit-filter: invert(100%)
}

{CustomCSS}

</style>
{block:ifrainbowlinks}
<script type="text/javascript" src="http://static.tumblr.com/jn17x0j/2Zvltn7mc/rainbow_links.txt
"></script>{/block:ifrainbowlinks}

{block:IndexPage}
<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>

<script type="text/javascript">
$(window).load(function () {
var $content = $('#posts');
$content.masonry({itemSelector: '.entry'}),
$content.infinitescroll({
navSelector : 'div#pagination',
nextSelector : 'div#pagination a#nextPage',
itemSelector : '.entry',
loading: {
finishedMsg: '',
img: 'http://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
},
bufferPx : 600,
debug : false,
},
// call masonry as a callback.
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$content.masonry( 'appended', $newElems, true, function(){$newElems.fadeIn(300);} );


});
});
});
</script>

{/block:IndexPage}

<title>{title}</title>

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
<meta name="viewport" content="width=820" />

</head><script src='http://static.tumblr.com/xgp678o/IdWm3lca4/infinitescrolling.txt' type='text/javascript'></script>
<body>
<div class="wrapper">
<div class="header">
</div>

<div id="sidebar"><br>
{block:ifshowblogtitle}<div class="blogtitle"><a href="/">{Title}</a></div>{/block:ifshowblogtitle}<br>
<center>{block:ifshowsidebarimage}<a href="/"><img src="{image:sidebar}" width=239px></a>{/block:ifshowsidebarimage}</center><br><center>{Description}</center>
<br>
<center><a href="/" class="links">home</a>  
<a href="/ask" class="links">message</a>  
<a href="/archive" class="links">archive</a>  

{block:ifLink1Title}
<a href="{text:Link 1 URL}" class="links">{text:Link 1 Title}</a>  
{/block:ifLink1Title}

{block:ifLink2Title}
<a href="{text:Link 2 URL}" class="links">{text:Link 2 Title}</a>  
{/block:ifLink2Title}

{block:ifLink3Title}
<a href="{text:Link 3 URL}" class="links">{text:Link 3 Title}</a>  
{/block:ifLink3Title}

{block:ifLink4Title}
<a href="{text:Link 4 URL}" class="links">{text:Link 4 Title}</a>  
{/block:ifLink4Title}

{block:ifLink5Title}
<a href="{text:Link 5 URL}" class="links">{text:Link 5 Title}  </a>
{/block:ifLink5Title}

<a href="http://classy-lovely.tumblr.com/" class="links">theme</a></center>

</div>


<script src="http://static.tumblr.com/2plu7ye/dTemfp01j/infinitescrolling.txt" type="text/javascript"></script>



<div class="left">

<div id="posts">

{block:Posts}
<div class="entry">


{block:Text}
{block:Title}<span class="title">{Title}</span>{/block:Title}
<span class="entrytext">{Body}</span></a>
{block:IndexPage}
<div class="permahover"><p><a href="{permalink}">{timeago}</a> / <a href="{permalink}">{NoteCount} notes</a> / <a href="{ReblogURL}" target="_blank">reblog</a></p></div>
{/block:IndexPage}
{/block:Text}

{block:Link}
<a href="{URL}" class="title">{Name}</a>
{block:Description}{Description}{/block:Description}
{block:IndexPage}
<div class="permahover"><p><a href="{permalink}">{timeago}</a> / <a href="{permalink}">{NoteCount} notes</a> / <a href="{ReblogURL}" target="_blank">reblog</a></p></div>
{/block:IndexPage}
{block:Link}

{block:Photo}
{block:IndexPage}{LinkOpenTag}<div class="photo"><div class="perma">
<a href="{Permalink}">{block:Date}</a> <a href="{permalink}">Posted {timeago}</a> with <a href="{Permalink}">{NoteCount}<fontcolor:"#adacac">♥</font></a>
/ <a href="{reblogurl}" target="_blank">Reblog{/block:Date}</a> </span></div><a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="300"/></a></div>{LinkCloseTag}{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}<a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="500"/></a>{LinkCloseTag}{/block:PermalinkPage}
{/block:Photo}

{block:Photoset}

<center>{Photoset-250}</center></span><div class="permahover"><p><a href="{permalink}">{timeago}</a> / <a href="{permalink}">{NoteCount} notes</a> / <a href="{ReblogURL}" target="_blank">reblog</a></p></div>
{/block:Photoset}

{block:Answer}<div class="inner">
<div class="question">{Question}</div><p class="asker_line">{Asker}</p><p>{Answer}</p>
</div>{block:IndexPage}
<div class="permahover"><p><a href="{permalink}">{DayOfWeek}, {Month} {DayOfMonth}{DayOfMonthSuffix}</p></div>
{/block:IndexPage}{/block:Answer}

{block:Quote}
<span class="title">{Quote}</span>
{block:Source}- <strong>{Source}</strong>{/block:Source}
{block:IndexPage}
<br /><div class="permahover"><p><a href="{permalink}">{timeago}</a> / <a href="{permalink}">{NoteCount} notes</a> / <a href="{ReblogURL}" target="_blank">reblog</a></p></div>
{/block:IndexPage}
{/block:Quote}

{block:Chat}
{block:Title}<span class="title">{Title}</span>{/block:Title}
<ul class="chat">
{block:Lines}
<li class="user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}

{Line}
</li>
{/block:Lines}
</ul>
{block:IndexPage}
<div class="permahover"><p><a href="{permalink}">{timeago}</a> / <a href="{permalink}">{NoteCount} notes</a> / <a href="{ReblogURL}" target="_blank">reblog</a></p></div>
{/block:IndexPage}
{/block:Chat}

{block:Audio}
<center><div style="width:400px; height:28px;"><div style="float:left">{AudioPlayerBlack}</div><div style="margin-top:10px; float:right;">
{block:ExternalAudio}{/block:ExternalAudio}</div></div></center>
<br>{block:Caption}{Caption}{/block:Caption}
{block:IndexPage}<div class="permahover"><p><a href="{permalink}">{timeago}</a> / <a href="{permalink}">{NoteCount} notes</a> / <a href="{ReblogURL}" target="_blank">reblog</a></p></div>{/block:IndexPage}
{/block:Audio}

{block:Video}
<center>
{block:IndexPage}
<center>
{Video-250}</center>
{/block:IndexPage}
{block:PermalinkPage}
<center>
{Video-500}</center>
{/block:PermalinkPage}
{block:IndexPage}
<div class="permahover"><p><a href="{permalink}">{timeago}</a> / <a href="{permalink}">{NoteCount} notes</a> / <a href="{ReblogURL}" target="_blank">reblog</a></p></div>{/block:IndexPage}
{block:Video}

{block:PermalinkPage}
<center>
<br>{block:Caption}{Caption}{/block:Caption}{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}{block:HasTags} · {block:Tags}<a href="TagURL"> #{Tag}</a> {/block:Tags}{/block:hasTags}</center>


{/block:PermalinkPage}


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


{/block:Posts}
</div>
</div>
{block:IndexPage}
{block:Pagination}
<div id="pagination">
{block:NextPage}
<a id="nextPage" href="{NextPage}"></a>
{/block:NextPage}
{block:PreviousPage}
<a href="{PreviousPage}"></a>
{/block:PreviousPage}
</div>
{/block:Pagination}
{/block:IndexPage}
</div>


</body>
</html>

This post has been edited by pearadactyl: Aug 1 2014, 12:03 PM
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: 14th November 2019 - 06:50 AM