We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

SP Easy Gallery messed up suddenly

Featured Lock Resolved Bug
Lizakrug.lambrecht.dk. SP Easy Gallery
Menu-point WORKS

Suddenly some of the pictures are not placed in a row but a little chaotic.

Everything worked fine until suddenly.......

Do you have any explanations or solutions?

39 Answers

Toufiq - Staff

More than a month ago #Permalink
thank you so much. it's perfect:D :D :D
will you give me the code, so I can use it on other sites as well


Hi there, I have added CSS code inside the custom.css file. Thanks

Toufiq - Staff

More than a month ago #Permalink
Hi there,

Thanks for contacting us. Sorry for the inconvenience. Would you please share a screenshot of your problem?

-Thanks

Grethe Lambrecht

More than a month ago #Permalink
stories.jpg
I found out why - when I should take a print:
I made the screen smaller - then the problem dissapeared!
which means - if people have 110% screen or more it will look like this
at 100% there's no problem:o

Attachments (1)

  • stories.jpg
    stories.jpg 117.8 KB

Toufiq - Staff

More than a month ago #Permalink
Hi there, I have checked your URL and no problem

https://prnt.sc/sglqw1

-Thanks

Grethe Lambrecht

More than a month ago #Permalink
well there is a HUGE problem. if your pc is set to 125% everything is messed up
and if you look at it on an iPad it is messed up - and when you click at one of the pictures on an iPad you get in to one of the wrong categories

if you click on the picture top half - you come in the right category - if you clic on the picture bottom half - you come into the next category

Toufiq - Staff

More than a month ago #Permalink
well there is a HUGE problem. if your pc is set to 125% everything is messed up
and if you look at it on an iPad it is messed up - and when you click at one of the pictures on an iPad you get in to one of the wrong categories

if you click on the picture top half - you come in the right category - if you clic on the picture bottom half - you come into the next category


Hi there, Please provide me the Joomla administrator access via PM & try to check the left sidebar.

-Thanks

Toufiq - Staff

More than a month ago #Permalink
Hi there, Please remove your custom.css file code one by one you will find out the solution. Thanks

Grethe Lambrecht

More than a month ago #Permalink
yes - but then you have to help me ajust the gallery, so it can be used to a professionel artist!
where eg - the text does not cover the pictures - and all the other stuff.

can I send you a list of what I need help for???

Toufiq - Staff

More than a month ago #Permalink
yes - but then you have to help me ajust the gallery, so it can be used to a professionel artist!
where eg - the text does not cover the pictures - and all the other stuff.

can I send you a list of what I need help for???


Sure, Please share a another screenshot. Thanks

Grethe Lambrecht

More than a month ago #Permalink
thank you so much.
in custom css I have made (for WORKS)
- /*remove numbers in album*/
- /*remove the dark colour on pictures*/
- /*remove the blurry skin on frontsite pictures works*/
- /*making text smaller – and padding title*/
- /*move sp-easy-gallery remove pictures away from right*/
- /*title size*/ (14px)
-----------------------------
picture - works1 - text and block
/*the block under each picture in the album*/ works1
.speasyimagegallery-gallery-item-title {
display: block;
color: #0c0c0c;
margin: 0;
padding: 0;
font-size: 13px;
line-height: 1.2;
font-weight: 400;
letter-spacing: 1px;
}

/*text under each picture in the album*/ works1
.speasyimagegallery-gallery-item-content {
position: static;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
z-index: 2;
opacity: 0;
-webkit-transition: opacity 400ms;
transition: opacity 400ms;
}
----------------------------------------------
picture - works2 -
/*title and size on slide-picture*/ works2
.speasyimagegallery-image-content {
position: static;
z-index: 1;
background: transparent !important;
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-attachment: scroll;
background-image: none;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
color: #fff;
bottom: 20;
left: 0;
right: 0;
font-size: 12px;
line-height: 16px;
padding: 5px;
text-align: left;
-webkit-animation: fadeInUp 300ms;
animation: fadeInUp 300ms;
}.
works1.png works2.png
-------------
A lot of adjustments I have made - is also margin and padding - because she would like all the pages to have same left and right margin as "about" - "cv" and "contact" ("works" and "news" make other margins)
and it is very important - that nothing covers her pictures or makes pictures blurry or dark
------------------
hopr you can help - as I am about to make her and her husband 2 more sites (they are all i WordPress right now)

Attachments (2)

  • works1.png
    works1.png 285.3 KB
  • works2.png
    works2.png 881.3 KB

Toufiq - Staff

More than a month ago #Permalink
thank you so much.
in custom css I have made (for WORKS)
- /*remove numbers in album*/
- /*remove the dark colour on pictures*/
- /*remove the blurry skin on frontsite pictures works*/
- /*making text smaller – and padding title*/
- /*move sp-easy-gallery remove pictures away from right*/
- /*title size*/ (14px)
-----------------------------
picture - works1 - text and block
/*the block under each picture in the album*/ works1
.speasyimagegallery-gallery-item-title {
display: block;
color: #0c0c0c;
margin: 0;
padding: 0;
font-size: 13px;
line-height: 1.2;
font-weight: 400;
letter-spacing: 1px;
}

/*text under each picture in the album*/ works1
.speasyimagegallery-gallery-item-content {
position: static;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
z-index: 2;
opacity: 0;
-webkit-transition: opacity 400ms;
transition: opacity 400ms;
}
----------------------------------------------
picture - works2 -
/*title and size on slide-picture*/ works2
.speasyimagegallery-image-content {
position: static;
z-index: 1;
background: transparent !important;
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-attachment: scroll;
background-image: none;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
color: #fff;
bottom: 20;
left: 0;
right: 0;
font-size: 12px;
line-height: 16px;
padding: 5px;
text-align: left;
-webkit-animation: fadeInUp 300ms;
animation: fadeInUp 300ms;
}.
[attachment]works1.png[/attachment][attachment]works2.png[/attachment]
-------------
A lot of adjustments I have made - is also margin and padding - because she would like all the pages to have same left and right margin as "about" - "cv" and "contact" ("works" and "news" make other margins)
and it is very important - that nothing covers her pictures or makes pictures blurry or dark
------------------
hopr you can help - as I am about to make her and her husband 2 more sites (they are all i WordPress right now)


Hi there, Please increase the size of thumbnail from easy gallery options. Thanks

Grethe Lambrecht

More than a month ago #Permalink
I do not understand what you mean?
they are 400 x 300 now?

Toufiq - Staff

More than a month ago #Permalink
I do not understand what you mean?
they are 400 x 300 now?


Yes, Now 400X300. Please increase it and check after adding a new image. Thanks

Grethe Lambrecht

More than a month ago #Permalink
I changed it yesterday to 440x330 - and uploadet an image under Black & White (text TEVA)
and today - I can see there are problems with the template, when I just visit front-end???

Toufiq - Staff

More than a month ago #Permalink
I changed it yesterday to 440x330 - and uploadet an image under Black & White (text TEVA)
and today - I can see there are problems with the template, when I just visit front-end???


Hi there, When you will disable the left sidebar then your images will display fine.

Please check the screenshot
https://prnt.sc/slumqs

-Thanks

Grethe Lambrecht

More than a month ago #Permalink

  1. so - I should make submenues under work instead? is that what you mean?
  2. the pictures to the right are narrower than the others
    does this solve ALL the problems? with paddings/margins - and getting into wrong albums when clicking the images in the bottom???

Toufiq - Staff

More than a month ago #Permalink
Hi there,

Or please follow the instruction to display main image on your listing.

Easy Gallery original image display in your listing page
Go to the file location and find out the code
components/com_speasyimagegallery/layouts/gallery/default/image.php

https://pastebin.com/raw/twEtMiw0

-Thanks

Grethe Lambrecht

More than a month ago #Permalink
I am not sure, I understand - that THIS should solve all the problems with margin/padding being different on the various menus
but I will look into it Monday
so
I do not have to remove all the custom.css codes then?

Toufiq - Staff

More than a month ago #Permalink
Hi there,

Please remove the custom.css file code and check again.

Note: If you need to override something then you have to do it by yourself.
https://www.joomshaper.com/support-policy

Thanks

Grethe Lambrecht

More than a month ago #Permalink
I have removed the left module - and made submenues instead.
that's all
but now - when you click on an image inside an album there is a black fat line to the left - and same width has been cut off on the right site of the picture.
that has never been there before - and when I inspect it - I only get this back. see enclosed webkit.png

Attachments (1)

  • webkit.png
    webkit.png 301.7 KB

Toufiq - Staff

More than a month ago #Permalink
I have removed the left module - and made submenues instead.
that's all
but now - when you click on an image inside an album there is a black fat line to the left - and same width has been cut off on the right site of the picture.
that has never been there before - and when I inspect it - I only get this back. see enclosed[attachment]webkit.png[/attachment]


https://prnt.sc/snzu1a

Grethe Lambrecht

More than a month ago #Permalink
I am not sure, I quite understand.
I have only added padding left and right
see enclosed - it's from your org. Travus travus-image.png

Attachments (1)

  • travus-image.png
    travus-image.png 299 KB

Toufiq - Staff

More than a month ago #Permalink
Hi there,

Add this css code inside the custom.css file instead of previous custom.css all of code.

Keep a backup of your existing custom.css file before apply this css code


/*sp-easy-gallery billeder væk fra højre*/
.galleri1 {
display: inline-block;
position: left;
background: #fff;
border: 0px solid #fff !important;
margin: 0px 40px 0px 0px !important;
padding: 0px !important;
}



/*title linjen - hvid baggrund og sort tekst*/
.sp-page-title {
background: #fff !important;
}
.sp-page-title .sp-page-title-heading{
color:#000 !important;
}

/*bundmargen -150 på titellinjen*/
.sp-page-title .sp-page-title-heading, .sp-page-title .sp-page-title-sub-heading {
margin: 0px 0px -150px 0px;
padding: 0;
color: #fff;
}

/*fjern mørk farve på billeder*/
.speasyimagegallery-modal-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1033;
background: rgba(0,0,0,0.3);
overflow: hidden;
text-align: center;
cursor: zoom-out;
}

/*fjerner det slørede over billederne på forside works*/
.speasyimagegallery-album > div > a::after {
content: " ";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: -moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgb(0, 0, 0) 100%);
background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 100%);
opacity: 1.0;
-webkit-transition: opacity 400ms;
transition: opacity 400ms;
}


/*lavet tekst mindre - padding.margen?*/
.speasyimagegallery-album-title {
display: block;
font-size: 18px;
line-height: 1;
letter-spacing: 1px;
color: rgba(11, 10, 10, 0);
text-decoration: none;
font-weight: 600;
margin: 100px 0px 0px 0px;
padding: 100px 0px 0px 25px;
outline: 0;
-webkit-transition: color 400ms;
transition: color 400ms;

}



/*blokken under hvert billede inde i albummet*/
.speasyimagegallery-gallery-item-title {
display: block;
color: #0c0c0c;
margin: 0;
padding: 0;
font-size: 13px;
line-height: 1.2;
font-weight: 400;
letter-spacing: 1px;
}

/*teksten under hvert billede inde i albummet*/
.speasyimagegallery-gallery-item-content {
position: static;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
z-index: 2;
opacity: 0;
-webkit-transition: opacity 400ms;
transition: opacity 400ms;
}

/*selve titelstørrelsen*/
.speasyimagegallery-image-title {
font-size: 14px;
font-weight: 400;
display: block;
}



/*fjern soc ikoner*/
.article-social-share .social-share-icon ul {
padding: 0;
list-style: none;
margin: 0;
display: none !important;
}

/*forside news med luft til begge sider*/
.article-list .article .article-intro-image img, .article-list .article .article-featured-video img, .article-list .article .article-featured-audio img, .article-list .article .article-feature-gallery img {
border-radius: 3px 0px 0 0;
}
.speasyimagegallery-gallery.clearfix {
padding-left: 20px;
padding-right: 20px;
}


/*lav artikelstr mindre på forsiden af blog - news*/
.article-details .article-header h1,.article-details .article-header h2 {
font-size: 1.5rem;
margin-left: 70px;
margin-top: -50px;
}

/*blog - news skjul store billede inde på siden*/
.article-details .article-full-image img {
display: inline-block;
border-radius: 4px;
display: none !important;
}

/*Flyt pilene, så de er 300px fra top*/
.article-details .pager.pagenav {
padding: 0;
}

/*ændre farverne på pile og baggrund*/
.article-details .pager.pagenav > li {
background-color: white;
}
.article-details .pager.pagenav > li >a {
color: grey;
}


-Thanks

Grethe Lambrecht

More than a month ago #Permalink
thank you. I've tried
but now
- image (big in gallery) has the text on top of the image again. THIS was a major issue for the artist that I removed.:(
- and now NEWS and WORKS have different margins from the other pages - which apparently is a mess, when seen from an artist;)
- and prev & next in NEWS are still in a fake bottom. can't I get them up in the page?

(number of photos are shown again on front works. guess it's ok I remove it again)?

Toufiq - Staff

More than a month ago #Permalink
Hi there,

Please share a screenshot that you want to do exactly.

Note: Please don't request customization support.

-Thanks

Grethe Lambrecht

More than a month ago #Permalink
works1.png margins.png next-prev.png
image
works1 I want the text/description UNDER the image, like I had done before
margins I want margins to be fixed like this on all pages - also news and works
next-prev I want next and prev button up in the middle of the page (and remove the fake/double bottom) eg 200 under menu line
soc-share-lines I want these 2 lines gone (I've removed soc. share anyway)
soc-share-lines.png

Attachments (4)

  • works1.png
    works1.png 285.3 KB
  • margins.png
    margins.png 692.9 KB
  • next-prev.png
    next-prev.png 844.7 KB
  • soc-share-lines.png
    soc-share-lines.png 305.6 KB

Toufiq - Staff

More than a month ago #Permalink
Hi there,

This feature does not exist in the SP Easy gallery. If you need then you have to do it by yourself.

Thanks

Grethe Lambrecht

More than a month ago #Permalink
well there were 4 features! I fixed the 3 of them myself
but are there no solution for next/prev to get up besides the picture - OR ABOVE the row?
thanks

Toufiq - Staff

More than a month ago #Permalink
well there were 4 features! I fixed the 3 of them myself
but are there no solution for next/prev to get up besides the picture - OR ABOVE the row?
thanks


Next-Prev icon displayed fine
https://prnt.sc/spk3n3

Grethe Lambrecht

More than a month ago #Permalink
well - it's the ones in articles/blogs - NEWS

Toufiq - Staff

More than a month ago #Permalink
well - it's the ones in articles/blogs - NEWS


https://prnt.sc/spndu3

Grethe Lambrecht

More than a month ago #Permalink
I know - but they are in the bottom
and in a special "module" below the article

Toufiq - Staff

More than a month ago #Permalink
I know - but they are in the bottom
and in a special "module" below the article


Hi there, Please share a screenshot that you want to do exactly. You can share a screenshot. Thanks

Grethe Lambrecht

More than a month ago #Permalink
news-now.png news-prev-next-in-top.png
best - if prev/next could be in the middle of page (like easy gallery)
else - if prev/next could be in the top - like image 2 here

Attachments (2)

  • news-now.png
    news-now.png 332.6 KB
  • news-prev-next-in-top.png
    news-prev-next-in-top.png 331.4 KB

Toufiq - Staff

More than a month ago #Permalink
[attachment]news-now.png[/attachment][attachment]news-prev-next-in-top.png[/attachment]
best - if prev/next could be in the middle of page (like easy gallery)
else - if prev/next could be in the top - like image 2 here


Hi there, Please check now. Thanks

Grethe Lambrecht

More than a month ago #Permalink
thank you so much. it's perfect:D :D :D
will you give me the code, so I can use it on other sites as well

Grethe Lambrecht

More than a month ago #Permalink
thanks - and have a nice day
It's a Holiday in Denmark today!:D

Toufiq - Staff

More than a month ago #Permalink
thanks - and have a nice day
It's a Holiday in Denmark today!:D


Hi there, Enjoy your holiday & pray for us. Thanks


There are no replies made for this post yet.
Be one of the first to reply to this post!

124

Templates

331031

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us