personalisation Tumblr affichage aléatoire

personalisation Tumblr affichage aléatoire - HTML/CSS - Programmation

Marsh Posté le 05-01-2014 à 21:23:37    

Bonjour,
 
Je me suis lancé dans la création d'un blog photo sous Tumblr. Je suis parti d'un thème existant (Inverse by xantheose) avec un scrolling horizontal infini. Je découvre petit à petit la structure du blog et le CSS (j'ai quelques bases en HTML).
J'ai réussi à faire quelques modifications (barre de menu en haut, taille des images, marges,..).  Voici l'adresse du blog : http://www.benoitd-photos.tumblr.com/  
 
Je rencontre deux problèmes :
1/ lorsque je clique sur une image à partir de la page d'accueil, celle-ci s'ouvre dans une nouvelle page (permalink). J'ai mis des balises max-height pour que l'image ne dépasse pas la fenêtre mais je n'arrive la faire fonctionner convenablement, soit elle dépasse, soit elle est trop petite. Comment faire pour que l'image s'adapte à la taille de la fenêtre sans avoir besoin d'utiliser les barres de défilement ?
 
2/ Je souhaiterais surtout que sur la page d'accueil et sur les pages de catégories, les images s'affichent dans un ordre aléatoire (peut-être faut-il modifier le script jquery mais là je suis perdu)
 
3/ J'aimerai de la même façon créer une "page" (au sens de Tumblr) avec une grille présentant mes photos dans une ordre aléatoire (pas nécessairement infini). Existe-til une fonction pour récupérer toutes les url des images du compte tumblr ?
 
 
Je colle ci-dessous le code du thème modifié
 
Merci d'avance pour vos conseils
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  4. <!--
  5. Inverse by xantheose
  6. -->
  10. <html lang="en">
  11. <head>
  14. <meta name="if:Italic Title" content="1"/>
  16. <meta name="color:Background" content="#FFFFFF"/>
  17. <meta name="color:Title" content="#444444"/>
  18. <meta name="color:Borders" content="#DDDDDD"/>
  19. <meta name="color:Text" content="#444444"/>
  20. <meta name="color:Link" content="#444444"/>
  21. <meta name="color:Chat" content="#F5F5F5"/>
  23. <meta name="font:Body" content="Garamond"/>
  24. <meta name="text:Menu font size" content="15"/>
  25. <meta name="text:Title font size" content="25"/>
  27. <meta name="text:Post title font size" content="14"/>
  28. <meta name="text:Body font size" content="12"/>
  31. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  32. <title>{block:SearchPage}Search results for "{SearchQuery}" - {/block:SearchPage}{block:PostSummary}
  34. {PostSummary} - {/block:PostSummary}{Title}</title>
  36. <style type="text/css">
  39. iframe#tumblr_controls{
  40. top: 1px !important;
  41. margin: 0 0 0 0;
  42. right: 6px !important;
  43. position: fixed !important;
  44. }
  46. body{
  47. margin: 0px;
  48. background-color: {color:Background};
  49. font-size: {text:Body font size}px;
  50. font-family: {font:Body};
  51. line-height: 16px;
  52. color: {color:Text};
  53. }
  55. a:link, a:active, a:visited{color: {color:Link}; text-decoration: none;}
  57. ::-webkit-scrollbar-thumb:vertical{
  58. background-color: {color:Borders};
  59. height: 100px;
  60. -webkit-border-radius: 3px;
  61. }
  63. ::-webkit-scrollbar-thumb:horizontal{
  64. background-color: {color:Borders};
  65. height: 10px;
  66. -webkit-border-radius: 3px;
  67. }
  69. ::-webkit-scrollbar{
  70. height: 10px;
  71. width: 8px;
  72. background-color: {color:Background};
  73. }
  75. div#content{
  76. {block:IndexPage}margin: 15% 0px 0px 20%;{/block:IndexPage}
  77. {block:PermalinkPage} width: 100%; margin-top:145px; margin-left:10%;text-align:center; align:center;padding: 20px;{/block:PermalinkPage}
  78. }
  80. div#side{
  81. text-align: center;
  82. background-color: white ;
  84. width: 100%;
  85. height: 100px;
  86. position: fixed;
  87. top: 0px;
  88. padding: 20px 20px 20px 20px;
  89. opacity: 0.9;
  90. filter: alpha(opacity = 90);
  91. z-index: ;1
  92. }
  96. div#sidebottom{
  97. text-align: right;
  99. background-color: white ;
  101. width: 90%;
  102. height: 30px;
  103. position: fixed;
  104. bottom: 0px;
  105. padding: 0px 0px 0px 0px;
  106. margin-bottom:5px;
  107. opacity: 0.9;
  108. filter: alpha(opacity = 90);
  109. z-index: ;1
  110. }
  112. /* {color:Background} */
  115. .title{
  116. font-size: {text:title font size}px;
  117. {block:IfItalicTitle}font-style: italic;{/block:IfItalicTitle}
  118. color: {color:Title};
  119. margin: 10px 0px 20px 0px;
  120. }
  122. .info{padding-bottom: 20px; border-bottom: 1px solid {color:Borders};}
  124. .majuscule {
  125. text-transform: uppercase;
  126. }
  128. a.nav{
  129. display: inline;
  130. color: {color:Title};
  131. text-transform: lowercase;
  132. margin-top: 5px;
  133. padding-bottom: 3px;
  134. margin-left: 10px;
  135. margin-right: 10px;
  136. border-bottom: 1px solid {color:Borders};
  137. }
  139. a.majuscule {
  140. text-transform: uppercase;
  141. }
  143. .page{
  144. display: block;
  145. font-family: Arial;
  146. margin-top: 145px;
  147. font-size: 10px;
  148. font-weight: bold;
  149. letter-spacing: 1px;
  150. }
  153. .caption{
  154.     font-family: Courier;
  155.     text-align: center;
  156.     }
  159. .entry {max-width: 1000px; min-width: 250px;{block:IndexPage}margin-right: 25px; height: 400px;{/block:IndexPage}}
  161. .entry img {{block:IndexPage}max-width: 1000px; max-height: 400px;  {/block:IndexPage}}
  163. .photo img {{block:IndexPage}max-width: 1000px; max-height: 450px {/block:IndexPage}}
  171. .entry img {{block:PermalinkPage}max-width: 100%; height:20%; max-height: 40%;  {/block:PermalinkPage}}
  173. .photo img {{block:PermalinkPage}max-width: 100%; height:20%; max-height: 40% ;{/block:PermalinkPage}}
  180. /*
  181. .wp-caption,
  182. .wp-caption-text {
  183. max-width: 97.5%;
  184. height: auto;
  185. width: auto9; /* ie8 */
  186. }*/
  188. blockquote{
  189. padding: 0px 0px 0px 5px;
  190. margin: 0px 0px 2px 1px;
  191. border-left: 2px solid {color:Borders};
  192. }
  194. .post_title{
  195. font-size: {text:Post title font size}px;
  196. color: {color:Post title};
  197. line-height: 20px;
  198. }
  200. div#chat li {padding: 4px; background-color: {color:Chat}; margin-top: 2px;}
  202. div#chat ul{
  203. list-style: none;
  204. padding: 0px;
  205. margin-top: 5px;
  206. margin-bottom: 10px;
  207. {block:IndexPage}width: 400px;{/block:IndexPage}
  208. {block:PermalinkPage}width: 500px;{/block:PermalinkPage}
  209. }
  211. .audio{
  212. background-color: #000000;
  213. height: 27px;
  214. {block:IndexPage}width: 400px;{/block:IndexPage}
  215. {block:PermalinkPage}width: 500px;{/block:PermalinkPage}
  216. }
  218. .permaborder{display: block; padding-top: 5px; border-bottom: 1px solid {color:Borders};}
  220. .permalink{
  221. display: block;
  222. margin-top: 50px;
  223. text-align: center;
  224. opacity: 1;
  225. filter: alpha(opacity = 0);
  226. -webkit-transition: 0.2s ease-in;
  227. -o-transition: 0.2s ease-in;
  228. transition: 0.2s ease-in;
  229. }
  231. .permalink a{background-color: {color:Background}; padding: 5px;}
  233. .entry:hover .permalink{
  234. opacity: 1;
  235. filter: alpha(opacity = 100);
  236. -webkit-transition: 0.2s ease-in;
  237. -o-transition: 0.2s ease-in;
  238. transition: 0.2s ease-in;
  239. }
  241. div#postnotes{width: 500px; {block:IndexPage}display:  none;{/block:IndexPage}}
  243. ol.notes{
  244. padding: 0px;
  245. margin: 25px 0px;
  246. list-style-type: none;
  247. border-bottom: solid 1px {color:Borders};
  248. }
  250. ol.notes li.note{border-top: solid 1px {color:Borders}; padding: 4px;}
  252. ol.notes li.note img.avatar{
  253. vertical-align: -4px;
  254. margin-right: 10px;
  255. width: 16px;
  256. height: 16px;
  257. }
  259. ol.notes li.note span.action{font-weight: normal;}
  261. ol.notes li.note .answer_content{font-weight: normal;}
  263. ol.notes li.note blockquote{
  264. padding: 0px 0px 0px 5px;
  265. margin: 0px 0px 2px 35px;
  266. border-left: 2px solid {color:Borders};
  267. }
  269. ol.notes li.note blockquote a{text-decoration: none; font-size:10px;}
  271. .navigation{display:none;}
  274. {CustomCSS}
  275. </style>
  276. <link rel="shortcut icon" href="{Favicon}">
  277. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
  278. <meta name="viewport" content="width=820" />
  281. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
  283. <script type="text/javascript">
  284. $(document).ready(function() {
  285. $("body" ).css("display", "none" );
  286. $("body" ).fadeIn(800);
  287. $("a.transition" ).click(function(event){
  288. event.preventDefault();
  289. linkLocation = this.href;
  290. $("body" ).fadeOut(1000, redirectPage);
  291. });
  292. function redirectPage() {
  293. window.location = linkLocation;
  294. }
  295. });
  296. </script>
  298. {block:IndexPage}
  300. <script src="http://static.tumblr.com/fiton9k/T5Mlg92fv/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
  302. <script src="http://static.tumblr.com/fiton9k/D0Plgbx3t/hscroll.js" type="text/javascript" charset="utf-8"></script>
  304. <script type="text/javascript" charset="utf-8">
  305. $(function(){
  306. $(".horizontal" ).wrapInner("<table><tr>" );
  307. $(".entry" ).wrap("<td>" );
  308. });
  309. </script>
  311. {/block:IndexPage}
  313. </head>
  314. <body>
  317. <div id="side">
  318. <div class="title">{Title}</div>
  319. {block:Description}<div class="info">{Description}</div>{/block:Description}
  320. <div class="nav"><a href="/" class="majuscule nav">HOME</a>
  323. <a href="http://benoitd-photos.tumblr.com/tagged/bw" class="nav">Black & wight</a>
  325. <a href="http://benoitd-photos.tumblr.com/tagged/ny" class="nav">New-York</a>
  327. <a href="http://benoitd-photos.tumblr.com/tagged/paris" class="nav">Paris</a>
  329. <a href="http://benoitd-photos.tumblr.com/tagged/fjord" class="nav">Fjords</a>
  331. <a href="http://benoitd-photos.tumblr.com/tagged/scotland" class="nav">Scotland
  332. </a>
  334. <a href="http://benoitd-photos.tumblr.com/tagged/vegetal" class="nav">Vegetal</a>
  336. <a href="http://benoitd-photos.tumblr.com/tagged/mountain" class="nav">Mountain</a>
  338. <a href="/archive" class="nav">Archive</a>
  339. <a href="/random" class="nav">Random</a>
  340. <a href="http://benoitd-photos.tumblr.com/contact" class="nav">Contact</a>
  342. {block:HasPages}{block:Pages}<a href="{URL}" class="nav">{Label}</A>{/block:Pages}{/block:HasPages}
  343. {block:SubmissionsEnabled}<a href="/submit" class="nav">{SubmitLabel}</a>{/block:SubmissionsEnabled}</div>
  345. <div class="page">{block:PreviousPage}<a href="{PreviousPage}"><big>&laquo;</big> <small><small>/</small></small> </a>{/block:PreviousPage}{block:nextPage}<a href="{nextPage}"><big>&raquo;</big></a>{/block:nextPage}</div>
  347. </div>
  350. <div id="content" class="horizontal">
  352. {block:Posts}
  355. {block:Text}
  356. <div class="entry">
  357. {block:Title}<div class="post_title">{Title}</div>{/block:Title}
  358. {Body}
  359. {block:IndexPage}<div class="permaborder"></div><div class="permalink"><a href="{Permalink}">{NoteCountWithLabel}&nbsp;&nbsp;&bull;&nbsp;&nbsp;{TimeAgo}</a></div>{/block:IndexPage}
  360. {block:PermalinkPage}Posted {TimeAgo} with {NoteCountWithLabel}<br>{block:HasTags}Tagged with {block:Tags}<a href="{TagURL}" style="margin-right:5px; text-decoration:underline;">#{Tag}</a>{/block:Tags}{/block:HasTags}<br>{block:RebloggedFrom}Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a><br>Originally posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}{/block:PermalinkPage}
  361. </div>
  362. {/block:Text}
  364. {block:Photo}
  365. <div class="entry">
  366. {block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
  367. {block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
  368. {block:IndexPage}<div class="photo">{/block:IndexPage}<img src="{block:IndexPage}{PhotoURL-HighRes}{/block:IndexPage}
  369. {block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}" {block:PermalinkPage}{/block:PermalinkPage}/>{block:IndexPage}</div>{/block:IndexPage}<p>
  370. {block:IndexPage}</a>{/block:IndexPage}
  371. {block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}
  372. <div class="caption">{block:Caption}{Caption}{/block:Caption}</div>{block:PermalinkPage}Posted {TimeAgo} with {NoteCountWithLabel}<br>{block:HasTags}Tagged with {block:Tags}<a href="{TagURL}" style="margin-right:5px; text-decoration:underline;">#{Tag}</a>{/block:Tags}{/block:HasTags}<br>{block:RebloggedFrom}Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a><br>Originally posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}{/block:PermalinkPage}
  373. </div>
  375. {/block:Photo}
  377. {block:Photoset}
  378. <div class="entry">
  379. {block:IndexPage}{Photoset-400}{/block:IndexPage}
  380. {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
  381. <p>
  382. {block:IndexPage}<div class="permaborder"></div><div class="permalink"><a href="{Permalink}">{NoteCountWithLabel}&nbsp;&nbsp;&bull;&nbsp;&nbsp;{TimeAgo}</a></div>{/block:IndexPage}
  383. {block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}Posted {TimeAgo} with {NoteCountWithLabel}<br>{block:HasTags}Tagged with {block:Tags}<a href="{TagURL}" style="margin-right:5px; text-decoration:underline;">#{Tag}</a>{/block:Tags}{/block:HasTags}<br>{block:RebloggedFrom}Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a><br>Originally posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}{/block:PermalinkPage}
  384. </div>
  385. {/block:Photoset}
  387. {block:Quote}
  388. <div class="entry">
  389. <div class="post_title">&#10077;&nbsp;{Quote}</div>
  390. {block:Source}<p>&#8212;&nbsp;{Source}</p>{/block:Source}
  391. {block:IndexPage}<div class="permaborder"></div><div class="permalink"><a href="{Permalink}">{NoteCountWithLabel}&nbsp;&nbsp;&bull;&nbsp;&nbsp;{TimeAgo}</a></div>{/block:IndexPage}
  392. {block:PermalinkPage}Posted {TimeAgo} with {NoteCountWithLabel}<br>{block:HasTags}Tagged with {block:Tags}<a href="{TagURL}" style="margin-right:5px; text-decoration:underline;">#{Tag}</a>{/block:Tags}{/block:HasTags}<br>{block:RebloggedFrom}Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a><br>Originally posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}{/block:PermalinkPage}
  393. </div>
  394. {/block:Quote}
  396. {block:Link}
  397. <div class="entry">
  398. <div class="post_title"><a href="{URL}">{Name}</a></div>
  399. {block:Description}{Description}{/block:Description}
  400. {block:IndexPage}<div class="permaborder"></div><div class="permalink"><a href="{Permalink}">{NoteCountWithLabel}&nbsp;&nbsp;&bull;&nbsp;&nbsp;{TimeAgo}</a></div>{/block:IndexPage}
  401. {block:PermalinkPage}Posted {TimeAgo} with {NoteCountWithLabel}<br>{block:HasTags}Tagged with {block:Tags}<a href="{TagURL}" style="margin-right:5px; text-decoration:underline;">#{Tag}</a>{/block:Tags}{/block:HasTags}<br>{block:RebloggedFrom}Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a><br>Originally posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}{/block:PermalinkPage}
  402. </div>
  403. {/block:Link}
  405. {block:Chat}
  406. <div class="entry">
  407. {block:Title}<span class="post_title">{Title}</span>{/block:Title}
  408. <div id="chat">
  409. <ul>{block:Lines}<li>
  410. {block:Label}<b>{Label}</b>{/block:Label}
  411. {Line}
  412. </li>{/block:Lines}</ul>
  413. </div>
  414. {block:IndexPage}<div class="permaborder"></div><div class="permalink"><a href="{Permalink}">{NoteCountWithLabel}&nbsp;&nbsp;&bull;&nbsp;&nbsp;{TimeAgo}</a></div>{/block:IndexPage}
  415. {block:PermalinkPage}Posted {TimeAgo} with {NoteCountWithLabel}<br>{block:HasTags}Tagged with {block:Tags}<a href="{TagURL}" style="margin-right:5px; text-decoration:underline;">#{Tag}</a>{/block:Tags}{/block:HasTags}<br>{block:RebloggedFrom}Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a><br>Originally posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}{/block:PermalinkPage}
  416. </div>
  417. {/block:Chat}
  419. {block:Audio}
  420. <div class="entry">
  421. {block:AlbumArt}<img src="{AlbumArtURL}" width="200"/><p>{/block:AlbumArt}
  422. <div class="audio">{AudioPlayerBlack}</div>
  423. {block:IndexPage}{block:Caption}{Caption}
  424. <small>{PlayCount} listens</small> {block:ExternalAudio} <a href="{ExternalAudioURL}"> (download link) </a> {/block:ExternalAudio}{/block:Caption}{/block:IndexPage}
  425. {block:IndexPage}<div class="permaborder"></div><div class="permalink"><a href="{Permalink}">{NoteCountWithLabel}&nbsp;&nbsp;&bull;&nbsp;&nbsp;{TimeAgo}</a></div>{/block:IndexPage}
  426. {block:PermalinkPage}Posted {TimeAgo} with {NoteCountWithLabel}<br>{block:HasTags}Tagged with {block:Tags}<a href="{TagURL}" style="margin-right:5px; text-decoration:underline;">#{Tag}</a>{/block:Tags}{/block:HasTags}<br>{block:RebloggedFrom}Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a><br>Originally posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}{/block:PermalinkPage}
  427. </div>
  428. {/block:Audio}
  430. {block:Video}
  431. <div class="entry">
  432. {Video-500}<p>
  433. {block:IndexPage}<div class="permaborder"></div><div class="permalink"><a href="{Permalink}">{NoteCountWithLabel}&nbsp;&nbsp;&bull;&nbsp;&nbsp;{TimeAgo}</a></div>{/block:IndexPage}
  434. {block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}Posted {TimeAgo} with {NoteCountWithLabel}<br>{block:HasTags}Tagged with {block:Tags}<a href="{TagURL}" style="margin-right:5px; text-decoration:underline;">#{Tag}</a>{/block:Tags}{/block:HasTags}<br>{block:RebloggedFrom}Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a><br>Originally posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}{/block:PermalinkPage}
  435. </div>
  436. {/block:Video}
  438. {block:Answer}
  439. <div class="entry">
  440. <b>{Asker} : {Question}</b>
  441. <i>{Answer}</i>
  442. {block:IndexPage}<div class="permaborder"></div><div class="permalink"><a href="{Permalink}">{NoteCountWithLabel}&nbsp;&nbsp;&bull;&nbsp;&nbsp;{TimeAgo}</a></div>{/block:IndexPage}
  443. {block:PermalinkPage}Posted {TimeAgo} with {NoteCountWithLabel}<br>{block:HasTags}Tagged with {block:Tags}<a href="{TagURL}" style="margin-right:5px; text-decoration:underline;">#{Tag}</a>{/block:Tags}{/block:HasTags}<br>{block:RebloggedFrom}Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a><br>Originally posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}{/block:PermalinkPage}
  444. </div>
  445. {/block:answer}
  448. <div id="postnotes">{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  450. {/block:Posts}
  452. </div>
  454. <div id="sidebottom">
  457. <a href="http://www.flickr.com/benoit_d"><img src="http://static.tumblr.com/dgatwhw/te2myxruv/logo_flickr.jpg" height="98%" target="_blank"/></a>&nbsp;&nbsp;
  458. <a href="http://www.facebook.com/benoit.deniaud"><img src="http://static.tumblr.com/dgatwhw/zMImyxruq/logo_fb.jpg" height="98%" target="_blank"/></a>&nbsp;&nbsp; <a href="/contact" >CONTACT</a>
  459. </div>
  463. </body>
  464. </html>


 
 


Message édité par ben_1983 le 05-01-2014 à 22:44:42
Reply

Marsh Posté le 05-01-2014 à 21:23:37   

Reply

Marsh Posté le 05-01-2014 à 21:58:55    

Tu peux éditer le code de ton message et virer le code de jquery, je pense qu'on s'en fout un peu du code de jquery :o


---------------
Blablaté par Harko
Reply

Marsh Posté le 05-01-2014 à 22:45:20    

ok. je pensais que la fonction aléatoire était à insérer dans le code  jquery.

Reply

Marsh Posté le 05-01-2014 à 23:14:53    

ah ben nan surtout pas. Il faut toujours se mettre en tête qu'une librairie comme jquery, on y touche pas, et qu'on a tout ce qui faut et qui est fourni par jquery pour arriver à notre objectif


---------------
Blablaté par Harko
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed