[emree025]

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.

[Sakin]

@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%;
    }
}

[Author]

Posts