- This topic is empty.
-
AuthorPosts
-
January 16, 2014 at 2:01 pm #160555MUST4NGParticipant
I’m using tumblr (Effector theme). I have a problem with photo-posts: images are resized to fit the content-width (700px) which is too big.
Current situation: http://must4ngx.tumblr.com/ (explicit texts) current
Desired result : Images are resized (500px) like that wanted
I’m total newbie in CSS/HTML, I’ve actually never done any coding. But I guess the concerned part is here below. Thanks to anyone!!
{block:Photo} <div class="post-panel"> <div class="media"> <div class="photo-panel"> {block:IfContentWidth500} {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag} {/block:IfContentWidth500} {block:IfNotContentWidth500} {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag} {/block:IfNotContentWidth500} <div class="photo-btns">{block:HighRes}{/block:IfNotContentWidth500}<a class="lightbox" href="{PhotoURL-HighRes}">Pop-up</a>{/block:HighRes}<a class="photo-url" href="{PhotoURL-HighRes}">View Separately</a></div> </div> </div> {block:Caption}<div class="copy">{Caption}</div>{/block:Caption} {/block:Photo} {block:Photoset} {block:IfCustomPhotosets} <div class="post-panel"> <div class="media"> <div id="photoset-{PostID}" class="slides"> {block:Photos} <div class="photo-panel"> <a class="photo" href="{PhotoURL-HighRes}" rel="gallery-{PostID}"> {block:IfContentWidth500}<img src="{PhotoURL-500}"> {/block:IfContentWidth500} {block:IfNotContentWidth500}<img src="{PhotoURL-HighRes}">{/block:IfNotContentWidth500} </a> <div class="photo-btns"> <a class="lightbox" href="#">Pop-up</a> <a class="photo-url" href="{PhotoURL-HighRes}">View Separately</a> </div> </div> {/block:Photos} </div><!-- close PHOTOSET --> <div class="navi"><a href="#" class="prev"><span>Previous</span></a><a href="#" class="next"><span>Next</span></a></div> </div><!-- close MEDIA --> {block:Caption}<div class="copy">{Caption}</div>{/block:Caption} {/block:IfCustomPhotosets} {block:IfNotCustomPhotosets} <div class="photo-slideshow" data-layout="{PhotosetLayout}"> {block:Photos} <div class="photo-data"> <div class="photo"> <a href="{PhotoURL-HighRes}" rel="post-{PostID}"> <img alt="{PhotoAlt}" src="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" class="{block:Exif}exif-yes {/block:Exif}{block:Caption}caption-yes{/block:Caption}" {block:Exif}data-camera="{block:Camera}{Camera}{/block:Camera}" data-iso="{block:ISO}{ISO}{/block:ISO}" data-aperture="{block:Aperture}{Aperture}{/block:Aperture}" data-exposure="{block:Exposure}{Exposure}{/block:Exposure}" data-focal="{block:FocalLength}{FocalLength}{/block:FocalLength}"{/block:Exif} {block:Caption}data-caption="{Caption}"{/block:Caption}> </a> </div> <div class="icons"> <a class="view" href="{PhotoURL-HighRes}"><span class="zoom">Zoom</span></a> <span class="info">Info</span> </div> </div> {/block:Photos} </div><!-- close SLIDESHOW --> <div class="post-panel"> {block:Caption}<div class="copy">{Caption}</div>{/block:Caption} {/block:IfNotCustomPhotosets} {/block:Photoset}
January 16, 2014 at 2:27 pm #160559AlenParticipantNext time please mention this is not safe for work.
NOT SAFE FOR WORK
January 16, 2014 at 2:39 pm #160561MUST4NGParticipantLinks I’ve posted are not working because the new imageshack is having troubles.
Gotta reupload them somewhere else.January 17, 2014 at 7:42 pm #160688jaimebarrigaParticipantLike this? You want the image to be 500px right?
if so, the css that you need to accomplish this is:
.photo-panel { background: #FFF; } .scale-images .photo-panel img { width: 500px; }
Currently the width is 100% which is why it fills the parent container. When you do that, you’ll see that the background is black which is why it needs to be changed to white, assuming that’s what you wanted
January 18, 2014 at 1:16 pm #160717MUST4NGParticipantExcellent man, it works like charm!
I asked on 3 different forum, so I was starting to desperate.
I owe you one!Merci encore ;)
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.