Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #56048
    emree025
    Participant

    Hello dear Sakin. First let me say, that your theme is fantastic and your support and knowledge is absolutely great.
    On this site http://bit.ly/1FSNGmS how to get images like on this picture http://bit.ly/1baUXqF (which I modified with paint.net). I don’t want use plugin or wordpress gallery because there is no option to use individual link for each picture.
    Thank you in advance.

    #56074
    Sakin
    Keymaster

    @emree025: This is bit complex. First you need to edit your page and go to text mode. See this screenshot for text mode https://www.pinterest.com/pin/548594798332210926/ add then add <span class="image-columns"> before your image and add </span><!-- .image-columns --> after the images. So, it should be as below:
    <span class="image-columns"><a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/freyler.jpg"><img width="446" height="70" alt="freyler" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/freyler.jpg" class="alignnone size-full wp-image-113" vdh-406539326=""></a> <a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/elternstiftung.jpg"><img width="446" height="70" alt="elternstiftung" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/elternstiftung.jpg" class="alignnone size-full wp-image-112" vdh-406539326=""></a> <a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/efedugme.jpg"><img width="446" height="70" alt="efedugme" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/efedugme.jpg" class="alignnone size-full wp-image-132" vdh-406539326=""></a> <a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/zbg.jpg"><img width="446" height="70" alt="zbg" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/zbg.jpg" class="alignnone size-full wp-image-121" vdh-406539326=""></a> <a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/wolfach.jpg"><img width="446" height="70" alt="wolfach" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/wolfach.jpg" class="alignnone size-full wp-image-120" vdh-406539326=""></a> <a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/bfw.jpg"><img width="446" height="70" alt="bfw" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/bfw.jpg" class="alignnone size-full wp-image-110" vdh-406539326=""></a> <a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/ttiad.jpg"><img width="446" height="70" alt="ttiad" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/ttiad.jpg" class="alignnone size-full wp-image-119" vdh-406539326=""></a> <a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/tes.jpg"><img width="446" height="70" alt="tes" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/tes.jpg" class="alignnone size-full wp-image-118" vdh-406539326=""></a> <a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/msk.jpg"><img width="446" height="70" alt="msk" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/msk.jpg" class="alignnone size-full wp-image-117" vdh-406539326=""></a> <a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/mina.jpg"><img width="446" height="70" alt="mina" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/mina.jpg" class="alignnone size-full wp-image-116" vdh-406539326=""></a> <a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/jbl.jpg"><img width="446" height="70" alt="jbl" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/jbl.jpg" class="alignnone size-full wp-image-115" vdh-406539326=""></a> <a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/guetermann.jpg"><img width="446" height="70" alt="guetermann" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/guetermann.jpg" class="alignnone size-full wp-image-114" vdh-406539326=""></a></span><!-- .image-columns -->

    Then update that page and add the following css in “Appearance => Theme Options => Custom CSS” box:

    .image-columns {
        clear: both:
        display: block;
        overflow: hidden;
    }
    .image-columns a {
        display: inline-block;
        float: left;
        width: 50%;
    }
    .image-columns a img.alignnone {
        -webkit-box-sizing: border-box;
        -moz-box-sizing:    border-box;
        box-sizing:         border-box;
    }
    
    @media screen and (max-width: 479px) {
        .image-columns a {
            display: block;
            text-align: center;
            width: 100%;
        }
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • The topic ‘catch box – image side by side’ is closed to new replies.