Photo Gallery – It used to be a photo column of 4

  • Unknown's avatar

    Thank you for the information :)

    I tried to test the black-canvas-3 with another site, the “background” under “Appearance” is not available for this theme (unlike Sketch), therefore I cannot add the blue bubble (or any) background for the black-canvas-3 theme. I tried to play around.

    1. How can I add the background for black-canvas-3?

    2. What are the keywords to search for adding a background, then a white block in the center, inside will be the content?

  • The Blank Canvas theme does not have a setting for adding a full background image, so if that is a requirement for your site, I would recommend looking for themes using this search here: https://wordpress.com/themes/filter/custom-background

    What are the keywords to search for adding a background, then a white block in the center, inside will be the content?

    The link above will locate any theme that allows you to set a custom image background, but there is not a search filter for “white block in the center” so you will need to find that by checking the theme demo. Typically if the theme has a white content area in the center, it will show in the demo site and be easy to spot.

  • Unknown's avatar

    Thank you everyone.

    I tried to look for the theme by filtering feature:block-editor-styles and found the theme “Twenty Twelve” (and tried to immitate my current website with “Sketch” theme. )

    However, I did not see the “Editor button” for the “Twenty Twelve” theme. (//When you activate a theme that supports the Site Editor, visit Appearance → Editor to access it//)

    1. Is theme “Twenty Twelve” a theme supporting full site editor?

  • Hello there,

    1. Is theme “Twenty Twelve” a theme supporting full site editor?

    No, this theme was built long before Full Site Editing.

    I hope this helps with this issue.

  • Unknown's avatar

    I check this web https://iwillnevergiveup.wordpress.com/ which has similar design as the Sketch theme, however when I check it on mac, the content looks narrow. T-T

    1.) How can I search for a template which does not has a limit on the content, that means even I view it on large screen mac e.g. 24inch mac, the content takes the whole page, AT THE SAME TIME, the image remains a fixed size i.e. it will not be torn? For example, like this web, it takes over the whole screen, but image is fixed middle size – https:// miss bean bean.net

  • Unknown's avatar

    Thank you very much. Everyday I make some progress and leave my questions here overnight. Thank you so much.

    1. If I search “feature:full-site-editing Site” the template there support wide content?

    (the narrow and wide content i am referring to was explained in the photos and its photo name. Here, my old template seen in Surface Laptop looks wide, but the content gets very narrow on MacBook and iMac)
    https://drive.google.com/drive/folders/1S6IE82NPiAEeqlb9Qoo78A9k4xmW5zQy?usp=share_link

  • Hi! Full Site Editing will nearly always support full-width content. If you want something similar to the miss bean bean site, I’d recommend playing with gallery patterns: https://wordpress.com/support/wordpress-editor/block-pattern/

    Note those are not the same thing as an auto-generated gallery; they’ll give you more control over what displays where. I hope it helps.

  • Unknown's avatar
    1. What is the difference between “Page”and “Portfolio? Thank you.
  • Unknown's avatar

    Now I have rebuilt the site again T-T with new updated template :)
    1. How can I add any content/ blocks on the nativation “Gallery” page?
    2. What is the most suitable format/ blocks/ Page/ Portfolio to put under “Gallery” – “Gallery” will be the main site to gather all albums. I want it full of tiled photos, and each photo will be an album, that means the photo will be able to click into a new separate sub-gallery.

  • What is the difference between “Page”and “Portfolio? Thank you.

    A page is ‘static’ – it does not have a date of publication that is visible to visitors to your site. Also, you generally cannot assign any type of tag or category to a page.

    A portfolio project is a little more like a blog post, except it exists in a different section. Portfolio projects can be given “project tags” and “project types” which are similar to tags and categories on blog posts – they are useful for grouping portfolio projects into different topics.

    How can I add any content/ blocks on the nativation “Gallery” page?

    I could be looking in the wrong place, but I did not see the “Gallery” page in your list of pages – is this menu item created as a page under Pages > All Pages, or is it located somewhere else in your site management? Knowing where it is will help us let you know how to add content there!

    What is the most suitable format/ blocks/ Page/ Portfolio to put under “Gallery” – “Gallery” will be the main site to gather all albums. I want it full of tiled photos, and each photo will be an album, that means the photo will be able to click into a new separate sub-gallery.

    Are you intending that it should be a little similar to how the Sketch theme appears? If so then I could suggest using a Query Loop Block and ensure that it is set to display only portfolio items:
    https://wordpress.com/support/site-editing/theme-blocks/query-loop-block/

  • Unknown's avatar

    Thank you very much.

    1. What are the benefit for Portolio to have “project tags” and “project types” over “Page”? I tried to do a testing Portfolio for menu “Gallery” and ” Justin”, I put tags and project types. It is not shown on the Portfolio. Does it help underneath for internet search, seo only?

    2. What are the benefit of “Page” over “Portfolio”?

    3. https://littlemauiisland.wordpress.com/portfolio/justin-portfolio/ I did some testing here. I want the photos be shown in irregular style, e.g. Collage style. How can I keep my photo in original scale without cropping in Collage, as compare to Tiled Gallary, photos will not be cropped.

  • Hello there,

    1. What are the benefit for Portolio to have “project tags” and “project types” over “Page”? I tried to do a testing Portfolio for menu “Gallery” and ” Justin”, I put tags and project types. It is not shown on the Portfolio. Does it help underneath for internet search, seo only?

    The benefits of tags and types in this instance aids with organising projects.

    It may be the case that there are types of projects that are quite niche, but have other attributes, that can be organised with tags.

    It gives you an extra bit of functionality when it comes to showing projects under a particular URL.

    2. What are the benefit of “Page” over “Portfolio”?

    The above ability to add categories to a post type. Pages can’t be categorised.

    3. https://littlemauiisland.wordpress.com/portfolio/justin-portfolio/ I did some testing here. I want the photos be shown in irregular style, e.g. Collage style. How can I keep my photo in original scale without cropping in Collage, as compare to Tiled Gallary, photos will not be cropped.

    You can set these to Square tiles as seen here:

    I hope this helps.

  • Unknown's avatar

    Thank you very much everytime.

    I want to make my slideshow looks wider, so I adjusted the slideshow content into “Wide Widch max 1200px” However, the photos in the slideshow are cropped a bit. E.g. the slideshow here – https://wordpress.com/page/littlemauiisland.wordpress.com/723

    1. How can I make my slideshow wider without my photos cropped?

    Thank you very much.

  • Unknown's avatar
    1. Another example, https://wordpress.com/edit/jetpack-portfolio/littlemauiisland.wordpress.com/1095 here the slideshow is small size with full photos shown (no cropped photos) as comparison. I want to show the full angle of the photo and a wider view in slideshow.
    2. https://wordpress.com/edit/jetpack-portfolio/littlemauiisland.wordpress.com/1095 As for my last question 3, i meant “Collage” style, not “Tiled” style. Example here, the photos are cropped. T-T How to adjust that? Thank you
  • Hi,

    How can I make my slideshow wider without my photos cropped?

    The slideshow will set the images to “cover” the full area of the slideshow, when the slideshow is set to “wide” width – this is not a setting which can be changed at this time; however I should note that if the slideshow did “contain” the images (so that they are not cropped) then you would likely end up encountering the same issue as before, where the pause button is invisible.

    https://wordpress.com/edit/jetpack-portfolio/littlemauiisland.wordpress.com/1095 As for my last question 3, i meant “Collage” style, not “Tiled” style. Example here, the photos are cropped. T-T How to adjust that? Thank you

    This block is slightly different – it comes from Coblocks:
    https://en.support.wordpress.com/wordpress-editor/blocks/coblocks/

    However, it also crops the images because it is designed to have that specific shape; it does not account for showing the images in their entirety, and has no settings to change this.

    One possible alternative you could consider, is to use two Columns blocks and normal Image blocks, to make a similar layout but without cropping the images. We have information about the Columns block here:
    https://en.support.wordpress.com/wordpress-editor/blocks/columns-block/

    I took the liberty of creating a test portfolio project, where you can compare the effects of two columns blocks, and the collage – it is located in your drafts:
    https://wordpress.com/types/jetpack-portfolio/drafts/littlemauiisland.wordpress.com

  • Unknown's avatar

    Thank you so much 95percentghost, I am so grateful to have your help and I appreciate you and your team’s assistance very much. T-T :)

    I am looking at it for some test, now I have a resizing question T-T

    1. https://littlemauiisland.wordpress.com/resize-testing-2-genki/ on this page, all photos are reduced into 5% only, as a result, the file size are ~200kb, pixel dimension remains unchanged, i.e. 5472 x3648. I have checked this webpage at Apple on 24″ 4.5k imac and 27″ 5k imac, it looks fine. That means file size becomes small, which is good for web speed, media storage, and prevent image theft for PRINT quality.

    I have studied online that the best way to reduce image size is by reducing its %, as I have done above, the result is px dimension remains unchanged, I wonder does it mean that this cannot prevent image theft for ONLINE usage? That means I need to reduce image dimension by giving a straight px value instead? What are the best image px dimension for my site in relation to Apple on 24″ 4.5k imac and 27″ 5k imac display?

    P.s. I plan to reduce image in 2 sizes, one fore large pictures probably 2500px++, another one for very small pictures probably 600px+ (e.g. like photos shown here, some large, some small https://littlemauiisland.wordpress.com/advertising-photography_anessa-sunblock/)

  • Unknown's avatar

    Hi, let’s skip the above questions its ok.

    I will follow the “image resize foro web” guidelines suggested by this web https://www.foregroundweb.com/image-size/

    My new questions is – In the Media Setting in WordPress –

    Thumbnail size Width 150 Height 150
    Medium size Max Width 300 Max Height 300
    Large size Max Width 1024 Max Height 1024

    //I recommend changing those defaults to suit your site’s template design. Look at how large your thumbnails are being displayed in grids, and set that as the “Thumbnail size” (and consider disabling the “Crop” option to respect the initial aspect ratio of your images).// https://www.foregroundweb.com/image-size/

    In my website, I can roughly identify images size to 1. Full Width, 2. Featured/ Hero Image, 3. Blog Post Image/ Bigger Medium ~ 2000px, 4. Smaller Medium ~1500px, 5. 1300~ 6. Small ~ 200 7. Image for icon=Thumnail > Shall I reset the above WordPress Media Setting? (My target audience use 4480px x 2520px 24inch imac 4.5k Retina display, does it matter the values?”) (I will follow the website guidelines to upload size of image with values doubled the image container px dimension, but no more than 2500px)

    For example, if the max width for Large size image is 1024, that means it’s no use for me to upload 2000px/ 2500px images for mid width to full width container?

    Thank you all very much.

  • Hello again,

    Shall I reset the above WordPress Media Setting?

    It’s really your call – the settings in the Media settings are default, and can be changed if need be.

    They can also be returned to their original value if the desired affect is not obtained. :)

    Please note, that dimension and image file size are different – looking at that site you’re referencing, be sure to double check if they’re referring to image file optimisation and image size.

    Also bare in mind that WordPress uses responsive themes, so as screensize changes, so too will the image – rendering the actual size not as much as priority as the file size.

    I’d recommend this guide to optimising the image:  https://en.support.wordpress.com/media/image-optimization/

  • Unknown's avatar

    Thank you for your prompt reply. I have read the webpage you suggested.

    As for the WordPress “Media Setting”, As above I notice roughtly 7 image sizes, but in the “Media Setting”, there;s only 3 sizes – Thumbnails, Medium, Large.

    a.) Are these 3 sizes covered everything, e.g. how about full width size for example?
    b.) I will have photos upload in ~2000px, ~1200px, ~600px and one photo for site icon. How shall I adjust this? ~600px is similar to “Medium” size in the Media Setting meaning? ~1200px refers to “Large”?
    c.) Since the current “Large” size Max Width is set to 1024px, does it mean that photos uploaded as 2000px will be automatically limited to 1024px?

    I will use Lightroom and Photoshop to resize, and I note the difference between image size and pixel dimension. Thank you very much.

  • Hi there,

    Generally speaking we don’t recommend changing the image settings, as they are made to work with most sites. E.g. WordPress will pick the largest size needed to fit the display on your theme, so you don’t manually need to define these.

    To explain, WordPress makes an assortment of image sizes (for every image you upload) to cover the full range from thumbnail to full size. You don’t need to manage these, WordPress does it for you, and will serve the correct size based on your theme, and the size of the browser window that your visitor is viewing your site from.

    The settings you are referring to are made available for anyone that is _customizing their theme source code_ and needs image size defaults to fit those customizations. Customizations you make in our standard editing tools (and not changes to the source code itself) do not require custom image sizes, so safest to leave these as they are. :)

    Are these 3 sizes covered everything, e.g. how about full width size for example?

    As you point out, the theme you are using will also have several pre-set sizes that can’t be changed. So there are more than 3 sizes in use by your theme, but I would not overthink it. It should “just work” and WordPress will adjust and show the size needed for the space available.

    I will have photos upload in ~2000px, ~1200px, ~600px and one photo for site icon. How shall I adjust this? ~600px is similar to “Medium” size in the Media Setting meaning? ~1200px refers to “Large”?

    You do not need to upload multiple image sizes to your site. Instead you can just upload the largest one (~2000px) and WordPress will automatically create the smaller sizes as needed.

    Since the current “Large” size Max Width is set to 1024px, does it mean that photos uploaded as 2000px will be automatically limited to 1024px?

    Correct. WordPress will handle this automatically for you so you don’t need to do your own manual image sizing.

    Hope that helps. Please let us know if you have any more questions.

  • The topic ‘Photo Gallery – It used to be a photo column of 4’ is closed to new replies.