[Resolved] Show only one image in slider

[Author]

Posts

[jetmirA]

Hallo
My website has a slider that accesses the images in the background. It currently shows all of them, but I want it to only show one image

sold or rented property like to stop clickig

hidden link

Thanks Jetmir

[wpv-for-each field="wpcf-gallery"]
• [types field='gallery' width='800' height='500' align='none' resize='stretch' ][/types]

[/wpv-for-each]

<span class="image-price-tag">[types field="extra3" format="FIELD_VALUE"][/types]</span>
</div>
[wpv-conditional if="( $(wpcf-reserved) ne '' )"]<div class="reserved">
<span>[wpml-string context="wpv-views"]Reserviert[/wpml-string]</span>
</div>
[/wpv-conditional]

[wpv-conditional if="( $(wpcf-verkauft) ne '' )"]<div class="reserved">
<span>[wpml-string context="wpv-views"]Verkauft[/wpml-string]</span>
</div>
[/wpv-conditional]

[wpv-conditional if="( $(wpcf-vermietet) ne '' )"]<div class="reserved">
<span>[wpml-string context="wpv-views"]Vermietet[/wpml-string]</span>
</div>
[/wpv-conditional]

<div class="property-meta border-top border-primary">
<small class="listing text-gray"><b>[wpv-post-taxonomy type='listing-category' format='name']</b></small>
<h3 class="title">[wpv-post-link]</h3>

<div class="col-xs-12">

<div class="row">
<div class="column">
<p class="extra1">[wpv-conditional if="( $(wpcf-extra1) ne '' )"]
<span class="extra1">
• [types field="extra1" format="FIELD_VALUE"][/types]
</span>
[/wpv-conditional]</p>

<p class="extra2"> [wpv-conditional if="( $(wpcf-extra2) ne '' )"]
<span class="extra2">
• [types field="extra2" format="FIELD_VALUE"][/types]
</span>
[/wpv-conditional] </p></div>
<div class="column">
<p class="extra5"> [wpv-conditional if="( $(wpcf-extra5) ne '' )"]
<span class="extra5">
• [types field="extra5" format="FIELD_VALUE"][/types]
</span>
[/wpv-conditional]</p>

<p class="extra4"> [wpv-conditional if="( $(wpcf-extra4) ne '' )"]
<span class="extra4">
• [types field="extra4" format="FIELD_VALUE"][/types]
</span>
[/wpv-conditional]</div>

</div>
</div>
</div>
<br>

.flexslider {
/*height: 268px;*/
}

.property-meta {
margin-bottom: 80px;
}
.property-meta .property-detail {
padding: 0 10px;
}
.property-meta .listing.text-gray {
display: block;
margin-bottom: 10px;
}
.image-price-tag {
position: absolute;
color: #ffffff;
z-index: 2;
right: 0;
bottom: 0;
padding: 2px 9px;
background-color: rgba(0,0,0,.78);
}
.extra1 {
margin-top: -50x;
}
.extra2 {
margin-top: -50x;
}
.extra5 {
margin-top: -50x;
}
.extra4 {
margin-top: -50x;
}
.title {
word-wrap: break-word;
font-family: arial;
color:black !important;
font-size: 18px !important;
min-height: 50px;
}
.reservedres {
position: absolute;
z-index: 6;
top: 20px;
left:auto;
height: 25px;
width: auto;
}
.reserved span {
color: #FFF;
display: inline-block;
font-weight: bold;
float: left;
background:red;
font-size: 13px;
text-transform:uppercase;
height: 100%;
padding: 2px 10px;
letter-spacing:-0.25;
}
.column {
float: left;
width: 50%;
height: 10px;
}
.row:after {
content: "";
display: table;
clear: both;
}
p.extra1 {
margin-top:-10px;
color:black;
}
p.extra2 {
margin-top:-20px;
color:black;
}
p.extra5 {
margin-top:-10px;
color:black;
}
p.extra4 {
margin-top:-20px;
color:black;
}

.flex-control-nav {
display: none;
}

function processFlexslider()
{
jQuery('.flexslider').flexslider({
animation: "slide"
});
}

// load processFlexslider function on page load
jQuery(window).load(function() {
processFlexslider();
});

jQuery(window).load(function(){
jQuery("div.flexslider").each(function(index){
var priceTag = jQuery( this ).find(".image-price-tag");
var flexViewport = jQuery( this ).find(".flex-viewport");

priceTag.appendTo(flexViewport);
});
});

[Jamal]

Hello Jetmir and thank you for contacting the Toolset support.

Currently, your website is not reachable. check this screenshot hidden link
So, I can't check this page and make sure that I understood what you would like to have.

I'll put this ticket as waiting for your feedback until you reply to confirm that the site is available.

I activate a private reply for you if you want to share credentials to your website. In that case, please ** make a database backup before sharing credentials. **

[jetmirA]

The Domain is working fine and the link is working, but if you could stop the 203 pictures from being loaded, this is actually the error there were too many pictures as before with slider now without these pictures would not have to be loaded

[jetmirA]

The problem is I deleted the slider and only want one picture to be displayed. I managed that, but it loads all the pictures in the background that were in the silder. This is the error

[jetmirA]

as you test my domain it works everywhere it could be your dns
hidden link
hidden link

[Christian Cox]

Hello, Jamal was having trouble accessing your site but I am not having the same problem. I will take a look and see how we can update the slider so extra images are not loaded. Please stand by and I will give you an update shortly.

[Christian Cox]

Okay it looks like you are currently looping over all the images and outputting a list item for each one. Instead of this:

[wpv-for-each field="wpcf-gallery"]
<li>
    [types field='gallery' width='800' height='500' align='none' resize='stretch' ][/types]
</li>
[/wpv-for-each]

...you could remove the wpv-for-each shortcode and output only the first image and list item:

<li>
    [types field='gallery' width='800' height='500' align='none' resize='stretch' index='0'][/types]
</li>

That will prevent looping over all the images. Only one image for each post will be output onto the front-end of the site. Will this solve the problem?

[jetmirA]

Hello everyone unfortunately it does not work. I have a full backup and it can be restored. You can test it directly on my website

[Christian Cox]

I'm a bit confused because it seems to be working when I make the changes I described. I have edited the Content Template here:
https://predio.ch/wp-admin/admin.php?page=ct-editor&ct_id=97&action=edit

I adjusted the original code, which was this:

    <ul class="slides">
        [wpv-for-each field="wpcf-gallery"]
        <li>
            [types field='gallery' width='800' height='500' align='none' resize='stretch' ][/types]
        </li>
        [/wpv-for-each]
    </ul>
 

The updated code does not include a wpv-for-each shortcode, and it includes an index of zero for the image custom field shortcode:

    <ul class="slides">
        <li>
            [types field='gallery' width='800' height='500' align='none' resize='stretch' index='0' ][/types]
        </li>
    </ul>

Now only one image from the repeating custom field is loaded for each result. I have attached a screenshot here showing only one image per result in the output of this View. It seems like there is a style issue now where a bullet is shown for each list item. I'm not sure if you have added CSS to change that, or if you are still working on the styles. If there is something specific that does not seem to be working as expected, please explain in detail and I will try to resolve it.

[jetmirA]

hidden link

So with the real estate it now only shows one picture that is correct but if you click on a property you should then show all pictures again and not just one picture

[jetmirA]

that's fine with this ad
however i have the feeling that
Toolset Galerie Feld (Gallery) also pays if you click on the slider in the property

[jetmirA]

actually it should show that way, but this option only comes here for one picture which is wrong

[jetmirA]

My issue is resolved now. Thank you!