Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'thumbnail'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location


Badges

Found 131 results

  1. Site URL: https://www.seinajoenopiskelijapalvelut.fi/blog How can I add thumbnails to blog list view? Bryant doesen't give any options to customize this. https://www.seinajoenopiskelijapalvelut.fi/blog Or, if I have to manually make this with summary blog, how can I hide the category tag?
  2. I would like to hide the thumbnails from this product page: https://www.loungepair.com/offer-access Can anyone think of some custom script that I can inject to do so?
  3. Hello, on the Flatiron template, how can i change the word 'view' when you hover over a thumbnail? I would like to change it to the sign "+" Thank you
  4. Site URL: https://www.thislandisdigital.com/test-rectangles I've asked a less clear version of this question and wanted to try again with more clarity. The ideal solution would be flexible enough to be reapplied to achieve various similar arrangements. The immediate solution would strictly allow for the one requested arrangement. I am not amazing at CSS, so feel free to over-explain if you'd like. By default the Avenue template's indexes display a set of pages with identically proportioned thumbnails. In site styles, I can change the image ratio and every thumbnail will always occupy a single grid space. My current design uses square thumbnails (ratio 100, or 1:1) arranged in rows of 4 or, on mobile, rows of 2. In other words, I've created a perfect grid of squares. This design is largely inspired by ArtStation which sets a familiar standard in my industry. What I want is for the first two thumbnails to occupy two spaces in the grid for a ratio of 2:1. Because the rows for both desktop (4) and mobile (2) are divisible by 2, there is space for this in concept. Below are images of what I have and what I need. <<< Permission to stop reading here if you've already got an idea. Check images for reference. ⏰ So far I've been able to selectively target individual images and their backgrounds which I used to apply hover effects. I tried various methods of resizing images but often struggled with automatic vertical scaling (I'm looking for double wide with no change to height). Other attempts only scaled or skewed the image, leaving some part of the overall "thumbnail" structure at its original size. I don't know enough CSS to be able to understand that structure just yet. Below is the code I use to identify and affect particular thumbnails (modifying the "n" to a specific index). It's also how I'll assign rectangular hover images to the double-wide images. a.project:nth-child(n):hover { img { // On hovering over a specific block, affect the image at that selection. opacity: 20%; filter: blur(2px); transition: all 0.5s; } .content-fill { // On hovering over a specific block, affect the filled color at that selection. background-image: url(https://static1.squarespace.com/static/5338f2a1e4b012d5a0b4b9e7/t/5e852b782dc9304ac485f646/1585785720583/Thumbnails_HoverImage-Square_01.png); background-size: cover; //or: 100%; background-position: center center; background-repeat: no-repeat; } } I then tried to assign a {display: grid;} with grid-template-areas to an upper element on an index page. With this I successfully arranged the thumbnails as desired BUT had no control over vertical scaling. The double-wide thumbnails ended up appearing double-tall as well. My assumption here is that the width of the thumbnails was directly tied to the browser window (up to the maximum width), while the height had no obvious point of reference. Both my 1:1 thumbs and my 2:1 thumbs had a height of 512px, yet the height of each row was not identical. Instead, the images were locked to a 1:1 ratio, so if an image was assigned a width of two grid tiles, their height (while still one grid space tall) was doubled as well. I was able to rescale the image itself, but apparently not the entire container which stayed the same. I may have even been able to scale the grid space of each image at one point, but the clickable square and backgrounds and such were overlapping and jammed behind one another. Just lots and lots of weirdness. Below is some code for my attempts and a link to a page to test it. // Name the generic children of the layout in whatever order they appear. #collection-5c89d82aee6eb05083075575 #projectThumbs>div { a:nth-of-type(n){width: 100%;} a:nth-of-type(1){grid-area: one;} a:nth-of-type(2){grid-area: two;} a:nth-of-type(3){grid-area: three;} a:nth-of-type(4){grid-area: four;} a:nth-of-type(5){grid-area: five;} a:nth-of-type(6){grid-area: six;} a:nth-of-type(7){grid-area: seven;} a:nth-of-type(8){grid-area: eight;} a:nth-of-type(9){grid-area: nine;} a:nth-of-type(10){grid-area: ten;} a:nth-of-type(11){grid-area: eleven;} a:nth-of-type(12){grid-area: twelve;} a:nth-of-type(13){grid-area: thirteen;} a:nth-of-type(14){grid-area: fourteen;} a:nth-of-type(15){grid-area: fifteen;} a:nth-of-type(16){grid-area: sixteen;} } // Assign a grid display to the wrapper beneath #projectThumbs. #collection-5e83973d00d63d75669cbd19 #projectThumbs>div { display: grid; // Display the wrapper element as a grid. grid-template-areas: // CENTER ISLANDS "one one two two" // Two big "three four five six" // Four small "seven eight eight nine" //Small big small "ten eleven twelve thirteen" //Four small "fourteen fifteen fifteen sixteen"; // Small big small } // Customize the larger thumbnails. // At this point I was hopelessly lost, so this code is mostly to help isolate the specific indices needing double widths. #collection-5e83973d00d63d75669cbd19 #projectThumbs { a.project:nth-child(1) img, a.project:nth-child(2) img, a.project:nth-child(8) img { height: 50% !important; width: 100% !important; left: 0 !important; right: 0 !important; } a.project:nth-child(1), a.project:nth-child(2), a.project:nth-child(8){ height: 50% !important; width: 100% !important; } }
  5. Site URL: https://www.benblenner.com/ Hey, I'm struggling to add hover titles to my gallery thumbnails. There is an option to display the title below each thumbnail but I'd like the title of the project to become visible on rollover. Any ideas? I'm using Avenue. Thanks!
  6. Site URL: https://www.thislandisdigital.com/test-rectangles I've already located code to create a hover effect from a recent post (though it needs to be written for every single thumbnail). All of the tutorials and tips I've found so far replace one image with another, though, whereas I would like to overlay an image on top of the currently hovered thumbnail. The effect will basically place a border, some glowing vignette, and a few stylized notches as if looking through a camera. The test index I'm using can be found here. The image I'd like to overlay is here. My current hover code looks like this (with some extra toys thrown in while I experiment!): /* On hovering over a specific block, affect its image. */ a.project:nth-child(1):hover img, a.project:nth-child(2):hover img, a.project:nth-child(3):hover img, a.project:nth-child(4):hover img { //visibility: hidden; opacity: 50%; //border-radius: 150px; filter: blur(2px); //grayscale(100%); //invert(100%); transition: all 0.5s; } a.project:nth-child(1):hover .content-fill, a.project:nth-child(2):hover .content-fill, a.project:nth-child(3):hover .content-fill, a.project:nth-child(4):hover .content-fill { background-image: url(https://static1.squarespace.com/static/5338f2a1e4b012d5a0b4b9e7/t/5e83d5e07a31383b2b77d2d3/1585698273099/Thumbnails_HoverImage_02.png); background-size: 100%; //or: cover; background-position: center center; background-repeat: no-repeat; } How do I make the image appear over top of the thumbnails? I don't really want to fade their opacity to reveal something behind them.
  7. Hi all, The thumbnail images on my home page have stopped loading (they were working before). I'm not having this issue with any other images on the site, and the thumbnail links still work and link through to the page with the actual image. If I clear the cache and then reload the page they usually appear, but the next time I load the page they have gone again. It works fine on mobile, I'm only having trouble with the desktop site. The image below shows how the thumbnails appear. Does anyone know what I should do to fix this? Thanks!
  8. Site URL: https://www.noiamarart.com/ Hello, Wanted to see if anyone is able to help me out with figuring out how to change the title position (bottom of image, not under the image) to my thumbnail images when you hover over the image. *ONLY on Mobile VIEW! (added example pictures of a similar site) Currently when you hover over the image the title shows in center of image and the opacity covers the whole image. Also, seems like only first image on Mobile Viewing has the functioning opacity and title hover, as if it gets stuck on the first image. Got the Avenue template, fyi.
  9. Can anyone advise me on how can I access the month name inside the Event thumbnail so I can change the string to another one (localised to the language not currently supported by SQSP)? (see the picture) I managed to change most of the date instances in Events and Blog pages via datetime handle, but being a non-programmer I struggle with that thumbnail. Basically all I need is a function that will return a number of the month mentioned in the thumbnail (e.g. "3" for "MAR") --- missed bit od code marked below as ******* <script> var month=new Array(12); month[0]="LED"; month[1]="ÚNO"; month[2]="BŘE"; month[3]="DUB"; month[4]="KVĚ"; month[5]="ČER"; month[6]="ČVC"; month[7]="SRP"; month[8]="ZÁŘ"; month[9]="ŘÍJ"; month[10]="LIS"; month[11]="PRO"; Y.use('node', 'node-load', function(Y) { Y.on('domready', function() { Y.all('div.eventlist-datetag-startdate--month').each( function() { var mdate = new Date(this.getAttribute(************)); this.setHTML(month[mdate.getMonth()]); }); }); </script> *thanks*
  10. Site URL: https://runatitshouting.squarespace.com/config/design/custom-css I have posted a event and attached a product to it. it automatically has made this a clickable link and then takes me too a pointless page saying the same thing. is there any way i can disable the picture of the product as a clickable link? I have my add to cart on the screen so there is really no reason to take the user somewhere else saying the same thing. thanks for your help
  11. Site URL: http://xxnaomi.com When I'm creating a post and I want to add a thumbnail, I have the option to upload an image from the Options screen. Is there a way to just use the image I already have inside the post, or do I have to do a duplicate upload? Thanks!
  12. Site URL: https://www.ignatberbeci.com/ Can someone please help? I'm trying to get one index thumbnail on mobile devices while retaining two on desktop. Unfortunately Avenue doesn't have an option for that and it looks like a CSS code would solve this problem. Thank you guys!
  13. Site URL: https://www.thislandisdigital.com/ So I'll just say I'm not great with CSS as it applies to Squarespace (so far). I generally understand a decent amount of the action code with the brackets but identifying the right subjects (#thisPiece .thatPart) has given me too much trouble to get much done. Extra explanation on those subjects would be appreciated. Question: How do I selectively hide or otherwise alter (color, animation) the thumbnail titles only for specific pages within an index? Context: My site, ThisLandisDigital.com, uses the Avenue template and a grid of thumbnails organize my portfolio. It's common to include project logos for games and films within related thumbnails, so I've already got a layer of text for the first several images. When I enable the default index titles, the text color is not consistently legible and the text is redundant for some thumbnails. Similarly, when I try including titles directly in all of the thumbnail images, the whole page becomes much harder to read at a glance (the GIFs are distracting enough). The site style controls also don't let me choose top/bottom positions for the title, only left/center/right and overlay/under. I don't know yet what solution will be best or even whether playing with titles on some of the thumbnails will work at all, but to experiment with it I'll need to be able to single out each page's thumbnail and toggle its title visibility. Bonus Question: How would I swap the thumbnail images themselves when hovered such that I could design the titles into the images manually or possibly reduce my GIFs to hover reactions? Thanks.
  14. Hi everyone Hopefully this is a simple thing to fix. I'm trying to make the thumbnails on my events page smaller. Right now, they are at 1:1 (which works for the image dimensions), but they're way too big and also causing the images to blow out. Anyone know how to resize these, like we can in a gallery? Thanks SITE: https://www.saraleonlaw.com/news-events
  15. Site URL: https://oval-violin-hrze.squarespace.com/ I would love to know if there is some available code to inject to display the post thumbnail image for OM template. Unfortunately didn't realize this wasn't a feature of this template and already worked all day setting up basic styles for the site for a client. We'd really like to stick with this template too. Hopefully this is feasible and someone can help me. Thanks!!
  16. Hi, I am wondering if anybody have same issue with me and if solved? I am using Avenue template, and tried to change 1 thumbnail per row only on mobile, I am currently have 2 thumbnails per row on desktop version. Please help! Thanks in advance.
  17. Hi, I have designed a site using Beaumont template and added a blog page. The default template posts have images (mountains - see attached) Is there any way to change those, either edit the template posts or add them when posting a new entry? Many thanks.
  18. Hi i would like to show the image title as a caption under the individual images either in the Grid;Masonry or Simple Slideshow gallery styles (the latter also has thumbnails under the single main slide show image). However I hadnt realised before signing up that version 7.1 galleries dont show captions. Is there a way to add code that does this to specific galley pages rather than site wide? thanks
  19. Site URL: https://www.winkeyewear.com/new-events The Sonora template's events page list view shows thumbnail images that are too large for our taste. Can we make them smaller with custom css?
  20. Site URL: https://octagon-garlic-ejcr.squarespace.com/ Link : https://octagon-garlic-ejcr.squarespace.com/ Password : sonatine Hello friends, I'm almost done with my brand new website, but there are still a few things I would love to correct. 1/ So for each section, all the thumbnails (an actuall image gallery) are linked to my video projects. Problem is, people need to actually go to the video page to see the actual title. Is there a way I can make a hover effect on each thumnail pic so that when someone place the cursor on it, the title appears ? 2/ There's a slight issue with the spacing between thumbnails on the "fashion film" page. These are my main two issues before it's completed. I added two captures describing the two issues. Thanks a lot for your help, hopefully I can release my website pretty soon. Kinds regards
  21. I am working on two sites, using Marquee and Dovetail. I would like to create a rotating banner image on the home page for both. Currently, I am just using the thumbnails for the banner image, but would like it to be more captivating. Can anyone point me in a coded and detailed direction on how I could do this? My coding skills are minimal, but I can follow directions. Thank you!
  22. Site URL: https://sdbrosconsulting.com Hey, I was looking to add a border to the thumbnail of the active picture of a gallery for a client. I did not found much online so I came up with this code but it only adds a border to the top of the active thumbnail. When trying to add the border to the entire thumbnail (using border: instead of border-top:, the bottom border was not visible, neither when using border-bottom:). I'm think it actually looks better with the border on top only but if anyone knows how to have the border all-over please share! . sqs-block .sqs-gallery-thumbnails .sqs-gallery-design-strip-slide { opacity:0.5; } //Changes opacity of thumbnails not selected .sqs-block .sqs-gallery-thumbnails .sqs-gallery-design-strip-slide.sqs-active-slide { opacity:1; border-top: 1px solid #000; ; } //Changes opacity of selected/active thumbnail and sets a border on top of it
  23. Hey all! I'm using the Paloma template and I am trying to have a thumbnail image show at the bottom of each page of the previous and next blog/episode. Currently (standard) it shows the title of the next/previous blog - I just want to add the thumbnail for each as well. Any help? Thanks so much!
  24. Site URL: https://bell-parrot-x7ly.squarespace.com Hi there, Having an issue on a site i'm struggling to resolve, & worse explain to a client. When you launch a video it 1st lightboxes the thumbnail, that fades down, then jumps to the Vimeo (& occasionally there's a flicker or stutter on the Vimeo video too) It's a fairly jarring way to launch a video & struggling to find a solution. I've deleted all CSS to check but made no difference. Any advice would be really useful. https://bell-parrot-x7ly.squarespace.com/ Password: boomtown Also included a video of the issue Thanks video_stutter.mov video_stutter.mp4
  25. My custom thumbnail for an embedded video is not loading. What am I doing wrong? I've done this before, with success, so I don't know why it's not working this time.
×
×
  • Create New...