Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Image size & position NSFW

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #160555
    MUST4NG
    Participant

    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}
    
    #160559
    Alen
    Participant

    Next time please mention this is not safe for work.

    NOT SAFE FOR WORK

    #160561
    MUST4NG
    Participant

    Links I’ve posted are not working because the new imageshack is having troubles.
    Gotta reupload them somewhere else.

    #160688
    jaimebarriga
    Participant

    Like 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

    #160717
    MUST4NG
    Participant

    Excellent man, it works like charm!
    I asked on 3 different forum, so I was starting to desperate.
    I owe you one!

    Merci encore ;)

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.